Trends im mobilen Webdesign - Teil 1

Wir zeigen Ihnen......welche Geräte  Bedeutung haben...welche Betriebssysteme beachtet werden müssen...warum responsives Webdesign so wichtig ist...welche Standards es gibt

Kaum ein anderer Markt verändert sich derzeit so schnell wie der Markt für Mobilgeräte. Die  Größen der Branche kämpfen unaufhaltsam um die Führung - manchmal mit innovativen  Features, manchmal mit innovativen Patentklagen. Unabhängig davon, wie der Wettbewerb zwischen der Android- und der iOSPlattform ausgeht, bleibt die Dominanz von Webkit vorerst ungebrochen.

Dominanz von Webkit

Im Segment der Smartphones wird das Feld laut einer aktuellen IDC-Studie ganzdeutlich von Samsung mit einem Marktanteil von 23,8 Prozent im 1. Quartal 2012 (Android OS) und Apple  mit 18,3 Prozent im 1. Quartal 2012 (iOS) dominiert. Im Segment der Tablets gibt Apple mit  dem neuen iPad der dritten Generation ganz klar den Ton an.

Der weltweite Markt für Mobiltelefone ist laut der IDC-Studie im ersten Quartal 2012 gegenüber  dem Vorjahr eigentlich leicht gesunken. Im gleichen Zeitraum wuchs der Markt für  Smartphones um satte 45 Prozent. Während Apple mit einem Wachstum von stolzen 88 Prozent die Anzahl der verkauften iPhones innerhalb von nur 12 Monaten von 18,6 Millionen auf 35,6  Millionen fast verdoppeln konnte, legte Samsung ein Wachstum von 267 Prozent hin und stieg  damit von der weltweiten Nummer drei mit 11,5 Millionen verkauften Geräten zur Nummer eins  mit 42,2 Millionen verkauften Geräten auf. Nokia und RIM konnten das hohe Innovationstempo nicht halten und sind weiter zurückgefallen.

Der lange unangefochtene Spitzenreiter Nokia  (zwischen 2004 und 2011 Marktführer) musste im Laufe von nur 12 Monaten um 50,8 Prozent nachgeben. Ähnlich schlecht erging es RIM, dem Hersteller der einst so beliebten Blackberrys,  der einen Verlust an Marktanteilen in Höhe von 29,7 Prozent einstecken musste. Nokia und RIM  müssen sich nun mit vergleichsweise mickrigen Marktanteilen von nur noch mageren 8,2  Prozent beziehungsweise 6,7 Prozent begnügen. Für Entwickler mobiler Websites und nativer Web-Apps sind damit nur noch  zwei Plattformen von Relevanz: Android OS und iOS.

Der Markt für Tablets hat sich eindeutig in zwei Segmente aufgeteilt, die an beiden Enden der  gegenüberliegenden Seiten der Preisskala angesiedelt sind. Im oberen Preissegment führt Apple  mit den iPads 2 und 3, während im unteren Preissegment die Android-Tablets dominieren. In den  USA führt in dieser Kategorie mit Abstand Amazons Kindle Fire. Laut einer aktuellen  Studie von Comscore hat sich das Kindle Fire in den USA mit 54,4 Prozent aller verkauften Android-Tablets zum Verkaufshit entwickelt. Die Nummer zwei unter den Android-Tablets,  Samsungs Galaxy Tab-Reihe, schaffte es dagegen auf einen Marktanteil von gerade einmal 15,4  Prozent.

Diese Entwicklung entspricht dem enormen Preisdruck, dem sich Tablet-Hersteller ausgesetzt  sehen. Seinen günstigen Preis von 199 US-Dollar verdankt Amazons Kindle Fire der aktiven Quersubventionierung aus anderen Geschäftssparten des Anbieters.

Der Wettbewerb im Markt für internetfähige Mobilgeräte wird zurzeit praktisch nur zwischen  Apples iOS und Googles Android OS ausgetragen. Mit dem Erscheinen von Windows 8 in einer   mobilen Version könnte Microsoft die Karten neu mischen. Bis dahin spielt sich alles im  Hinblick auf mobiles Webdesign vorwiegend rund um Webkit ab. 

HTML5 mit CSS3 und jQuery

Sowohl Google in Android OS als auch Apple in iOS nutzen die Webkit-Rendering-Engine und  setzen dabei beide entschlossen auf HTML5. HTML5 mit CSS3 ist eindeutig die Markup- Sprache der Wahl für mobiles Webdesign.

Nachdem Adobe den Flash Player für Mobilgeräte eingestellt hatte, ist eines klar: Die Zukunft  mobiler Unterhaltung im Web gehört dem Trio aus HTML5, CSS3 und Javascript/jQuery statt  Flash. Wer bisher noch zögerte, kann beim  mobilen Webdesign seiner Kreativität nun in HTML5  mit CSS3 und jQuery freien Lauf lassen. Immer mehr Websites werden komplett von  Grund auf in HTML5 und CSS3 neu entwickelt, um aus den Innovationen, die die neuen  Standards mitbringen, Nutzen ziehen zu können. Webdesigner befolgen dabei zunehmend das  Konzept der progressiven Anreicherung mit einem klaren Schwerpunkt auf "Mobiles zuerst" (mobile first).

Entwicklung häufig zuerst für die mobile Version

Nach diesem Ansatz wird der Besucher standardmäßig erst einmal mit Daten beliefert, die für  das kleine Display eines Smartphones und die geringe Bandbreite einer gewöhnlichen  Mobilfunkanbindung optimiert sind. Gibt das Endgerät zusätzliche Fähigkeiten zu erkennen - zum  Beispiel Pixeldimensionen, die ein Tablet oder einen Desktop-Computer vermuten lassen -,  so kann der Server nahezu unbemerkt) immer noch weitere Daten nachliefern und das Layout der Website schleunigst anpassen, ohne das Gerät zu überlasten oder den Besucher zu verlieren. Durch den Mobile-first-Ansatz wird vermieden, dass sich ein Smartphone an der Übertragung einer überdimensionierten Edition der Website verschluckt, wenn es diese ohnehin nicht hätte adäquat darstellen können. Sollte dagegen beim Zugriff auf eine so optimierte Website von einem Computer aus ein Übertragungsfehler auftreten, ließe sich die Website auch in ihrer minimalistischen Edition schon gut bedienen. Um diesen Ansatz umzusetzen, können Sie zum Beispiel Response JS nutzen.

Das Konzept der progressiven Anreicherung mit dem Schwerpunkt auf Mobile first hat sowohl Befürworter als auch Gegner, doch beide Seiten sind sich einig: Ob Mobile first oder Mobile last - an responsivem Webdesign führt heute kein Weg mehr vorbei.

Medienabfragen muss intelligent erfolgen

Unter dem Begriff responsives Webdesign versteht man die Fähigkeit einer Website, relevante Eigenschaften des Endgeräts zu erkennen, das auf sie zugreift, und daraufhin ein entsprechend sinnvolles Layout bereitzustellen. Dadurch kann eine Website mit allen Endgeräten kompatibel sein, ohne die verfügbaren Funktionen unnötig zu beschneiden.

Die Erkennung der Eigenschaften eines Endgeräts erfolgt im responsiven Webdesign typischerweise unter Verwendung der so genannten Medienabfragen (Media Queries).

In CSS2.x ließe sich einem bestimmten Medientyp ein eigenes Stylesheet zuweisen (beispielsweise screen oder print). In CSS3 besteht die Möglichkeit, mit Hilfe der Media Queries bestimmte Eigenschaften des Zielgeräts in Erfahrung zu bringen, um es mit einem für ebendieses Gerät optimierten Stylesheet zu beliefern.

So können Sie etwa für verschiedene Breiten des Displays unterschiedliche Stylesheets bereithalten und das jeweils passende dynamisch bereitstellen. Dadurch können Sie dieselben Inhalte in verschiedenen Layouts präsentieren, die sich sogar bei Bedarf an geänderte Eigenschaften des Zielgeräts zur Laufzeit anpassen. Bedingungen für das Anwenden von Stylesheets lassen sich entweder in HTML

oder direkt in dem betreffenden CSS-Stylesheet definieren, zum Beispiel mit

oder mit

Mittels max-device-width ermitteln Sie die Gesamtbreite des Displays ermitteln. Mittels max-width können Sie die maximale Gesamtbreite des tatsächlich verfügbaren Browserfensters in Erfahrung bringen, in dem die Website gerendert wird (also ohne UI-Elemente wie die URL-Adressleiste oder Browserschaltflächen).

Smartphones und Tablets imitieren beim Zugriff auf eine Website standardmäßig einen Desktop-Browser und zeigen die Desktop-Version des Dokumentes in einer entsprechend geringeren Zoomstufe an. Medienabfragen versagen generell aus ebendiesem Grunde.

Damit die Medienabfragen in mobilen Geräten funktionieren, gilt es, der Website noch das benötigte <meta>-Tag hinzuzufügen:

Oder optional unter Angabe der gewünschten Vergrößerungsstufe:

Mit diesem <meta>-Tag setzen Sie die viewport-Eigenschaft auf den gewünschten Wert, nämlich auf die tatsächliche Breite des Displays (anstelle der standardmäßig voreingestellten Desktop-Emulation).

Medienabfragen in CSS3 erlauben es Ihnen, anhand der Auflösung und/oder der Ausrichtung des Displays (iPad, iPhone) ein für das betreffende Gerät optimiertes Stylesheet zu liefern und bei Bedarf sogar die dargestellten Inhalte zu differenzieren.

Der geschickte Einsatz von CSS-Medienabfragen stellt eine wichtige, aber nicht die einzige Voraussetzung für responsives Webdesign dar. Das Layout der Website muss die Realitäten mobiler Internetnutzung reflektieren.