praegnanz.de büro für intervernetzte medien

Unser Weblog

Das Aside Magazin auf dem iPad …

Gerrit, 13.05.2011

… oder der vorläufige Beweis, dass man mit reiner HTML5-Technologie ein ebenso reichhaltiges multimediales Coffeetable-iPad-Magazin produzieren kann wie mit nativen Methoden, nur gefühlte 800 Prozent langsamer.

Schick ist sie ja in der Tat, die Nullnummer von Aside, einem Projekt von zwei Berliner Designern. Alle branchenüblichen Magazin-Technik-Spielereien sind vorhanden. Guckt man sich das Promovideo an, kann man das angepriesene Produkt fast nicht von einer aktuellen WIRED-Ausgabe unterscheiden. Der Knackpunkt: Das Magazin ist keine App aus dem App-Store, sondern eine reguläre (wenn auch hochgradig gepimpte und spezialisierte) Website, die mit HTML5-Technologien gebaut wurde. Genau der heilige Gral, den wir Webstandardistas seit Jahren predigen: Wozu Objective-C und proprietäre Appstore-Scheiße? Geht doch auch alles mit HTML5, CSS3 und JavaScript, Mann! Und läuft dann auch automatisch auf allen Browsern … Jaja, so sind wir.

Aside sieht richtig (richtig!) schick aus, aber es fühlt sich an wie Windows XP auf einem Pentium 60 mit 32 MB Arbeitsspeicher: Ruckelig ohne Ende, zumindest auf dem iPad 1. Auf dem iPad 2 geht es zwar merklich besser, erreicht aber niemals auch nur ansatzweise die Flüssigkeit von nativen Anwendungen wie beispielsweise der Frankfurter Rundschau. Doch daran muss man sich in der Realität messen lassen. Die Faszination am iPad entsteht unter anderem, weil der Nutzer keine Rücksicht auf die Technik nehmen muss. Doch bei Aside wird selbst meine Rücksicht auf eine harte Probe gestellt:

Damit wir uns nicht falsch verstehen: Jemand musste es probieren! Und ich hätte es liebend gerne auch selber probiert! Aber das Experiment ist in seiner jetzigen Form auf Messers Schneide. Drei Fragen spielen eine Rolle:

  1. Kann man es vertreten, dass das Magazin nur auf zukünftigen Geräten akzeptabel läuft?
  2. Kann man durch Code-Optimierungen an der jetzigen Form des Magazins noch merklich Performance rausholen?
  3. Ist das Magazin einfach nur über-designed und könnte mit schlichterem Layout wesentlich flüssiger funktionieren?

Und dahinter steckt die alles entscheidende Frage, die ich mich noch nicht zu beantworten getraue: Sollte man Aside als Beweis für die derzeitige Unmöglichkeit eines HTML5-basierten Magazines interpretieren oder als ersten handfesten Beweis der prinzipiellen Möglichkeit?

(Jedenfalls ahne ich gerade, warum die meisten nativen Magazine auf vorgerenderte Texte in Bitmap-Form zurückgreifen. Hier wird massiv Speicher zugunsten von Performance eingetauscht – eine Kosten-Nutzen-Rechnung ohne Rücksicht auf Semantik oder Code-Eleganz. Offenbar ist dynamisches Fontrendering eine anspruchsvolle Tätigkeit für den schmalbrüstigen ARM-Prozessor des iPads.)

update Dezember 2011: Dank der verbesserten JavaScript-Engine unter iOS5 und kleineren Optimierungen des Codes läuft Aside unter dem alten iPad 1 inzwischen etwas flüssiger!

Kommentare [21]

Laker macht die Produktion von Magazin-Apps einfach

Gerrit, 03.05.2011

Florian Franke hatte vermutlich einfach die gleiche Idee wie ich vor einem Jahr, als das iPad erstmals vorgestellt wurde. Im Gegensatz zu mir hat er sie jedoch im Rahmen seines Designdiploms an der FH Mainz tatsächlich umgesetzt, wenn auch mit gewissen konzeptionellen Abweichungen.

Laker ist eine Art Framework für die Erstellung von HTML5-basierten, touchoptimierten Magazinen, die mit diversen Open-Source-Komponenten arbeitet, am Ende aber einen nativen Wrapper um die Publikation legt, damit diese im AppStore verkauft werden kann. Während die einzelnen Artikelseiten mit reinen Webstandards-Technologien funktionieren (mit Unterstützung durch jQuery und Less), ist die Navigation zwischen den Artikeln über den E-Book-Generator Baker gelöst.

Florian gibt außerdem Best-Practice-Tipps, bietet Photoshop-Vorlagen an und schnürt aus allem ein vorbereitetes Paket, welches als eine Art »Magazin-Kickstart« bezeichnet werden könnte. Natürlich gibt es auch eine Demo-App mit Dummyinhalten, die jedoch den Weg in den AppStore noch nicht geschafft hat – Dummyinhalte sind dort nicht gern gesehen! Man kann sich die einzelnen Seiten aber prinzipiell im iPad schonmal angucken – hier fehlt dann halt die Artikelnavi: Cover, Seite 1, Seite 2, Seite 3

Insgesamt eine schöne und praktische Sache, doch wie ich Florian auch schon per Mail mitgeteilt habe, fände ich es noch besser, wenn es Laker auch als reines WebApp-Framework gäbe, bei dem eine native App als Wrapper unnötig wird. Dies war nämlich mein ursprüngliches Konzept: Eben keine AppStore-Abhängigkeit zu schaffen (auch wenn derzeit alle Verleger scharf darauf sind, ihre Magazine als möglichst haptische Produkt zu verkaufen, und dabei nur den sterbenden Magazinmarkt zu imitieren versuchen). Ich sehe vielmehr eine Chance darin, quasi das beste aus beiden Welten zu haben, eine Kreuzung aus WIRED und der ZEIT-Online-Tablet-Website, finanziert durch hochwertige Werbung (die man beim iPad nicht ausfiltern kann), aber mit festen Ausgaben und längeren Texten mit individuellerer Aufbereitung.

Eine weitere Option, Laker noch weiter zu entwickeln, wäre eine vorbereitete Anbindung an ein CMS (eventuell als eigene Drupal-Distribution?) Aber eins nach dem anderen. Ich bin auf jeden Fall sehr positiv gestimmt und werde den Weg von Laker interessiert verfolgen. Solltet ihr auch tun!

Kommentare [5]

Die Frankfurter Rundschau auf dem iPad

Gerrit, 25.11.2010

Bisweilen kommen bemerkenswerte Produkte von überraschenden Anbietern! Als Leute wie ich angefangen haben, über Magazine auf dem iPad nachzudenken, kamen zunächst in erster Linie Wochen- und Monatsmagazine in Frage. Man sah die Vorab-Versionen von WIRED und Popular Science+ und schwankte zwischen Bewunderung und Spott, aber war sich immer bewusst, dass ein solch individueller Aufwand für jeden einzelnen Heftbeitrag nur ein von großen Medienkonzernen subventionierter Gag sein konnte, der sich niemals refinanzieren lassen wird. Zu individuell ist die Ausgestaltung der einzelnen Artikel, zuviel Gimmicks, Magie und Handarbeit sind involviert.

Nun kommt die kleine deutsche FR daher und hat offenbar den Anspruch, täglich(!) eine Art Mini-WIRED herauszugeben. Nicht inhaltlich natürlich, sondern von der Art der Produktion. In der FR-App ist jeder Artikel (in der Queransicht) individuell gestaltet, und manche Stücke protzen mit interaktiven Funktionen wie aufklappbaren Infografiken, Bildergalerien, einzeln scrollbaren Kommentarspalten, Inline-Tab-Navigationen und anderem Schnickschnack, den wir so oder so ähnlich schon von WIRED kennen.

Bei der FR ist das Verhältnis zwischen Spielerei und Information jedoch angenehmer und mediengerechter gewählt. Die interaktiven Funktionen animieren zum Weiterlesen, ohne zu sehr abzulenken. Sagen wir es so: Die Printausgabe des Focus zu lesen ist deutlich non-linearer und stressiger.

Grob betrachtet ist die FR ein fast schon klassischer Zweidimensionalscroller mit fix layouteten Einzelseiten: In der Horizontalen kann man zwischen den einzelnen Artikeln swipen; Läuft ein Stück über mehrere Seiten, sind diese vertikal untereinander angeordnet. Das Blättern geht flüssig von der Hand und verhält sich so, wie man es erwartet. Selbstverständlich fehlen nicht diverse Inhaltsverzeichnisse und Übersichten für das schnelle Springen zu bestimmten Inhalten innerhalb eines Heftes.

Dreht man das iPad in der Artikelansicht um 90 Grad, erscheint eine automatisch layoutete Hochkantansicht, die – grob gesprochen – nur aus Headline, Artikelbild und einspaltigem Fließtext besteht. In diesem prosaischem und automatisch generierten Layout lässt sich dann aber der Schriftgrad anpassen. Und im Gegensatz zur brand eins merkt sich die App auch den eingestellten Schriftgrad für zukünftige Artikel.

Neben all den positiven Eigenschaften, zu denen auch der geringe In-App-Purchase-Preis von 79 Cent pro Ausgabe zählt, gibt es jedoch auch Kritikpunkte. Am augenfälligsten ist hierbei die Screentypografie: Während der normale Serifen-Fließtext noch halbwegs klar geht, entsteht beim recht häufig eingesetzten Grotesk-Counterpart ein sehr unregelmäßiges Schriftbild, was an der schroffen Pixelglättung sowie der nicht einheitlichen Zerknautschung von Buchstabenformen liegt. Die Punze des kleinen e ist beispielsweise mal zwei, mal drei Pixel breit; Das kann ja eigentlich nicht gut gehen. Was immer hier für das Rendering zuständig ist – die eingebaute PDF-Funktionalität von iOS ist es nicht! Siehe 1:1-Screenshot:

Des weiteren gibt es für meinen Geschmack zu häufig kleine Textkästen von vielleicht 400×400 Pixeln, in denen mehr Text steht als eigentlich hineinpasst, und in dem man dann swipenderweise herumfingern muss. Dieses kleinteilige Herumgescrolle ist schon ziemlich lange out und sollte meiner Meinung nach keine Rennaissance auf dem iPad erleben dürfen.

Ansonsten gibt es nicht allzuviel zu meckern! Bleibt die Frage, ob es sich die FR auf Dauer leisten kann, jeden Tag aufs Neue ein Team von geschätzten 5 bis 7 Experten mit der Aufbereitung der iPad-App zu beschäftigen. Höchsten Respekt von mir an dieser Stelle – ich bin gespannt, ob und wie sich das auf Dauer auszahlt!

Kommentare [8]

DIE ZEIT auf dem iPad

Gerrit, 07.10.2010

… ist eine seltsame Chimäre. Und hat einen bescheuerten Namen: ZEIT ONLINE plus App. Man kann mit dieser kostenlosen Applikation nämlich sowohl die wöchentlich erscheinenden Printausgaben von DIE ZEIT (nebst ZEIT MAGAZIN) erwerben und konsumieren, als auch auf die aktuellen Inhalte der Website zugreifen. Beide Modi sind voneinander getrennt und funktionieren auch ein wenig unterschiedlich.

Zunächst mal zu den Inhalten des Printmagazins. Im linken Drittel des Bildschirms befindet sich dauerhaft die Inhaltsangabe (oder »Navigation«, wenn man möchte), während auf der rechten Seite die einzelnen Artikel dargestellt werden (Der Hochkantmodus macht aus der linken Spalte ein PopOver, wie man das beim iPad gewohnt ist). Wählt man einen Artikel aus der Navigation aus, landet man zunächst üblicherwesie auf einer reduzierten Nur-Text-Version ohne besondere Gestaltung. Es ärgert ein wenig, dass man es nicht für nötig gehalten hat, irgendeinen Modus zu finden, um diesem nackten Text automatisch (oder halb-automatisch) um Bilder und Illustrationen zu bereichern. Die Devise lautet »Entweder oder«: Wem der nackte Text nicht schmeckt, wechselt per Knopfdruck zum jeweiligen Original-Printlayout. Dieses ist wiederum nicht sonderlich komfortabel, da die ZEIT bekanntermaßen ein riesiges Format besitzt und man sich den Wolf zoomen und scrollen muss, um die Texte halbwegs lesen zu können. Und dann die schreckliche Darstellung der Schrift! Offenbar handelt es sich um Pixelgrafiken, die hier gezoomt werden, nicht etwa um ordentliche PDF-Daten,bei denen sich ja nach ein paar Sekundenbruchteilen immer eine gewisse Schriftschärfe einstellt, wie man beim Betrachten von PDFs im GoodReader oder über iBooks beobachten kann. Umso blöder ist die Tatsache, dass es für das beigelegte ZEIT MAGAZIN gar keine Nur-Text-Version gibt. Das Herumeiern mit den Layout-Seiten ist so grauenvoll, dass man das schnell wieder sein lässt und dankbar für die Textwüsten der »großen« Hauptzeitung ist.

Die Darstellung und Handhabung der Website-Inhalte (»ZEIT ONLINE«) hingegen ist besser gelungen! Hier haben die einzelnen Artikel sogar Bilder und Bildunterschriften, sowie Kommentare und Links zu verwandten Artikeln. Das Layout ist übersichtlich und animiert zum Stöbern. Sichtbar sind jeweils bis zu fünf Artikel aus jedem der Ressorts – zusätzlich Bildergalerien und diverse Videoclips. Übrigens: ZEIT ONLINE auf dem iPad ist werbefrei und verzichtet angenehmerweise auch auf den ganzen kleinteiligen Icon-Schrott der öffentlichen Website. Diese könnte sich von der eleganten Schlichtheit der App auch noch einige Scheiben abschneiden…

Insgesamt wirkt die ZEIT-App durchaus komfortabel und aus lesetypografischer Sicht gut gestaltet. Doch bei der Umsetzung der Print-Artikel muss noch einmal nachgearbeitet werden: Die krasse schwarz/weiß-Entscheidung zwischen totaler Textwüste und hübschem, aber unlesbaren Originallayout muss einem Kompromiss weichen. Entweder man erstellt ein eigenes, adaptiertes Layout für jeden einzelnen Artikel der iPad-Ausgabe (wie es WIRED macht), oder man erfindet einen Algorithmus, mit dem man zumindest die Fotos und Illustrationen aus dem Print-Layout irgendwie sinnvoll automatisch platzieren und nutzbar machen kann. Das wäre den hochwertigen Inhalten, die die ZEIT eigentlich immer noch zu bieten hat, durchaus angemessen. Und der direkte Hamburger Konkurrent DER SPIEGEL schafft das ja auch.

Als Hintergrund vielleicht nicht uninteressant: Chefredaktuer Giovanni di Lorenzo redet im Interview mit Horizont über Geschäftsmodelle, Internet und den ganzen Kram. Naja.

Kommentare [5]

Die brand eins auf dem iPad

Gerrit, 01.10.2010

Mit dem Wirtschaftsmagazin brand eins verbindet mich eine besondere Geschichte, denn damals im 6. Semester habe ich zusammen mit Christian Voigt die Geschichte und das grafische Konzept der Zeitung (und dessen Vorläufer Econy) genauestens unter die Lupe genommen.

Wie es zum guten Ton eines modernen Magazins gehört, ließ eine iPad-Version der brand eins nicht lange auf sich warten. Spannend ist dabei aus meiner Sicht vor allem, ob sich die Macher für den eher mediengerechten Weg entscheidet und eine eigens angepasste »Touchversion« zaubern, oder aber den klassischen Weg wählen und versuchen, die Userexperience des Druckerzeugnisses nachzubilden.

Die brand eins hat sich für Letzteres entschieden. Warum sie das getan hat, kann nur spekuliert werden. Ich vermute, es war schlicht eine Geldfrage. Aber was man dann aus den bescheidenen Mitteln gemacht hat, spricht mich wiederum sehr an.

Letztlich ist die brand-eins-App nicht viel mehr als ein PDF-Viewer mit ein paar speziellen zusätzlichen Funktionen zur Navigation. Angezeigt werden zunächst mal die unveränderten, normal layouteten Seiten des Print-Magazins, wobei erstaunlich ist, wie gut sich die dort verwendete Sabon auf dem iPad lesen lässt. Wenn man das Magazin hochkant hält, wird zunächst die ganze Seite angezeigt, lässt sich aber per Spreizgeste näher ranzoomen. Wechselt man zur Queransicht, wird die gesamte Breite der einzelnen Seite ausgenutzt, und man kann die Ansicht von oben nach unten touchscrollen. Ein Zoom ist in der Queransicht nicht vorgesehen. Dafür kann man eine Ebene zurückgehen und sich die Doppelseitenkompositionen angucken, auch wenn sich der Text dann nicht mehr lesen lässt.

Es gibt aber für jeden Artikel einen »Lesemodus«, der den reinen Text ohne jegliches Seitenlayout frei nach unten fließen lässt und dabei die gesamte Breite ausnutzt. In diesem Modus lässt sich der Schriftgrad ein wenig anpassen. Leider merkt sich die App nicht den eingestellten Wert, und beim nächsten Betreten des Lesemodus ist wieder der (zu kleine) Originalschriftgrad voreingestellt. Naja.

Die interaktiven Zusatzfunktionen sind auf das wirklich Sinnvolle reduziert und bieten ein klickbares Inhaltsverzeichnis (als Startseite oder dauerhaft aufrufbares PopOver), Volltextsuche, eine Lesezeichenfunktion und gelegentliche Bildergalerien zum lustigen Swipen. Der Fokus liegt aber ganz klar auf dem linearen Lesen von langen, interessanten Texten. Und das funktioniert wirklich sehr gut, auch wenn man bisweilen ein wenig das Gefühl hat, an einem – wenn auch komfortablen – Microfiche-Lesegerät zu sitzen.

Die App ist selbstredend kostenlos und kommt mit einem vollständigen Probeheft daher. Der Kauf von weiteren Heften geschieht über reguläre In-App-Purchases und kostet € 6,99 pro Ausgabe, was ein wenig billiger ist als die Print-Ausgabe (7,60 €). Da man sich an Apples Preisstufen halten muss, kann man zwar keine völlige Flexibilität erwarten, aber € 4,99 hätten es meiner Meinung auch getan …

Ich denke, dass die brand eins mit ihrer gesamten Philosophie der Reduktion eine angemessene App gebaut hat. Die Grundidee, das Layout des Printheftes zu konservieren und für den Screen verfügbar zu machen, schmeckt mir zwar eigentlich nicht besonders. Aber wenn es denn unbedingt sein muss (und sei es aus schnöden finanziellen Gründen), so hat die brand eins das zumindest sauber, ohne Schnickschnack und insgesamt überzeugend hingekriegt. Ein vorsichtiger Daumen nach oben.

Kommentare [4]