Mobiles und responsives Webdesign

Die Zuwachsraten mobiler Endgeräte sind enorm, ebenso deren Zugriffe auf Internetseiten. Wer im öffentlichen Nahverkehr das Heer der auf kleine Bildschirme starrenden Menschen sieht, wird sich nicht wundern, dass der Anteil mobiler Endgeräte am Besucheraufkommen vieler Webseiten stark gestiegen ist und kontinuierlich weiter steigt.

Es ist deshalb logisch, dass wir uns endlich der lange bekannten Tatsache öffnen, dass das Web sich nicht in einer festen Bildschirmbreite abbilden lässt. Webseiten sind von sich aus flexibel und passen sich ihrer Umgebung an. Das ist ihre Stärke.

Wir haben diese Stärke allerdings in den letzen Jahren mehrheitlich ignoriert. Denn schließlich ist es mit den verwendeten Tools einfacher, ein Layout auf eine fixe Breite zu konzipieren. Die aktuelle Vielfalt an Endgeräten für den Internetkonsum macht es uns allerdings unmöglich, diese Illusion weiter aufrecht zu erhalten.

Unter dem Ansatz »responsives Webdesign« werden aktuell Techniken diskutiert, die eine flexible Anpassung einer Webseite auf verschiedene Ausgabemedien ermöglichen. Die Herausforderungen können dabei im Detail beträchtlich sein. Es gibt auch nicht immer eine einfache oder überhaupt eine sinnvolle Lösung. 

Es ist ein Prozess

Wir befinden uns in einem kontinuierlichen Lernprozess, der immer wieder Verbesserungen an unseren Produkten ermöglicht. Dieser Lernprozess ist für alle Beteiligten wichtig. Kunden müssen verstehen, dass es einen fundamentalen Unterschied zwischen dem Web und klassischen Medien gibt. Dienstleister müssen dies teilweise auch noch verstehen. Sie müssen allerdings oft noch lernen, diese Wahrheit ihren Kunden überzeugend zu vermitteln.

Die Markteinführung des iPhone im Jahr 2007 markiert einen fundamentalen Wendepunkt für die Webentwicklung. Eine völlig neue Gerätekategorie entstand. Diese neuartigen Smartphones machten den Internetzugriff unabhängig von Schreibtischen. Hohe Zugriffszahlen belegen den Erfolg des Konzeptes.

Die Internetindustrie wurde von diesen Geräten und den ab 2010 durch das iPad sich etablierenden Tablet-PCs kalt erwischt. Hatten sich doch die meisten damit abgefunden, für ein fiktives Idealgerät zu entwickeln. Der mittlerweile eingesetzte Innovationskampf mit immer neuen Geräten, Gerätegrößen, Auflösungen und Betriebssystemen widersprach der Vorstellung von fixen Webseiten mit 980er Grids.

Notwendige technische Innovationen werden langsam auf den Weg gebracht. Das Web, wie wir es gewohnt sind, basiert auf Techniken, die den aktuellen Herausforderungen nur ungenügend begegnen können. Deshalb sind wir leider nicht in der Lage, unsere Angebote perfekt auf die sich verändernde Lage anzupassen. In vielen Details, speziell in der Auslieferung passender Bilder und Videos, werden wir noch viele Jahre warten müssen, bis wir die optimalen Techniken für die aktuellen Herausforderungen zur Verfügung haben.

Fortdauernder Selbstbetrug

Seit der kommerziellen Eroberung des Internet haben wir uns meist selber vorgemacht, wir könnten voraussehen, wie jemand unsere Webseiten konsumiert. Dabei haben wir das Web seiner inhärenten Flexibilität beraubt. Wir müssten nun lernen, loszulassen und die Flexibilität als die Stärke des Netzes zu begreifen. Doch offenbar ist dieser Kontrollverlust für viele Beteiligte ein Gräuel. Wie sonst ist es erklärbar, dass wir nun mit standardisierten Media Queries konfrontiert werden und ein sagenumwobener mobiler Kontext uns glasklar eine Vorhersage von Nutzerverhalten ermöglicht?

Wir sollten aus der rapiden Verbreitung von Smartphones und Tablet-PCs die Lehre ziehen, dass wir eben keine Planungssicherheit besitzen. Gedankenlesen hat schon in früheren Jahren nicht funktioniert, warum sollte es nun besser werden, wo die technische Landschaft viel komplexer und unübersichtlicher geworden ist?

Auch bei der Modernität der Endgeräte müssen wir vorsichtig sein. Die Annahme, dass die Nutzer immer das neueste Endgerät besitzen und den neuesten und besten Browser nutzen, ist bestenfalls als Wunschdenken zu klassifizieren.

Nur wenige leisten sich jährlich ein neues Smartphone und nur die wenigsten Smartphones bekommen ein Betriebssystem-Update. Bei Apple-Geräten ist es bislang noch üblich, dass auch ältere Geräte eine neue Betriebssystemversion bekommen. Dies ändert sich nun. Bei Android-Geräten ist es eine Ausnahme, wenn ein Smartphone jemals ein Update bekommt. Und obwohl es unter Android eine große Browserauswahl gibt, so nutzen doch die meisten Anwender den Standardbrowser. Dieser ist in den alten Android-Versionen bestenfalls mittelmäßig zu nennen.

Wir sollten mittlerweile eine wichtige Lehre aus den unterschiedlichen Wendungen der technischen Entwicklung rund ums Internet gezogen haben: Annahmen haben die große Chance, zu scheitern. Deshalb sind flexibles Denken und flexible Entwicklung angebracht.

Der mobile Kontext

Bei der Diskussion um Webentwicklung für Smartphones geraten wir schnell in Begriffsverwirrungen. Meist wird von mobilen Webseiten gesprochen oder von Mobilversionen. Schließlich handelt es sich um mobile Endgeräte.

Dabei stellen wir uns einen typischen mobilen Kontext vor. Also den Zugriff auf Webseiten in öffentlichen Verkehrsmitteln oder auf dem Bürgersteig. Der mobile Kontext ist dabei von einer kurzen Aufmerksamkeitsspanne und potentiell schlechter Netzverbindung gekennzeichnet. Die Bedienung konzentriert sich auf eine Hand, am Ende auf einen Daumen. Doch haben wir es immer mit diesem ominösen Kontext zu tun? Der Nutzer eines mobilen Endgerätes kann sich schließlich auch dafür entscheiden, es nicht mobil zu nutzen. Mit stationären Rechnern ist dies umgekehrt nicht möglich.

Google hat in einer umfangreichen Studie herausgefunden, dass viele Suchen beim Einkaufen passieren. Sie können genauso Hintergrundrecherche wie Preisvergleich sein.

Allerdings zeigt die Studie im Einklang mit anderen Untersuchungen auch, dass die meisten Zugriffe über das Smartphone vom Arbeitsplatz oder von zuhause stattfinden. Dort stehen meist eine schnelle und stabile Internetverbindung zur Verfügung und die eigene Aufmerksamkeit kann ungefährdet dem Surfen gewidmet werden.

Wenn wir von einem mobilen Kontext ausgehen, machen wir also einen ähnlichen Fehler, wie wir ihn die letzten Jahre gemacht haben, wenn wir von einer idealen Bildschirmauflösung ausgingen.

Wenn wir unsere Seiten für mobile Endgeräte anpassen, sollten wir also nicht von einem gedachten Kontext ausgehen. Wir sollten uns auf die Umgebungsvariablen konzentrieren, die wir gefahrlos identifizieren können: Bildschirmbreite, technische Fähigkeiten und Eingabeform.

Bildschirmbreite

Die Hersteller mobiler Endgeräte möchten den Eindruck vermeiden, ihre Produkte seien gegenüber Desktop-Rechnern minderwertig. So spendieren sie ihren Geräten Bildschirme, die für Internetbrowser eine größere Auflösung simulieren, als die Geräte tatsächlich haben. So passen Webseiten mit einem 980px breiten Design problemlos in einen 320px breiten Bildschirm. Die Diskrepanz zwischen virtuellen und realen Pixeln kann man mit einfachen Mitteln überbrücken. Ein einfacher Meta-Tag hilft dabei:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Durch diese Zeile HTML gaukelt der Browser keine größere Breite mehr vor. Man kann nun mittels Media-Queries unterschiedlichen Breiten die passenden CSS-Regeln mitgeben, damit sich die Inhalte lesbar an die Breiten anpassen können. 

Technische Fähigkeiten

Mobile Endgeräte haben von Desktoprechnern abweichende Fähigkeiten. Die augenfälligsten dürften neben den kleinen Bildschirmen das Fehlen einer Maus und einer großen Tastatur sein. Die Tastatur wird auf dem (kleinen) Bildschirm emuliert, die Maus wird durch den Finger ersetzt.

Eingabeform

Mobile Endgeräte (also Smartphones und Tablets) kennen keine Maus. Wir haben nur die Finger als Eingabemethode. Finger sind weitaus größer als eine Maus. Die berührungssensitive Fläche muss sich dem anpassen. Glücklicherweise greifen uns die Hersteller der Geräte unter die Arme. Wenn wir zwei nah beieinanderliegende Links anklicken, werden diese vergrößert, sodass wir unsere Wahl sicher treffen können. Die Trefferfläche eines Links sollte nach gängiger Meinung um die 44px liegen.

Neben der größeren Trefferfläche stehen uns mit dem Finger sehr spezielle Events zur Verfügung. Das allseits beliebte »hover« mit der Maus gibt es nicht. Es wird von den mobilen Betriebssystemen mehr oder minder erfolgreich simuliert. Der »Touchevent« hingegen kann mit einer Maus genauso wenig simuliert werden, wie das »pinchen« und »zoomen«, als das Zusammen- und Auseinanderfahren von Daumen und Zeigefinger für Vergrößerung und Verkleinerung.

Viele interaktive Elemente auf Webseiten und noch viel mehr Navigationen bauen auf dem »hover«-Event auf. Es kann sehr gut passieren, dass solche Seitenelemente auf mobilen Endgeräten gar nicht oder nur eingeschränkt nutzbar sind.

Mobile first

Uns stehen viele Techniken zur Verfügung, um die Inhalte einer Webseite sowohl auf große, als auch auf kleine Bildschirme auszuliefern. Doch nicht immer möchte oder kann man alle Inhalte einer Seite auf einem Smartphone präsentieren. Eine Bildergalerie, die nur wirkt, wenn die Bilder richtig groß und am Besten in einer Lightbox präsentiert werden, ist auf einem Smartphone deplatziert. Bannerwerbung passt sich meist nicht an die Bildschirmbreite an, oder aber die Vermarkter wollen für Werbung auf Smartphones nichts zahlen.

Die Gründe sind vielfältig, warum eine Seite auf einem Smartphone nicht den identischen Inhalt der »großen« Desktopversion anbieten soll. Wenn die Seite traditionell für den Desktop entworfen und entwickelt wurde, können wir für kleine Bildschirme nur ungewünschte Inhalte ausblenden. Das Ausblenden verhindert allerdings nicht, dass der Inhalt geladen wird.

Deshalb schlägt der Amerikaner Luke Wroblewski eine andere Vorgehensweise bei der Planung und Entwicklung von Webseiten vor. Er nennt sie »mobile first«. Sein Ansatz ist, bei Planung, Design und Entwicklung vom kleinen Bildschirm auszugehen und sich dann quasi von unten nach oben zu arbeiten.

In einem ersten Schritt zwingt dieses Vorgehen dazu, sich über die elementaren Inhalte eines Angebots klar zu werden. Kunde und Agentur sollen die Kerninhalte einer Site festlegen. Es hindert sie danach niemand daran, darüber nachzudenken, ob dieses inhaltliche Setting nicht generell für alle Bildschirmbreiten sinnvoll ist, nicht nur für kleine Bildschirme.

In einem zweiten Schritt werden dann alle zur Verfügung stehenden Techniken genutzt, um die Inhalte für breitere Bildschirme aufzufrischen. Inhaltscontainer, Werbung, Bildergalerien u.ä. werden mittels AJAX der initial geladenen, übersichtlichen Seite hinzugefügt.

Die Nutzung von JavaScript in solchen Situationen sollte generell ihren Schrecken verloren haben. Wir wissen schon länger, dass man AJAX barrierefrei und unaufdringlich schreiben kann.

Durch dieses neuartige Vorgehen bekommen die Nutzer die jeweils für ihre Bildschirmbreite passenden Inhalte ausgeliefert. Gleichzeitig existiert ein Fallback, das die wichtigsten Inhalte bereithält, also auch für diejenigen, die JavaScript ausgeschaltet haben.

Die eigentliche Herausforderung ist dabei nicht die technische Umsetzung. Die eigentliche Herausforderung ist das Umdenken aller Beteiligten. Im Zentrum der Überlegungen stehen auf einmal nicht mehr glänzende Startseiten und üppige Browserbreiten. Im Fokus stehen auf einmal Inhalte und Prioritäten.