Responsive Design – So kreieren Sie eine optimierte Website

Mehr als ein Drittel der Internetnutzung passiert inzwischen an mobilen Geräten wie Tablets oder Smartphones. Eine mobile Website ist deshalb Pflicht – und das responsive Design ist die Königsdisziplin.

Es gibt grundsätzlich zwei Möglichkeiten, Ihre Website für mobiles Surfen zu optimieren. Entweder Sie verwenden eine Subdomain, die in der Regel eine abgespeckte Version der originalen Website ist (m.IhreWebsite.de). Oder Sie erstellen ein responsives Design, das sich anpasst.

Die Herausforderung besteht darin, eine Webseite für alle Standardauflösungen benutzerfreundlich darzustellen: Smartphones (320 bis 480 Pixel), Tablets (768 bis 1024 Pixel) und Desktop-Computer (ab 1024 Pixel). Mobile Endgeräte werden außerdem nicht nur hochkant sondern auch im Querformat genutzt.

Warum responsive Webdesign?

Aus diesem Grund bietet das responsive Design große Vorteile. Responsive bedeutet so viel wie „reagieren“. Eine responsive Website reagiert dementsprechend auf die Bildschirmauflösung des Endgerätes. Inhalt, Navigation und Aufbau der Seite passen sich der Bildschirmgröße an.

So ein flexibles Layout erfordert natürlich eine intensive Planung und Konzeptionsphase. In der Vorbereitung ist das responsive Design also aufwendiger. In der Pflege und Wartung allerdings kostet eine responsive Website deutlich weniger Arbeit als eine mobile Website, von der es für jede Auflösung eine eigene Version gibt.

Worauf Sie beim Erstellen einer responsive Website achten sollten

  • Prozentual statt Pixel: Um Bilder, Tabellen, Texte, Videos oder Logos flexibel darstellen zu können, werden die Elemente nicht mit festen Pixelwerten definiert sondern über prozentuale Werte zueinander.
  • Datenlast klein halten: Mobile Endgeräte laufen meist nur mit einem limitierten Datenvolumen. Um also Ladefehler und Wartezeiten zu vermeiden, achten Sie darauf, die Datenlast so gering wie möglich zu halten.
  • Mobile First: Wenn Sie die Möglichkeit haben, starten Sie mit dem Konzept für die kleinste Bildschirmauflösung. Es ist deutlich einfacher, später Details und Elemente hinzuzufügen, als diese im Nachhinein zu entfernen.
  • User First: Denken Sie bei der Konzeption an Ihre Nutzer – sie sind unterwegs, eher in Eile und haben wahrscheinlich ein konkretes Anliegen. Erarbeiten Sie im ersten Schritt die relevanten Inhalte für Ihre Nutzer. Design und Gestaltung sind erst der zweite Schritt („Content vor Design“).
  • Lesbare Schriften: Feste Schriftgrößen sind bei responsive Designs nicht sinnvoll. Eine Schriftgröße, die am PC gut lesbar ist, bereitet am Smartphone Kopfschmerzen. Greifen Sie auf alternative Maße oder prozentuale Werte zurück. Prüfen Sie die Lesbarkeit von Schriften idealerweise direkt am entsprechenden Gerät.
  • Bildqualität: Am hochauflösenden Bildschirm muss das Bild scharf sein – auf dem kleinen Smartphone-Display mit mobilem Internet sorgt eine große Datei aber für lange Wartezeiten. Nutzen Sie auf jeden Fall eine der Möglichkeiten, Grafiken je nach Gerät anzeigen zu lassen (z.B. über ein JavaScript Plugin).
  • Navigation: Achten Sie darauf, dass Ihre Navigation auch für Touch-Screens funktioniert. Mouseover-Menüs sind zum Beispiel nicht möglich und auch aufklappende Menüs sind eher unpraktisch.

Übrigens können Sie testen, ob Ihre Website für mobile Endgeräte optimiert ist bei Google Webmasters. Wenn nicht, sollten Sie direkt mit der Planung beginnen. Denken Sie daran, dass eine responsive Website am Anfang einen langen Atem voraussetzt – am Ende sparen Sie sich aber hohen Pflegeaufwand.

 

Welche Vorteile sehen Sie noch in responsive Websites? Teilen Sie Ihre Meinung mit uns in einem Kommentar.

Ein Kommentar


Schreiben Sie uns einen Kommentar

1 Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.