Responsive Design – Oder warum Adaptive Design nicht genügt

Bereits vor einigen Jahren habe ich das erste Mal von Responsive Design gehört. Leider ist diesbezüglich bis heute nicht viel passiert. Ich finde immer noch viel zu häufig Webseiten, welche auf mobilen Geräten alles andere als benutzerfreundlich sind.

Wissen Sie, wie viele Kunden Ihre Firmen-Webseite mit einem mobilen Gerät aufrufen? Generell kommen 2016 über 50% Webseiten-Zugriffe von mobilen Geräten. Höchste Zeit zu wissen, was Responsive Design ist. Deshalb hier einige konkrete Beispiele für Benutzerunfreundlichkeit: Die Desktop Variante der Webseite wird 1:1 auf dem Handydisplay angezeigt. So muss man mühsam zoomen und treffsicher sein, um ans Ziel zu kommen. Oder die Webseite enthält Flash, was auf vielen Smartphones und Tablets gar nicht erst funktioniert.

Nicht-Responsive vs. Adaptive vs. Responsive Design

Bevor wir uns auf Responsive Design konzentrieren, möchte ich Ihnen die Unterschiede der drei möglichen Webdesigns aufzeigen.

Nicht-Responsive-Webseite

Wird beim Aufruf der Webseite weder das Gerät, noch die Auflösung geprüft, um dann das entsprechende Layout anzuzeigen, gibt es nur eine „Desktop-Version“. Mühsames Zoomen ist nötig, um etwas zu lesen und Menüpunkte klicken zu können.

Adaptive Design

Ist Adaptive Webdesign im Einsatz, muss für jedes Gerät jeweils ein separates Template erstellt werden. Änderungen oder zusätzliche Informationen müssen somit in mehreren Templates vorgenommen werden. Dies ist erhöhter Aufwand und es kann leicht passieren, dass nicht jede Änderung in allen Templates vorgenommen wird.

Responsive Design

Wortwörtlich übersetzt heisst das: reaktionsfähige Gestaltung. Je nach Gerät, Auflösung und ob Quer- (Landscape) oder Hochformat-Anzeige (Portrait) wird das Layout entsprechend angepasst. So wird beispielsweise aus einer dreispaltigen Ansicht auf dem Desktop, auf dem Smartphone eine Spalte, wo alle Informationen untereinander dargestellt sind. Bilder und Text werden verkleinert und mehrere Menüpunkte kommen in einem sogenannten Hamburgermenü (oben rechts im Bild) unter.
Bei neuen Geräten auf dem Markt, müssen höchstens neue Breakpoints erfasst werden – dazu später mehr. Ausserdem ist auch die „Absprungrate“ (bounce rate) bei dieser Art von Webseiten geringer, da die Bedienung auf allen möglichen Geräten sehr benutzerfreundlich ist. Die Infografik von Hadorn AG zeigt das gut auf.

Breakpoints sind das A und O bei einem Responsive Design

Erscheint ein neues Gerät mit anderer Bildschirmgrösse und/oder –auflösung auf dem Markt, muss bei Responsive Design höchstens ein neuer Breakpoint gesetzt werden. Breakpoints sind sogenannte „Sollbruchstellen“ wo Pixelangaben definieren, wann sich ein Seitenlayout ändert und zum Beispiel aus drei Spalten (Desktop) nur noch zwei (Tablet) werden.

Auch Google belohnt Sie

Wird eine Seite dem verwendeten Gerät angepasst, freut das den Benutzer. Neben der Benutzerfreundlichkeit spielt für die Entscheidung zu Responsive Design auch SEO (search engine optimization) eine grosse Rolle. Google bewertet Seiten, welche für das verwendete Gerät angepasst sind, höher als andere. Hier finden Sie Googles Gründe, welche für Responsive Design sprechen.

Die Kehrseite von Responsive Webdesign

Ein Nachteil von Responsive Webdesign sind die etwa 30-40% höheren Kosten (gemäss „onlinemarketing praxis„). Dies, weil die Entwicklung zeitaufwändiger ist als bei einem Adaptive Design. Einerseits durch die Konzeptphase mit mehreren Designs und Breakpoints, andererseits auch durch das Testing auf verschiedenen Endgeräten.

Mobile ≠ Desktop

Wenn wir schon beim Thema Responsive Design sind, möchte ich auch noch auf die unterschiedlichen Funktionen von Mobile- vs. Desktop anschauen. Nicht jede Funktion eines Desktop-Designs ist auch auf einem Smartphone oder Tablet möglich.

Auf Mobile nicht möglich

• Mouseover-Effekt – beliebt in der Navigation
• Doppelklick vom Desktop. Stattdessen gibt es double tap oder long press (Beispiel bei Android), welche jedoch oft anders (bspw. Zoomen) eingesetzt werden.

Auf dem Desktop nicht möglich

• Click-to-call-feature: Klick auf Telefonnummer und der Anruf wird gestartet
• Zugriff auf die Kamera

Um sicher zu stellen, dass die Webseite auf Desktop wie auch Mobile wie gewünscht funktioniert, ist ein guter Usability-Test unumgänglich.

Desktop war früher, jetzt heisst es: Mobile First!

Durch Responsive Design entwickelte sich in der letzten Zeit auch das sogenannte Mobile First. Um sich bei der Webseitenentwicklung auf das Wesentliche zu konzentrieren und im zweiten Schritt mit zusätzlichen Features für den Desktop aufzutrumpfen, heisst es heute vielfach: Mobile First! Wird eine Webseite entwickelt, startet man mit dem kleinstmöglichen Layout für das Smartphone und skaliert dieses hoch.

So hat sich zum Beispiel das Hamburger-Menü auch in Desktop-Varianten von Webseiten eingeschlichen. Auf dem grossen Display hätte man jedoch Platz für ein vollständig angezeigtes Menü und der Kund käme schneller ans Ziel. Ein Grund für die Mobile-Designübernahme auf Desktop ist sicher die Kostenersparnis beim Design. Aber auch die Wiedererkennbarkeit der Seite auf verschiedenen Gerätetypen und ein gewisses modernes Flair der mobilen Designelemente sind wahrscheinlich mitverantwortlich.

Testen: das gilt es zu beachten

Unabhängig vom gewählten Webdesign ist natürlich das Testen der Webseite nicht zu vergessen. Folgende Schritte gilt es auf Smartphones, Tablets und Desktops verschiedener Grössen und Herstellern zu beachten:

• Schriftart, -grösse und –farbe sind auf allen Geräten dieselben
• Text ist auf allen Geräten gut leserlich
• Padding-Eigenschaften sind nicht zu breit und nicht zu schmal sondern auf jedem Gerät optimal
• Egal auf welchem Gerät und ob Landschaft- oder Portrait-Modus sind alle Texte und Bilder vollständig ersichtlich
• Popup-Meldungen überdecken nicht die komplette Seite oder können mindestens geschlossen werden
• Tabellen werden komplett und nicht abgeschnitten dargestellt

Fazit

Ob Sie sich nun für Mobile First entscheiden oder nicht, ist die Webseite responsive,

• ist der Kunde kontakt- und kauffreudiger.
• sinkt die Absprungrate (bounce rate).
• listet Google Ihre Seite in den Ergebnissen höher auf.
• brauchen Änderungen nur an einer Stelle im CMS angepasst zu werden.

Wollen Sie Ihre Webseite auf Usability getestet haben?

Melden Sie sich bei uns.