Kosten sparen durch Responsive Webdesign

Websites für Smartphones und Tablets optimieren

So funktioniert Responsive Webdesign

Responsive Webdesign basiert auf HTML5 und CSS3. Mittels sogenannter Media Queries werden die Eigenschaften und Fähigkeiten des Endgeräts abgefragt, mit dem der Besucher auf die Website zugreifen will. Wie groß ist das Display des Geräts? Wie hoch seine Auflösung? Welches Format besitzt der Screen, Hoch- oder Querformat? Und welche Eingabemöglichkeiten stehen zur Verfügung: Tastatur, Maus, Finger und Sprache?

Notwendige Voraussetzung für die Nutzung von Media Queries ist die strikte Trennung von Inhalt und Layout, um das volle Potenzial des Responsive Webdesigns ausschöpfen zu können. Dann passt sich das Layout der Website automatisch an, ohne dabei auf Javascript oder Änderungen im HTML-Code zurückgreifen zu müssen. Schriftgröße und Bilder skalieren sich entsprechend in Breite wie Höhe, das Bild dreht sich ins gewünschte Hoch- oder Querformat, und vermeintlich weniger wichtige Elemente werden erst gar nicht angezeigt.

Diese Reduktion beziehungsweise Priorisierung der Inhalte muss sorgfältig geplant sein. Dafür bieten sich Workshops an. Dabei werden genau jene Bereiche der Website definiert, die auf kleineren Displays ausgeblendet werden oder weiter nach unten rutschen können. Je nach Breite werden Inhalte umstrukturiert und entweder untereinander oder nebeneinander angeordnet. Der Online-Marketing-Spezialist Frank Pomereinke rät zu drei- bis fünfstufigen Strukturen. Diese sollten jedoch noch separat skalierbar sein. So könne man bereits mit drei skalierbaren Stufen alle Auflösungen abdecken: Für kleine Smartphone-Screens gilt die schmalste Ansicht, in der Inhalte in der Regel nur untereinander dargestellt werden. Die mittlere Stufe richtet sich an Tablets mit größerem Display im Hochformat und verzichtet meist auf ein bis zwei Tabellenspalten am rechten Rand. Die dritte Ansicht zielt auf Monitore und Tablets mit hoher Auflösung und Querformat. Sie zeigt die Inhalte in voller Breite.

Der Kalifornier Luke Wroblewski, einer der erfahrensten Webdesigner weltweit, geht in seinem Buch "Mobile First" sogar noch einen Schritt weiter. Er empfiehlt, die Inhalte im Web so aufzubereiten, dass sie überall und jederzeit abgerufen werden können und sich dabei in erster Linie an den kleinen, mobilen Endgeräten zu orientieren. Denn der Trend gehe klar zur Internetnutzung auf mobilen Endgeräten.

Das stellt vieles infrage, denn die kleineren Bildschirmgrößen zwingen die Webdesigner, sich auf das Wesentliche bei Form, Funktion und Inhalt zu beschränken. So müssen auch die verwendeten Techniken mit allen Endgeräten kompatibel sein, was beispielsweise den Einsatz von Flash erschwert. Das berühmte Credo lautet: Weniger ist mehr. Und diese Philosophie deckt sich mit den traditionellen Wünschen so ziemlich jeden Nutzers: dem Wunsch nach Schnelligkeit und intuitiver Bedienung.

Dieser Artikel basiert auf einem Beitrag der TecChannel-Schwesterpublikation Computerwoche. (cvi)