von Gmo Mobile First! Responsive Web­design statt Insel­lösungen

Zwei Wege zum (mobilen) Glück

Die erste Möglichkeit, die eigene Website an die Besonderheiten von mobilen Endgeräten anzupassen, ist eine zusätzliche „mobile“ Variante neben der Desktop-Version. Hier werden die Seitenstruktur, der inhaltliche Aufbau und vor allem die Inhalte selbst (Bilder, Videos, Texte) gesondert für mobile Endgeräte vorbereitet. Wenn dann ein Nutzer mit einem Smartphone oder Tablet die Seite aufruft, soll der Server automatisch erkennen, dass es sich um ein mobiles Gerät handelt und automatisch auf die mobile Variante weiterleiten.

Das Problem: die extreme Fragmentierung der Android-Geräte-Welt, die immerhin über 80% des Smartphone-Markts ausmachen. Schon 2015 (!) stellte OpenSignal aktuelle Zahlen vor, nach denen sie über 24.000 verschiedene Gerätetypen identifiziert haben, die ihre App heruntergeladen haben.

Gegenüber 2013 war das eine Verdopplung und diese unfassbare Masse an verschiedensten Geräten wird in den letzten drei Jahren eher noch weiter angewachsen sein.

Die Folge: Sie müssen immer zwei Designs pflegen und aktualisieren – eine Situation, die Fehler provoziert und extrem zeitaufwändig sein kann.

Die responsive Website

Möglichkeit Nummer zwei ist, schon beim Design der Website anders vorzugehen und nicht auf verschiedene Gerätetypen hin zu gestalten. Wenn tatsächlich so viele Menschen Websites auch auf mobilen Endgeräten besuchen und diese Geräte in so unterschiedlichen Größen und Varianten daherkommen, ist es unmöglich, jeden Sonderfall mitzudenken (was passiert zum Beispiel auf Phablets, großen Smartphones mit hoher Auflösung oder auf kleinen Tablets mit „nur“ 9-Zoll-Displays?).

Stattdessen sollte die Gestaltung so angelegt sein, dass das Verhalten von Elementen auf einer Website sich an den jeweils verfügbaren Platz anpasst. Dann kann man bestimmen, dass sich etwa Bild- und Textelemente, die in einem Desktop-Browser im Vollbild-Modus nebeneinander oder überlagernd dargestellt werden, bei weniger verfügbarem Platz – etwa auf einem 5-Zoll-Bildschrim – untereinander gestapelt werden. Möglich wird das mit den heute standardmäßigen Funktionalitäten aktueller Browser, die unter anderem auf den Webstandards HTML5 und CSS3 basieren.

Der große Vorteil für Seitenbetreiber: Sie pflegen eine einzige Website, das Design ist identisch und die technische Umsetzung ist unaufwändiger, weil weniger Ausnahmefälle betrachtet und gepflegt werden müssen. Außerdem machen Sie sich unabhängig von neuen Displaygrößen, Endgeräten und der ewigen Frage nach dem richtigen Inhalt für die jeweilige Gerätekategorie.

Mobile First wird zum Standard

Seit dem Frühjahr 2018 rollt Google den so genannten „Mobile First Index“ aus, der dafür sorgt, dass bei der Bewertung einer Website zuerst die mobile Ansicht betrachtet wird. Weil die Mehrzahl der Internetnutzer mittlerweile eben mobil ist, reagiert Google damit auf die veränderte Mediennutzung und belohnt damit solche Seiten, die besonders gut auf mobile Endgeräte hin gestaltet und entwickelt sind. Mit Responsive Webdesign sind Sie auf diesen „Mobile First“-Ansatz schon vorbereitet.

Die große Lehre aus dieser Entwicklung ist: Websites werden für Menschen entwickelt und entlang ihres Nutzungsverhaltens. Und das führt in der Konzeption, Gestaltung und Entwicklung dazu, dass wir uns zuerst damit beschäftigen sollten, wie eine Seite auf einem mobilen Endgerät aussieht, wie sie sich verhält und was sinnvolle Anwendungen sind.

Im nächsten Schritt können auch Entwicklungen wie Progressive Web Apps (PWAs) für Websites umgesetzt werden – dank Responsive Webdesign kein großer Schritt. PWAs sind kurz gesagt Webseiten, die sich verhalten und aussehen, wie nativ auf einem Gerät installierte Apps. Sie bieten das Beste aus zwei Welten: sie sind schnell und „erinnern“ sich an den Nutzer, wie eine App, sind aber auch ressourcenschonend und Geräte-unabhängig wie Websites. Mehr über PWAs erfahren Sie in unserem Artikel zu Progressive Web Apps.

Testen Sie Ihre Seite

Wenn Sie herausfinden möchten, wie gut Sie für die „Mobile First“-Welt vorbereitet sind, machen Sie doch einmal den Test: unter https://search.google.com/test/mobile-friendly können Sie Google Ihre Seite auf ihre Performance auf mobilen Geräten testen lassen. Wir helfen Ihnen bei der Beseitigung der Baustellen, die dabei zutage kommen, gerne weiter!

Zurück

Wie können wir helfen?

Internet Explorer? Ernsthaft? Aufgrund Ihres Browsers sehen Sie hier nichts! Spätestens seitdem Microsoft selbst vor der Nutzung des Internet Explorers warnt, haben wir uns entschlossen diese Webseite nicht für eine "Kompatibilitätslösung für ältere HTML-Anwendungen" (Zitat Microsoft) zu optimieren.

Wer mehr wissen will findet hier mehr Infos, oder Sie laden sich einfach einen echten Browser herunter (einfach auf die Icons klicken) und genießt die Möglichkeiten des Internets im Jahr 2019.