Responsive Webdesign

Das Internet ist für den Computer gedacht! Dieses Dogma schien jahrelang in Stein gemeißelt zu sein, doch spätestens seit dem Boom von Smartphones wie iPhone, Blackberry und diversen Android Geräten (und etwas später auch verschiedenen Tablets wie etwa dem Apple iPad) wurde schnell klar: Eine Website wie man sie bisher für den Desktop-Anwender entwickelt hat funktioniert in den meisten Fällen nur bedingt auch auf mobilen Endgeräten gut. Die Probleme können dabei technische Inkompatibilitäten sein oder aber auch unschöne Darstellungsfehler. Das größte Hindernis ist häufig jedoch eine schlechte Usability. Bis ins winzige gezoomte Webseiten können per Touchbedienung schlecht navigiert werden, Texte lassen sich schlecht entziffern oder man muss immer erst in Teile der Website rein zoomen, um Details zu erkennen.

In den Anfängen haben Entwickler auf diese neue Situation insofern reagiert, dass sie eine Website zwei Mal entwickelt haben. Einmal in groß für den Desktop-Rechner und einmal in klein für die Handyausgabe. Diese Vorgehensweise war jedoch mit gewissem, redundanten Arbeitsaufwand verbunden. Auch galt es so immer zwei Websites inhaltlich zu pflegen und zwei Websites technisch zu warten. In Zeiten von HTML 5 und CSS 3 heißt das Zauberwort heute deshalb Responsive Webdesign.

Der Grundansatz des Responsive Webdesign ist der, dass nur eine Website entwickelt wird und über den Einsatz von sogenannten Media Queries oder Skripten die Auflösung des Betrachtungsgeräts (etwa 24 Zoll Monitor, Tablet- oder Handydisplay) erkannt wird und anhand dieser Information eine jeweils unterschiedliche CSS Datei geladen wird. Die CSS Datei enthält dann erst die eigentlichen Angaben darüber wie die Website dargestellt wird. Somit hat man die Möglichkeit eine einzige Website auf verschiedene Ausgabesituationen zu optimieren – Darstellungen werden angepasst, unwichtige Informationen der Einfachheit halber weggelassen. Zum Beispiel könnte man fummelige Navigationsmenüs für den Einsatz auf einem Smartphone optimieren, in dem man die Links größer macht, um sie mit dem Finger gut aktivieren zu können. Oder man könnte für die Ansicht auf einem Tablet eine viel Platz einnehmende Sidebar unterhalb des Hauptcontents darstellen oder auch ganz ausblenden.

Prinzipiell stehen einem mit CSS fast beliebige Möglichkeiten zu Verfügung ein und das selbe HTML-Gerüst auf verschiedene Weisen darzustellen. Mit weiteren Methoden hat man darüber hinaus etwa auch die Möglichkeit Bilder für mobile Gerät in geringerer Auflösung anzubieten, damit man mit seinem Smartphone nicht den selben Traffic stemmen muss wie mit dem Desktop-Rechner.

Um Responsive Webdesign etwas zu veranschaulichen, haben wir hier ein simples Beispiel erstellt.

Facebook-Kommentare

Hinterlasse eine Antwort

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

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Haben wir Ihr Interesse geweckt? Nehmen Sie Kontakt auf!

“Ideen sind zum Wachsen da!”