© saicle/Shutterstock.com
Webseiten mit Responsive Web Design an das Ausgabegerät anpassen

Was nicht passt, wird passend gemacht


In der aktuellen Diskussion um modernes Webdesign fehlt selten ein Hinweis auf Responsiveness. Responsive Web Design ist ein großer Hype im Frontend-Bereich. Die Idee dahinter ist nicht neu, viele Techniken hingegen schon.

Das Internet ist in vielerlei Hinsicht ein revolutionäres Medium. Es erlaubt dem Konsumenten, die gewünschten Informationen (aka Webseiten) in der ihm genehmen Form zu rezipieren, denn eine Webseite kann auf so unterschiedlichen Ausgabegeräten, wie einem Smartphone, einem Netbook, einem Notebook oder einem stationären Rechner ausgegeben werden. Man kann sich die Seite vorlesen lassen oder das Design selbst verändern, Werbung wird einfach mit einem Browser-Plug-in entfernt. Das können uns andere Medien nicht bieten. Doch im Webdesign wird die Flexibilität des Internets selten berücksichtigt. Es ist zugegebenermaßen kompliziert: Wir müssen begreifen und verinnerlichen, dass wir mit unserem Layout immer nur Annahmen machen können, denn wir wissen nichts über die wahren Bedingungen, unter denen unsere Seite genutzt wird [1]. Doch diese Unsicherheit passt verständlicherweise den wenigsten Kunden oder Designern ins Konzept. Natürlich möchte man wissen, in welcher Form das eigene Produkt, die Webseite, beim Konsumenten ankommt. Man hat eine konkrete Vorstellung von der wünschenswerten Form. Auf der anderen Seite konsumieren immer mehr Menschen Internetseiten auch auf den kleinen Monitoren eines Smartphones. Deren Browser führen sich auf, als wären sie Desktopbrowser und skalieren die Seiten soweit herunter, bis sie auf den schmalen Monitor passen. Eine 980 Pixel breite Webseite passt so auf einmal ohne horizontalen Scrollbalken auf einen 320 Pixel breiten Monitor. Allerdings kann man dann weder etwas lesen, noch einen Link treffen. Effekte beim Überfahren von Links mit der Maus (Hover) sind sogar komplett unmöglich. Manch ein Anbieter sieht die Lösung dieses Problems in einer speziellen Seite für mobile Endgeräte. Mittels Browser-Sniffing [2] wird der Konsument dann auf eine „optimierte Seite“ weitergeleitet. Dieses Vorgehen erfordert einen zweiten Entwicklungsstrang, der eine eigene Struktur, oftmals zusammengestrichene Inhalte und komplett andere CSS- und JavaScript-Dateien auf einer Subdomain bereithält. Dieser Entwicklungsstrang will beachtet und gepflegt werden, aber nicht jeder möchte zwei (oder mehr) separate Versionen einer Webseite pflegen müssen. Der Ansatz des Responsive Web Designs geht dem entgegen: Ziel ist es, eine Seite zu schaffen, die sich der jeweiligen Umgebung flexibel anpasst. Responsive Web Design besteht aus drei Elementen:

  • Media Queries

  • einem flexiblen Layout

  • flexibel eingebundene Medien

Listing 1: Drei unterschiedliche Media Queries [4]

/* Am Anfang steht CSS für alle */ body { /* allgemeine Regeln */} @media only screen and (min-width: 480px) { /* mobile Browser */  } @media only screen and (min-width: 768px) { /* Tablets im Portrait Modus */ } @media only screen and (min-width: 1000px) {  /* Tablets im Landscape Modus, Netbooks, Notebooks, Desktop Browser */ } @media print {  /* Das Printstylesheet nicht vergessen! */ }

Media Queries

Die neue Technik, mit deren Hilfe man das Layout einer Webseite an die Umgebung des Ausgabegeräts anpassen kann, heißt Media Query [3]. Es handelt sich hierbei um eine vom Browser ausgewertete Regel, die sich auf Kontextvariablen des Browsers oder des Monitors bezieht. All das geschieht im Rahmen der CSS-Interpretation. Mittels Media Query kann man fragen, ob die Browserbreite über oder unter einem bestimmten Wert liegt und je nach Ergebnis ein passendes ­Style Sheet liefern, das dann einzelne Seitenbestandteile ein- und ausblendet oder umformatiert. Die Grundidee dahinter ist alt und bezieht sich auf Medientypen. Die dafür geschaffenen Media-Regeln werden von jedem Entwickler genutzt, der ein Druck-Style-Sheet anlegt (was zum Standard einer Webseite gehören sollte). Denn beim Druck-Style-Sheet fragen wir nach einem Ausgabemedium (print). Neben der Ausprägung print ist nur noch screen praxisrelevant. Alle anderen Medientypen werden nicht unterstützt (Kasten: „Print ­Style Sheets aufrufen“).

Der neue Ansatz der Media Queries geht vom Medientypen weg und fragt nach Eigenschaften. Wir können beispielsweise nach der Monitorgröße, der Browsergröße, der Bildschirmauflösung oder der Farbtiefe fragen. So sind relativ einfach unterschiedliche Styles für normale Desktopbrowser, für Tablet PCs und für Smartphones möglich und auch eine Kombination von Media-Regeln und Media Queries (Listing 1). Es gibt natürlich noch sehr viel mehr Abfragen, die ein Entwickler setzen kann [5]. Die meisten Abfragen werden sich meines Erachtens in der Praxis nach der ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang