Muss Web Design wirklich responsive sein?

Hast du dir eigentlich schon einmal darüber Gedanken gemacht, von welchen Geräten aus deine Webseite am meisten besucht wird? Wenn nein, wird es jetzt höchste Zeit und ich sage dir gleich warum.

Einige wichtige Fragen, die man sich als Betreiber oder Besitzer einer Webseite, eines Blogs, Webshops oder sonstigen Online Plattform unbedingt stellen sollte sind folgende: Wie groß ist das Display auf dem meine Inhalte konsumiert werden? Welches Format hat der Bildschirm meiner Seitenbesucher? Wie gut ist die Verbindung zum Internet von deren aktuellem Standort?

Vor einigen Jahren könnte man diese Fragen noch viel leichter beantworten. Die Unterschiede der Displaygrößen und Formen der Endgeräte, die zum Surfen im Netz verwendet wurden, war um ein vielfaches homogener. Man konnte mit großer Sicherheit sagen, dass es sich dabei um Desktop PCs handelte. Folglich wurden Webseiten so gestaltet, dass sie genau den Ausmaßen und Möglichkeiten von Desktop PCs genügten. Mit solchen Designs konnten die Bedürfnisse der meisten Besucher abgedeckt werden und daher standen die Nutzungstatistiken in keinem engen Zusammenhang mit der Basisgröße des Layouts.

Mit dem Aufkommen von Smartphones und sonstigen technischen Wunderwerken, welche ihren Besitzern zum Zustand der permanenten Vernetzung verhelfen, änderte sich das natürlich schlagartig. Man setzte sich nicht mehr nur an den PC am Schreibtisch um zu Surfen, sondern konnte das jederzeit und an jedem möglichen (oder unmöglichen) Ort tun. Einige interessante Statistiken und Fakten über das Nutzungsverhalten solcher Technologien kann man hier nachlesen. Zum Beispiel greifen mehr als 50% aller Smartphone Besitzer kurz nach dem Aufwachen sofort zu ihrem Gerät um zu Twittern, auf Facebook zu stöbern oder die neusten News zu lesen.

Mobile-stats-vs-desktop-users-global-550x405

Im Jahr 2014 war es dann soweit, der Anteil des Datentransfers, welcher von mobilen Geräten getätigt wurde überholte jenen von Desktop PCs. Der Anteil an Internet-Nutzern, welche ein Smartphone besitzen und dieses auch zum Surfen verwenden ist bereits auf mehr als 80% gestiegen (hier nachzulesen).

Das alles ist bei weitem Grund genug sich mehr mit der Zielgruppe seiner Webseite und den verwendeten Endgeräten zu befassen. Logischerweise umfasst die Zielgruppe nun eben mehr oder weniger einen Großteil aller Internetnutzer, auch jene, die hauptsächlich ihr Smartphone dafür nutzen. Will man nicht einen beträchtlichen Anteil an Traffic und somit Nutzer oder Kunden verlieren, nur weil sich Seitenbesucher auf der eigenen Seite nicht zurechtfinden, so sollte man auch das Verhalten und Erscheinungsbild seiner Online-Präsenz auf das jeweilig verwendete Gerät automatisch anpassen. Insbesondere bei e-commerce Anwendungen hängt der Traffic unmittelbar mit dem Umsatz zusammen.

responsive

Diesen Lösungsansatz nennt man “Responsive Design”. Die Idee dahinter ist, dass beim Seitenaufruf immer auf das jeweilige Endgerät und dessen Eigenschaften Rücksicht genommen wird. Daher auch der Name (responsive = reagieren, auf etwas eingehen). Es wird quasi durch Optimieren von Layout, Verhalten und Erscheinungsbild auf die Bedürfnisse des Benutzer in seiner aktuellen Situation reagiert.

In der Theorie hört sich das ja gut an, jetzt stellt sich natürlich noch die Frage, wie man dieses Konzept am besten in die Praxis umsetzt. Hier gibt es wiederum mehrere Ansätze. Zum einen kann man damit beginnen, die Webseite zuerst nur für mobile Geräte zu entwerfen und danach zusätzliche Funktionen und Designelemente je nach Displaygröße hinzufügen. Diese Methode nennt sich “mobile first” und konzentriert sich, wie der Name schon sagt, vorwiegend auf mobile Geräte. Sollte jedoch auch ein Desktop PC auf die Inhalte zugreifen, so werden hier ein paar zusätzliche Sachen eingebaut, welche aber nicht unbedingt für den Anwendungsfall der Webseite benötigt werden, implementiert quasi als “nice to have”. Andersrum, also zuerst Fokus auf den Desktop und danach Reduktion von sekundären Elementen ist ebenfalls eine Lösung. Des weiteren sollte man sich von dem Gedanken verabschieden, dass die Webseite auf jedem Gerät und somit für jeden Benutzer haargenau gleich aussieht. Wichtig ist eher, dass der Inhalt unabhängig vom benutzten Endgerät, bestmöglich aufbereitet und konsumierbar ist.

Am besten kann man Responsive Design anhand eines Beispiels diskutieren. Die Seite http://mediaqueri.es/ hat es sich zur Aufgabe gemacht, praktische Anwendungsfälle von gutem Responsive Design (hier mit Hilfe von media queries) zu sammeln und Screenshots der gleichen Seite aber von jeweils unterschiedlichen Displaygrößen zu präsentieren.

mediaqueries

www.mediaqueri.es

Typische Elemente von Responsive Design sind eine Dropdown oder Off-Canvas Navigation und flexible Grid Systeme, sowie flexible Bilder. Prinzipiell sind alle diese Elemente so angelegt, dass nie eine fixe Größe besitzen, sondern sich immer an die gegebenen Maße anpassen. Bei Grid Systemen sieht das folgendermaßen aus, je nach Bildschrimbreite werden eine unterschiedliche Anzahl an Spalten dargestellt. Reicht die aktuelle Breite nicht mehr aus um alle Inhalte optimal anzuzeigen, so wird Beispielsweiße das Layout von 4 Spalten auf 2 Spalten reduziert. Ähnliches gilt für die Navigation. Bei großen Bildschirmen erstreckt sich diese meist über die gesamte Breite, ohne dabei an Übersicht zu verlieren. Um die Übersichtlichkeit auch bei kleineren Display beizubehalten, kann man entweder das Menü am oberen Rand des Layouts positionieren und die einzelnen Menüpunkte als Dropdown sichtbar machen oder bei Klick auf den Menübutton seitlich einblenden (Off-Canvas Navigation). Ein Beispiel für ein Dropdown Menü kann man hier finden und für Off-Canvas Navigation hier.  Am besten ist man probiert diese Beispiele in Unterschiedlichen Fenstergrößen aus, dann kann man das responsive Verhalten sehr gut beobachten!

Wir von CodeFlügel sind große Fans von solchen innovativen Ideen und versuchen für jedes unserer Webprojekte den Konzepten von responsive Design zu folgen. Auch sind wir gerne bereit Unterstützung beim der Umstellung von statischen auf resposive Layout anzubieten. Es ist uns wichtig, dass Web und dessen Möglichkeiten voranzutreiben und dabei eine Vorreiterrolle zu spielen.

Weiterführende Links zum Thema: