Responsive Design - einfach erklärt

Leander Theiß

Was bedeutet Responsive Design? Unter Responsive Design versteht man die Anpassung des Layouts einer Webseite an die entsprechenden Abmessungen eines Endgerätes (Smartphones, Tablets etc.). Somit wird eine Webseite auf Desktop, Tablets und Smartphones benutzerfreundlich und optimiert dargestellt.

Warum sollte ich Responsive Design einsetzen?

Die Zukunft liegt in tragbaren Geräten wie Smartphones und Tablets. Bereits heute werden mehr Suchabfragen auf Google über mobile Endgeräte gestellt als über einen Desktop-PC! 
Erfahrungsgemäß werden Transaktionen (Buchungen, Käufe & Anfragen) oft mobile recherchiert und dann am PC finalisiert. Heißt, wer in dieser Phase der Entscheidungsfindung keine optimale Präsenz auf mobilen Endgeräten hat fällt bereits durch das Raster!

Was sind die Kriterien für eine „mobile-friendly“ Webseite?

Vermeiden Sie Anwendungen wie Flash, welche auf Mobilgeräten nicht funktionieren. Des Weiteren sollte die zu übertragende Datenmenge möglichst klein sein, damit Ihre Seite geringe Ladezeiten hat. Links, Bilder, Texte und sonstige Elemente (Telefonhörer oder Mailbutton) Ihrer Webseite sollten für den Benutzer einfach verständlich und bedienbar sein. Dies heißt z.B., dass Links eine genügend große Fläche zum Anklicken bieten. Da der User auf den Smartphone in der Regel wenig Zeit hat, sollten die Inhalte eher kurz und knapp gehalten werden. Auch die Navigation kann sich durchaus von der auf dem PC unterscheiden. Passen Sie daher das Menü dem Endgerät an. So kann Team oder Wegbeschreibung durchaus einer den wichtigsten Menüpunte auf dem Handy sein, da diese Nutzer oft nach Ansprechpartnern und Anfahrtsbeschreibungen suchen.

Wo kann man testen, ob meine Webseite „mobile-friendly“ ist?

Google bietet die Möglichkeit über den „Leitfaden für Mobilgeräte“ (google.de/webmasters/tools/mobile-friendly) seine Webseite auf Ihre Mobilfähigkeit zu testen. Der Test zeigt Fehler und Optimierungshinweise an. Auch zum Thema Benutzerfreundlichkeit.

Wie hat sich das Ranking der mobilen Suche von Google geändert?

Seit Ende April 2015 ist die Mobilfreundlichkeit von Webseiten ein neuer und wichtiger Rankingfaktor. Laut Google werden Webseiten, die mobil optimiert wurden ausschließlich auf dem Smartphone besser gerankt und mit dem Hinweis „Für Mobilgeräte“ ausgezeichnet. Lt. aktuellen Erkenntnissen hat Google die Ankündigung nicht so „hart“ durchgezogen wie angekündigt. Dennoch sind Auswirkungen deutlich erkennbar und Google wird den Rankingfaktor „Mobile“ weiter stark gewichten.

Was kostet eine Umstellung?

Die Kosten sind wie immer abhängig von den Anforderungen. So kann man bei kleinen Webseiten bis zu 20 Seiten und wenig technischen Anforderungen mit einem Aufwand von 1-3 Tagessätzen und ca. 500 - 1.500 € rechnen. Größere Webseiten oder Onlineshops mit zusätzlichen Anforderungen wie Buchungsmöglichkeiten oder Bestellprozesse müssen dagegen meist 5-stellige Beträge investieren.

Da man in der Regel nicht auf hunderte von mobilen Endgeräten optimal optimieren kann, sollte man sich auf die Typen konzentrieren, die aktuell den höchsten Nutzungsgrad aufweisen.

Lohnt sich die Umstellung auf Responsive Design trotz der Kosten?

Checken Sie Ihr Statistikprogramm und stellen Sie fest wie viele Ihrer Besucher heute schon per Tablet & Smartphone auf Ihre Webseite zugreifen. Sollten die mobilen Zugriffe bei unter 10% liegen haben Sie keinen akuten Handlungsbedarf. Falls diese User aber Transaktionen (Buchungen, Käufe und Anfragen) vorbereiten und abschließen sollten Sie aktiv werden. Erfahrungsgemäß stellen aktuell eher Webseiten im B2C Bereich um, da der Endverbraucher als Kunde oft mobile aktiver ist als der Geschäftskunde (B2B). Klar ist aber auch, wer jetzt aktiv wird, unabhängig von der Zielgruppe, erzielt definitiv einen Wettbewerbsvorteil.

Was sind die häufigsten Fehler bei der Umsetzung?

Der größte Fehler ist die 1:1 Umsetzung der Struktur & Inhalte von der „normalen“ Webseite auf das mobile Endgerät. Der Nutzer auf dem Smartphone hat wenig Zeit, oft eine schlechte Verbindung und achtet auch auf die Kosten. Um diesem Nutzer das bestmöglichste Nutzererlebnis zu bieten, sollten die Inhalte schnell laden und die Menüstruktur exakt auf seine jetzige Situation angepasst werden. Große Bilder oder z.B. eingebundene Videos sollten reduziert oder erst bei Klick nachgeladen werden. Skripte und CSS-Dateien auf ein Minimum reduzieren und einer Komprimierung unterziehen. Vermeiden Sie auch Downloads wie PDF's oder ähnlichen Formaten. POP Up`s und ewig lange Texte sind ebenfalls ein „Killer“ und verschrecken den mobilen User.
Eine einfach zu bedienende Call-to Aktion (Anruffunktion, E-Mail und Routenplaner) sollte übrigens nie fehlen!

Presse Artikel

Quelle: IHK Magazin Hanau-Kinzigtal Juli/August 2015
responsive_artikel.pdf