Responsive Webdesign: Mehr als nur eine Frage der Technik.

1024 576 Martin Wazek

Was vor vielen Jahren noch technischer Luxus war, ist für viele Nutzer mobiler Endgeräte heutzutage kaum noch wegzudenken: Websites die benutzerfreundlich und einwandfrei auf Smartphones, Tablets und Co. angezeigt werden. Je nach Branche und Unternehmen kommen heute bereits 30 % oder mehr der Besucher von Websites über mobile Endgeräte. Eine Zahl, die man nicht mehr vernachlässigen darf.

Immer mehr Kunden nutzen ihr Smartphone für Webrecherchen und sind somit auch auf funktionierende online sowie mobilen Webseiten angewiesen. Wir haben die wichtigsten Tipps für Responsive Webdesign zusammengefasst:

Basics für Responsive Webdesign

Ohne automatische Anpassung der Website an die Formate von mobilen Endgeräte verliert man Nutzer, weil das Surfen einfach zu umständlich und zu mühsam wird. Nur die halbe Seite angezeigt bekommen, Texte vergrößern und durch einzelne Seiten zu klicken zu müssen, sollte der Vergangenheit angehören.

Fixe Layouts vermeiden

Exakt platzierte Inhalte, Bilder und Co. sind im Responsive Webdesign nicht praktikabel. Beim Responsive Webdesgn sollte man sich von starren Layouts verabschieden. Wird eine Website neu aufgebaut, hat die Funktionalität auf mobilen Endgeräten Priorität. Es gilt: Design follows Content. Der Inhalt ist immer noch wichtiger als das Design. Was aber nicht heißt, dass die Attraktivität einer Seite darunter leiden muss oder darf.

Display ist nicht gleich Display

Der Inhalt muss sich automatisch auf das jeweilige Display anpassen, damit Inhalte und Bilder nicht abgeschnitten oder extrem verkleinert werden.

Standard Auflösungen von Smartphones und Tablets:

Smartphones: 320px bis 480px
Tablets: 768px bis 1024px
Computer-Desktop: 1024px+

Die folgenden Abbildung zeigt ein Beispiel, wie sich das Layout einer Website auf den einzelen Displays präsentiert:

Keine fixen Schriftgrößen

Auch bei den Schriftgößen ist zu beachten, dass alles was auf dem PC angezeigt wird nicht gleich ist wie auf dem Smartphone. Deshalb gilt auch hier eine prozentuelle Angabe. Wichtig ist: Prüfe hier immer gleichzeitig auf den jewiligen Endgeräten ob die Inhalte auch leserlich angezeigt werden.

Keine fixen Bildgrößen

Für viele Nutzer ein Dorn im Auge: Bilder die für Smartphones nicht richtig skaliert wurden. Entweder ist das Bild zu groß und der Text verschwindet oder das Bild wird überhaupt nur ganz klein angezeigt. Große Bilder mit einem entsprechendem Datenvolumen werden auf mobilen Endgeräten erst mit langer Wartezeit angezeigt. Mit den richtigen CSS-Einstellungen  werden  Bilder relativ leicht responsive „gemacht“ und unterschiedlich skaliert und für das jeweilige Gerät angepasst. Das spart Zeit und auch Nerven.

Veränderte Design-Regeln

Für viele Nutzer zählen jetzt andere Regeln bezüglich der Benutzerfreundlichkeit auf den Smartphones und Tablets.
FrüherHeute
Kurz und knappe Texte:
Damit auch tatsächlich alles gelesen wird.
Lange Texte durch Zwischenüberschriften strukturieren:
Somit bietet man mehr Informationen für die Leser.
Sparsame Bilderverwendung:
Da Bilder keine Daten für Google liefern und auch das
Datenvolumen erhöhen lieber sparsam einsetzen.
Bilder sagen mehr als 1000 Worte:
Zu jedem Beitrag mindestens 1 Bild um die Inhalte attraktiver zu machen.
Es wird geklickt:
Lange Artikel werden auf mehreren Seiten aufgeteilt. Man klickt sich mit der Maus durch die einzelnen Seiten.
Es wird gescrollt:
Auf Smartphones scrollt man den Text hinunter und wischt zwischen den einzelnen Seiten. Klicken ist hier eher umständlich und sollte vermieden werden.

Mobiles Leseverhalten ist anders als jenes am Desktop

Diese Tatsache stellt auch besondere Anforderungen an das strukturelle Konzept einer Website. Wer will schon jeweils eine eigene Destop-Version und eine eigene Mobile-Version betreiben und pflegen? Mit dem Multi-Purpose-Webtool von wazek & partner sind beispielsweise  die technischen Anforderungen damit gelöst. Gleichzeitig werden aber neue Content-Strategien entwickelt, die alle User gleichermaßen zufrieden stellt.