Reponsive Webdesign für Dummies

Responsive-web-design-devices

Webseiten verändern sich – Und wie! Eines ihrer zentralen Kennzeichen, das Design, wird sich in Zukunft an alle Geräte anpassen. Egal ob Smartphone, Tablet oder Smartwatch: Jede Webseite wird in Zukunft auf jedem Endgerät „gut aussehen“.

Was ist Responsive Webdesign überhaupt?

Reponsive Webdesign ist eine der wichtigsten Features einer modernen Website. Mittlerweile geht ungefähr 50% des Traffics von mobilen Geräten wie Smartphones und Tablets aus und Webseiten müssen mit ihrem Design dementsprechend reagieren.Webseiten müssen für jedes Endgerät userfreundlich dargestellt werden – sonst gehen sie unter, denn die Konkurrenz schläft nie.

Was für Regeln und Richtlinien gibt es für gute responsive Designs?

Das heißt alle Inhalte wie etwa Text, Grafiken, Videos und Zwischenüberschriften sollte entsprechend skaliert und richtig dargestellt werden. Eine Webseite sollte auch immer möglichst „nahe“ am Original sein, d. h. Spalten und Einteilungen sollten nicht großartig sich verändern. Es ist auch wichtig, dass Navigationsmenüs und Links klar zu erkennen und zu bedienen sind. Google bewertet in seinen Suchergebnissen Webseiten mit einem Responsive Design (mobiltaugliche) auch höher (siehe dazu meinen Post zu SEO und Google jüngste Algorithmus-Änderung).

Zitat: Content is like water

Eine Weisheit für alle Webdesigner.

Nicht vergessen: Touchscreens!

Natürlich müssen Webseiten vor allem für Touchscreens optimiert werden. Dabei spielt die Schriftgröße und die klare Erkennbarkeit von anklickbaren Inhalten eine große Rolle. User müssen sich schnell zu recht finden – Egal ob sie die Desktopversion eine Webseite schon kennen oder nicht.

Technische Voraussetzungen

Responsive Design wird durch die neuen Webstandards wie HTML5 und CSS 3.0 ermöglicht. Früher wurden Templates benutzt und mehrere Versionen einer Webseite für verschiedene Endgeräte zu haben (zum Beispiel ein Template für Smartphones). Bei HTML5 ist das nicht mehr der Fall: Es reicht ein HTML-Dokument aus. Siehe dazu die Unterschiede zwischen mobilen, adaptiven und liquiden Webseiten.

Gelungene Beispiele für Responsive Design

Awwwards.com

Contentsmagazine.com

Empfehlenswerte Literatur: Die Basics von Liechtenecker.at

P.S: Es gibt auch für WordPress etliche Plug-Ins um seine Webseite responsive zu gestalten.

4.109 Kommentare zu "Reponsive Webdesign für Dummies"