Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Der aktuelle Stand der Dinge im Mobile Web Development

Der aktuelle Stand der Dinge im Mobile Web Development

In den letzten Jahren hat sich im mobilen Internet viel getan. Spätestens durch das Release des iPhones erkannten mehr und mehr Unternehmen wie prestigeträchtig eine Präsenz im mobilen Web sein kann. Seitdem erschienen eine ganze Menge weiterer leistungsfähiger Geräte und auch die Art und die Techniken, mobile Webseiten zu entwickeln, hat sich rasant verändert. Manuel Bieh wirft einen Blick auf den Stand der Dinge in der Entwicklung für mobile Endgeräte.

Vor ziemlich genau fünf Jahren, im Webkrauts Adventskalender 2006, erschien hier ein Artikel über die Erstellung von Internetseiten für mobile Endgeräte. Die Kosten für mobile Datenübertragung waren damals unglaublich hoch, die Geräte technisch schlecht und von den Browsern wollen wir gar nicht erst reden. Die Methoden in der mobilen Entwicklung waren damals einfach und die Möglichkeit zur Optimierung für mobile Geräte sehr eingeschränkt.

Dennoch zeichnete sich bereits eine erste Tendenz ab, dass die mobile Nutzung des Internets in den kommenden Jahren stark zunehmen werde. Rapide beschleunigt wurde diese Entwicklung durch das iPhone, das kurz nach der Veröffentlichung des Artikels angekündigt wurde und das für großes Aufsehen sorgte. Zu Recht wie sich später herausstellen sollte, denn durch das iPhone mit seinem großen Display, dem damals bereits sehr guten Browser und seiner durchdachten Bedienung gab es erstmals ein Gerät, mit dem die mobile Internetnutzung tatsächlich Spaß machen sollte.

Dies erkannten auch andere Hersteller, und so brachten nach und nach große Unternehmen wie HTC, Samsung, HP oder Motorola Geräte auf den Markt, mit denen sich komfortabel im Internet surfen lässt. Durch diese rasante Entwicklung auf dem Markt für mobile Endgeräte kam es in den letzten Jahren auch zu teilweise völlig neuen Methoden und Ansätzen bei der Erstellung mobiler Webseiten. Aber auch bestehende Techniken, wie z.B. die Bereitstellung von alternativen Style-Informationen, sind inzwischen sehr viel ausgereifter als noch vor fünf Jahren.

Damals wie heute

Um eine Analogie zu den vier damals beschriebenen Methoden herzustellen, zunächst einmal ein kurzer Rückblick. Die damals hier beschriebenen Vorgehensweisen lauteten:

  1. Nichts tun
  2. Styling von Elementen entfernen und ungestaltetes HTML ausgeben
  3. Angepasste media="handheld"-Stylesheets verwenden
  4. Inhalte, Code und Bilder speziell für Benutzer mobiler Geräte anpassen

Beim heutigen Stand der Technik entspricht dies etwa diesen Optionen:

  1. Nichts tun
  2. Progressive Enhancement und clientseitige Feature Tests
  3. Responsive Design und Mediaqueries
  4. Serverseitige Adaption
  5. Bonus: Hybrid-Lösungen

Nichts tun

Die Chance, dass eine Webseite auf mobilen Geräten halbwegs vernünftig ausgegeben wird, ist verglichen mit 2005 weitaus größer, da die Browser heutiger Smartphones intelligent genug sind, um eine Seite fehlerfrei zu rendern. Von guter Usability sind wir dabei jedoch immer noch weit entfernt. Auch wenn das iPhone anfangs sogar damit warb, das »echte« Internet anzeigen zu können, ist eine Desktop-Version einer Webseite jedoch in aller Regel einfach auf einen anderen Kontext ausgelegt.

Allein der Umstand, dass es z.B. einfach keinen echten Mouseover-Status gibt und somit schon ein simples Flyout-Menü auf einem Touchscreen-Gerät nicht funktioniert, macht deutlich, warum auf diese »Methode« auch in Zukunft nur im Ausnahmefall gesetzt werden sollte. Jedenfalls stellt bloßes »nichts tun« keine ernsthafte Alternative dar, möchtet ihr euch und euer Unternehmen ansprechend im mobilen Internet präsentieren.

Progressive Enhancement und clientsseitige Feature Tests

Beim »Progressive Enhancement« liegt der Grundgedanke darin, allen Geräten das gleiche, möglichst einfache HTML-Grundgerüst auszuliefern, das auch von älteren Geräten fehlerfrei interpretiert werden kann, und dieses clientseitig, mittels JavaScript um Funktionen zu erweitern. Ein prominenter Vertreter dieser Vorgehensweise ist z.B. jQuery Mobile. Bei der Verwendung von jQuery Mobile wird in erster Linie ein voll lauffähiges HTML-Grundgerüst erstellt und dieses dann, einen entsprechenden Browser vorausgesetzt, clientseitig mittels JavaScript aufgehübscht. Verlinkte Seiten werden dann etwa nicht komplett neu geladen und gerendert, sondern es werden lediglich entsprechende Seitenteile ausgetauscht. Wer sein Dokument lieber »von Hand« mit neuen Features anreichern möchte, dem sei die wunderbare Modernizr Library ans Herz gelegt.

Die Vorteile bei dieser Methode liegen darin, dass ohne einen echten Mehraufwand eine recht breite Geräteunterstützung geboten ist, da selbst alte Geräte ein entsprechendes Dokument ausliefern können (oder es zumindest können sollten). Vielleicht nicht so schön wie moderne Smartphones, aber zugänglich und vollständig oder zumindest weitgehend vollständig. Nachteil hingegen ist hier, dass die Aufbereitung der Inhalte eben auf dem Gerät passiert und es je nach Hardware-Ausstattung zu unschönen sichtbaren Verzögerungen kommen kann.

Responsive Design und CSS Media Queries

Responsive Design und Media Queries stellen eine erhebliche Verbesserung einer längst existierenden, aber nie wirklich genutzten Technik dar: die Auslieferung unterschiedlicher Style-Informationen abhängig von gewissen Eigenschaften eines Clients.

Waren Webseitenbetreiber und -Entwickler früher auf einige wenige Gerätetypen beschränkt was die Auswahl der Zielmedien betrifft (z.B. screen, print, projection, handheld, …), ist es heute dank der sogenannten »Media Queries« möglich, viel gezielter auf Charakteristika wie die Viewport-Breite oder -Höhe oder die Farbigkeit des Displays eines verwendeten Geräts einzugehen.

Dabei wird ein default-Stylesheet definiert, das bei jedem Request von jedem Browser verarbeitet wird und allgemeine Informationen wie ein Grundlayout, Farbdefinitionen, Element-Resets bzw. Normalisierung oder Angaben zu Schrifttypen enthalten kann. Zusätzlich können bspw. definiert werden:

  • ein Stylesheet für Browser sehr kleiner Geräte, deren maximale Viewport-Breite 300 Pixel nicht überschreitet
  • ein Stylesheet für mobile Geräte bis zu einer Browser Viewport-Breite zwischen 301px und 480px, welches die allermeisten aktuellen Smartphones wie das iPhone, Samsung Galaxy S2, HTC Legend und viele weitere abdeckt
  • ein Stylesheet für Geräte mit einer Auflösung zwischen 481px und 1024px, was größtenteils Tablets und Netbooks betreffen wird
  • sowie ein Stylesheet für sehr große Viewports ab 1600px Breite, bei denen bspw. auf ein Fluid-Layout umgestellt oder eine weitere Spalte eingeblendet werden könnte, um den gegebenen Platz optimal zu nutzen.
  • und ein Stylesheet, mit dem auf die besonderen Eigenschaften von Geräten mit Monochrome-Display wie z.B. dem Kindle-Reader eingegangen wird und mit dem z.B. die Farbkontraste für bessere Lesbarkeit erhöht werden.

Der Vorteil hier ist, dass sehr spezifisch auf bestimmte Browsereigenschaften eingegangen werden kann, keine große Zauberei bspw. durch JavaScript auf dem Gerät passiert und mit ein und demselben Markup eine verbesserte Usability auf einer breiten Masse von Geräten erzielt werden kann. Darüber hinaus eignen sich Media Queries auch gut als ergänzende Technologie zum Progressive Enhancement.

Einer der Vorteile kann gleichzeitig als Nachteil ausgelegt werden: es wird die gleiche Markup verwendet und somit auch in alternativen Versionen nicht verwendeter Content (also z.B. wenn dieser ausgeblendetet wurde) heruntergeladen und ausgeführt, auch wenn dies gar nicht nötig wäre. Auch die Anpassung von Bildern auf die jeweilige Display-Größe erzeugt unnötigen Overhead was Server-Requests und das übertragene Datenvolumen angeht. Dennoch sind Media Queries eine Technik, die gut geeignet ist, um relativ schnell zu einem (optisch) sehr zufriedenstellenden Ergebnis zu gelangen.

Serverseitige Adaption

Von »serverseitiger Adaption« ist die Rede, wenn die Aufbereitung der auszuliefernden Inhalte bereits auf dem Server passiert. Durch umfassende, aber in der Regel kommerzielle Gerätedatenbanken kann beim Request durch den User-Agent-Header erkannt werden, um was für ein Gerät, Browser und Betriebssystem mit welchen Fähigkeiten es sich handelt und entsprechend dieser Fähigkeiten eine maßgeschneiderte Version einer Webseite ausgeliefert werden. Ein Besucher bekommt dann von vornherein nur Inhalte an sein Gerät gesendet, mit denen das Gerät auch (vermutlich!) tatsächlich etwas anfangen kann.

Allerdings ist dieses Verfahren mitunter sehr komplex und aufwendig, sowohl was die Erstellung als auch was die Pflege angeht. Zuverlässige Gerätedatenbanken lassen sich auf Grund der Vielzahl und des hohen Releasezyklus’ neu erscheinender Geräte kaum selbst pflegen und sollten daher von kommerziellen Anbietern bezogen werden. Auch dann ist nicht immer gewährleistet, dass alle in der Gerätedatenbank vermerkten Informationen auch tatsächlich fehlerfrei sind.

Dennoch sind es gerade die großen Anbieter wie Google, Yahoo oder Facebook, die sich an dieser Technik bedienen, um zumindest eine erste grobe Richtung ermitteln zu können, ob eher eine schlichte mobile Webseite mit recht statischem Content und wenig JavaScript oder eine komplexe Web-Applikation mit umfangreichen JavaScripts ausgeliefert werden soll.

Hybrid-Lösungen

Hybrid-Lösungen scheinen hier wie in vielen Bereichen die ganzheitlichste Lösung darzustellen und sind grob gesagt ein Mix aus den drei vorangegangenen Technologien: Es wird sowohl eine serverseitige Erkennung des Clients eines Besuchers vorgenommen, diese aber durch zusätzliche clientseitige Abfragen verfeinert, um noch detaillierter auf die exakten Eigenschaften eines Geräts eingehen zu können.

Ein möglicher Anwendungsfall bei einer solchen Hybrid-Lösung könnte sein: ein Besucher betritt eine Webseite, die auf die W3C Geolocation API zugreifen möchte. Für das Gerät des Besuchers ist in der Gerätedatenbank vermerkt, dass die Unterstützung für die Geolocation API »unknown« ist. Der Server liefert nun im Sinne des »Progressive Enhancement«-Ansatzes auf Verdacht eine Seite aus, mit der clientseitig auf Vorhandensein der Geolocation API getestet wird. Existiert die Unterstützung der API im Browser, wird auf dem Client der gewünschte Code ausgeführt und der Gerätedatenbank für die aktuelle Sessions (oder gar auch für zukünftige) mitgeteilt, dass für das jeweilige Gerät Geolocation Support gegeben ist.

Derartige Hybrid-Lösungen haben sicherlich zur Folge, dass die bestmögliche User Experience gegeben ist, verursachen bei ihrer Erstellung aber natürlich auch den größten Aufwand, da Aspekte aller existierenden Ansätze dort mit einfließen.

Fazit

Das mobile Internet hat endlich einen so hohen Stellenwert in unserer Gesellschaft erreicht, dass zunehmend auch Unternehmen die Notwendigkeit eines mobilen Webauftritts erkannt haben und bereit sind, in einen solchen zu investieren. Nach wie vor bedeutet ein höherer Aufwand bei der Konzeption und Entwicklung ein besseres Ergebnis was Benutzerführung, Usability und letztendlich auch die Performance angeht.

Die technischen Möglichkeiten, um ein sehr gutes Ergebnis zu erzielen, haben sich innerhalb der letzten fünf Jahre durch den Fortschritt im Browsermarkt, aber auch durch den großen technischen Wandel der Geräte, massiv verändert. Die hohe Fragmentierung, was die unterschiedlichen Geräte, Browser, Betriebssysteme und deren jeweiligen Versionen angeht, macht es mitunter aber deutlich schwerer als am Desktop, für möglichst alle Besucher eine zufriedenstellende Präsenz zu erstellen.

Anders als vor fünf Jahren wird das mobile Internet aber inzwischen sehr rege von einem großen Teil der Bevölkerung genutzt, Tendenz stark steigend, so dass die Frage nun nicht mehr lauten sollte ob, sondern wie und mit welchen Mitteln ein mobiler Webauftritt realisiert werden sollte.

Weiterführende Links

Kommentare

Peter Müller
am 12.12.2011 - 11:50

Danke für den sehr schönen Überblick.

Die Situation im "Mobile Web" kommt mir vor wie beim "CSS Layout" ungefähr 2002: Viele verschiedene Ansätze, wenig Best Practice und immer alles in Bewegung.

Peter

Permanenter Link

Pawel
am 15.12.2011 - 21:11

Mittlerweile sind durch das Mango-Update auch bei Windows Mobile die media-queries angekommen, die Opera, Fox und Webkit Mobile schon länger beherrschen. Damit kann man Variante 3 gut mit ein bisschen Javscript "verheiraten", wie dieses Beispiel zeigt. Auch wenn sich Javascript prinzipiell auf Mobilgeräten deaktivieren lässt, ist dies noch unwahrscheinlicher als auf dem Desktop.

Für mich liegt die Herausforderung in der Gestaltung der Navigation (begrenzte Platz), der Aufbereitung von Text (vielleicht mit Teaser (ähnlich wie bei der Appbeschreibung)) und im Einsatz von Schriften. Trotz font-face gibt es gute Gründe (z.B. Bandbreite) für die Verwendung der "eingebaute" Schriften.

Serverseitige Varinaten kosten allen Nutzer einfach nur Zeit. Das ist bei gerade noch bei Opera Mini für ältere Geräte hinnehmbar.

Permanenter Link

Die Kommentare sind geschlossen.