HTML5 und Mobile Apps

Warum mögen sich HTML5 und Mobile Apps nicht?

Immer wieder hört und liest man, dass HTML5 keine brauchbare Alternative zu nativen Apps ist - Hauptproblem: Performance!

So hat sich jetzt zum Beispiel angeblich auch Facebook dazu entschlossen, ihre iOS App noch einmal von Grund auf neu zu entwickeln (Facebook Abandoning HTML5 to Speed Up iOS App).

Auf der anderen Seite schafft es aber zum Beispiel ZaptoLab das beliebte Cut the Rope auf HTML5 / JavaScript zu portieren (Behind the Scenes). - Zwar mussten sich die Entwickler sehr auf die Performance konzentrieren, aber es ist ihnen gelungen.

Nun frage ich mich, ob die Performance-Probleme durch die Zwischenschicht zwischen nativ und HTML zustande kommen, ob die meisten HTML-Apps einfach schlecht entwickelt sind oder ob die Hardware der mobilen Geräte der ausschlaggebende Grund sind.

Nicht immer Responsive Web Design

Responsive Web Design ist in aller Munde und wird derzeit sehr stark gehyped. Auch Luke W ist Befürworter von Responsive Web Design - dennoch hatte er gute Gründe für die mobile Variante von Bagcheck ein eigenes Interface zu entwickeln. Diese Gründe liefert er in seinem Blog-Post "Why Separate Mobile & Desktop Web Pages?", die ich hier kurz aufgreifen möchte:

Oberstes Gebot bei dem Projekt war Site Performance und Geschwindigkeit. Unter diesen Prämissen - und der generellen Philosopie: "Nur so viel wie nötig" - findet Luke vier Gründe:

Sourcecode Reihenfolge

Der Kern von Responsive Web Design ist die Auslieferung einer einzigen (HTML-) Website-Variante an alle Geräte. Die Anzeige des Contents passt sich dann entsprechend den Möglichkeiten des Gerätes an (in der Regel durch CSS gesteuert).

HTML Markup hat aber eine Reihenfolge, die bestimmt, in welcher Reihenfolge was gerendert wird. Diese kann natürlich mittels JavaScript manipuliert werden - aber dies zuverlässig für alle Geräte umzusetzen ist eine herausfordernde Aufgabe.

Ein einfaches Beispiel ist ein Site-weites Navigationsmenü. Während es auf Desktop-Größen in der Regel oben angeordnet ist, ist es für mobile Geräte, insbesondere in Smartphone Größe üblich, diese Menüs ans Ende der Seite zu rendern.

Medien

Responsive Web Design setzt sich auch mit Medien auseinander. Grafiken und Videos werden auf kleineren Displays kleiner dargestellt. Allerdings ist skalieren hier nicht unbedingt die beste Wahl. Erstens werden dabei unnötig Große Dateien übertragen (gerade an mobile Geräte mit evtl. nicht besonders schneller Anbindung). 

Anm.: Hier kommt zum Beispiel auch die iOS Retina--Display Diskussion ins Gespräch, da es sich für diese Geräte anbietet - genügend Bandbreite vorausgesetzt - hochauflösende Grafiken nachzuladen. (Siehe z.B. What the New iPad’s Retina Display Means for Web Developers. - Danke für den Tipp Moritz)

Zweitens kann es durchaus sinnvoll sein, dass man die Medien für unterschiedliche Display-Größen unterschiedlich aufbereitet: Große Grafiken mit vielen Details vs. kleine Grafiken mit weniger Details, also einem anders gewählten Ausschnitt.

URL-Struktur

Anm. vorab: Wie ich in Mobile und Content oder besser Content vs. Mobile? geschrieben habe, gibt es nur ein Web und ein und der selbe Content sollte auch unter ein und der selben URL zu erreichen sein. Aber:

Es gibt Situationen, in denen eine eigene URL-Struktur für kleinere Screens durchaus Sinn ergibt: Luke nennt als Beispiel eine Seite mit User-Content, Kommentaren dazu, Updates und "Likes". Dies passt alles zusammen gut auf eine Desktop-Seite und ist zum Beispiel unter der URL bagcheck.com/bag/7811 zu erreichen. Für kleinere Bildschirme ist es aber durchaus sinnvoll, einige der Informationen auf Unterseiten auszulagern, die dann unter den URLs bagcheck.com/bag/7811/updates, bagcheck.com/bag/7811/comments und bagcheck.com/bag/7811/likes zu erreichen sind.

Anwendungsdesign

Ein letzter entscheidender Punkt, der zu bedenken ist, ist folgender: Auf kleinen Displays kann es sinnvoll sein, längere Tasks von einer Seite auf mehrere zu verteilen.

Design for Mobile: What Gestures do People Use?

Luke Wroblewski schreibt in seinem Blog Ideation + Design immer Kurzfassungen von Vorträgen, an denen er teilnimmt.
Relativ aktuell ist eine Stichpunktesammlung 'What Gestures do People Use?' vom Vortrag von Dan Mauney von der 'Design for Mobile'-Konferenz in Chicago IL.

Es geht hierbei um eine Untersuchung, welche Gestiken Nutzer bei mobilen Endgeräten verwenden. Die Versuchspersonen wurden beauftragt, verschiedene Operationen durchzuführen und hierbei beobachtet.

Besonders erwähnenswert finde ich folgende drei Punkte:

• Viele Nutzer haben die gefragten Operationen in einem Menü gesucht, obwohl sie gebeten wurden, die Operationen durch Gestiken auszuführen.
• Die Wischgestik ('swipe') wurde für diverse Operationen verwendet (löschen, multi-select, ausschneiden, scrolling). Es ist also fraglich, ob man beim Entwerfen einer mobilen Benutzerschnittstelle dieser Gestik eine eindeutige Funktion zuweisen kann.
• Wenn User nicht genau wussten, wie sie eine Funktion erreichen können, haben sie ein Symbol (zum Beispiel ein Fragezeichen für Hilfe) auf den Screen gemalt. Gute Idee - ich glaube, dass ich da nicht drauf gekommen wäre.