Responsive Web Design

Das “nächste große Ding” in der Webentwicklung?

Robot or not?

Manche vergleichen den Umbruch von bisherigem Web Design zum “reagierenden” mit dem Wandel, der vor einigen Jahren von tabellenbasierten Layouts zu barrierefreieren Webseiten mit CSS geführt hat. Dieser auf technischer Ebene erhebliche Meilenstein war damals für den “durchschnittlichen Nutzer” oberflächlich gar nicht unbedingt erkennbar.

Was beim “Responsive Web Design” passiert, wird jedoch auch für die Mehrzahl der Nutzer erkennbar mehr Komfort bieten. Das Prinzip ist, dass sich das Layout von Webseiten automatisch an das Endgerät des Nutzers anpasst - was Größe und Fähigkeiten betrifft.

Auch wenn Responsive Web Design in der Webentwickler-Welt inzwischen kein gänzlich neuer Begriff mehr ist, so sind doch die allermeisten Seiten nach folgendem Prinzip gestaltet: Man nehme einen Container, den man auf eine feste Breite von ca. 1000 Pixel setzt, und platziere dort sämtliche relevanten Seiteninhalte. Das führt einerseits dazu, dass man mit kleinen Endgeräten wie Smartphones oder Ebookreadern in der Regel ständig zoomen muss, um Seiteninhalte lesen/nutzen zu können. Auf großen Desktop-Monitoren sieht die Webseite dagegen eher “mickrig” aus. Hier setzt Responsive Web Design an. Eine künstlich aufgesetzte Pixel-Breite eines Layouts wird weggelassen, und theoretisch auch andere feste Pixelangaben. Das ist ganz grob gesagt auch schon das Herzstück des Responsive Web Design-Ansatzes. Die oft mit Responsive Web Design assoziierten Media Queries (Beispielseiten auf http://mediaqueri.es), die je nach Browsergröße verschiedene CSS-Styles laden, spielen eine wichtige Rolle, sind aber nur ein Teil des gesamten Ansatzes, wie auch Jeremy Keith im Sitepoint Podacst #111 erwähnt.

 

Responsive Web Design - Probleme und Lösungen

Natürlich kommen durch den Verzicht auf feste Breiten sehr viele andere “Probleme” auf, die einem bewusst sein müssen und gelöst werden wollen. Ersteinmal ist schon beim Entwurf des Layouts ein Umdenken angesagt, da man nun nicht mehr “ein Layout in Photoshop” entwerfen kann, das dann pixelgenau 1:1 umgesetzt werden kann. Es geht also mehr um das allgemeine “Look & Feel” einer Seite als um “Pixelschieberei”.

Vieles gilt es dabei zu bedenken, beispielsweise Texte. Diese laufen ohne jegliche Größenangabe über den gesamten zur Verfügung stehenden Raum. Was bei Smartphones gut aussehen kann, wird allerspätestens bei einem 27-Zoll Monitor zu unlesbaren Endloszeilen. Die Angabe von Maximalbreiten einzelner Inhaltscontainer ist eine Möglichkeit, dem beizukommen - eine andere die Vergrößerung der Schrift.

Adaptive-imagesEin weiterer wichtiger Punkt sind Bilder: bei kleinen Endgeräten sollten natürlich keine riesigen Bilder ausgeliefert werden, die die Bandbreite des Geräts unnötig belasten. Das Webseiten-Plugin “Adaptive Images” kann hier großartige Dienste leisten: Die Monitorgröße des Benutzers wird per Javascript abgefragt und (in Abstufungen) eine entsprechende Bildgröße vom Server geliefert. Um Bilder dagegen stufenlos zu skalieren, kann grundsätzlich CSS verwendet werden (die Dateigröße eines Bildes bleibt dabei jedoch gleich).

Ein letztes Schlagwort noch, das in diesem Zusammenhang wichtig ist: “Progressive Enhancement”. Diese Technik bedeutet, dass Inhalte und Funktionen einer Seite je nach Möglichkeiten des Browsers geladen werden. Besitzt ein Browser nicht die entsprechende Größe oder entsprechende Fähigkeiten, wird der Inhalt nicht geladen. Responsive Web DesignSo könnten Funktionen, die auf Smartphones keinen Sinn machen, z.B. per Javascript nur dann geladen werden, wenn der Nutzer an einem größeren Endgerät sitzt. “Gracefull Degradation” ist der umgekehrte Ansatz, der von der “größten/besten” Version einer Seite ausgeht, und einzelne Elemente ausblendet, wenn das Endgerät/der Browser nicht dafür geeignet ist. Der Nachteil hierbei ist, dass Inhalte zuerst einmal geladen werden müssen, die danach aber eventuell gar nicht mehr gebraucht werden.


Namensgeber und Autor eines sehr interessanten und empfehlenswerten Buchs über Responsive Web Design ist Ethan Marcotte. Das naturgemäß mustergültigste Beispiel einer reagierenden Webseite kommt deswegen auch von Ethan.

Zurück

Einen Kommentar schreiben

* Pflichtfelder

Alle Themen

Responsive Web Design

Das “nächste große Ding” in der Webentwicklung?

Gestalten für's Internet

Was Designer beim Gestalten für's Web beachten sollten

Online Grafikprogramm

Sumo Paint

Modernes Content Management System

Contao CMS

Gutes Time-Tracking-Tool

Toggl