Im Fokus

Responsive Web Design

Webentwickler Ethan Marcotte entwickelte eine Art der Gestaltungstechnik, mit der Designer Webauftritten die Fähigkeit verleihen, sich in Darstellungsstruktur und Aussehen den Möglichkeiten des jeweiligen Ausgabegerätes anzupassen.

Responsive Web Design

Responsive Web Design

Dieser in der Branche noch relativ junge Begriff (ein wegweisender Artikel – wenn nicht DER wegweisende Artikel – des Webentwicklers Ethan Marcotte erschien unter obigem Titel am 25. Mai 2010 auf alistapart.com) bezeichnet eine Art der Gestaltungstechnik, mit der Designer Webauftritten die Fähigkeit verleihen, sich in Darstellungsstruktur und Aussehen den Möglichkeiten des jeweiligen Ausgabegerätes anzupassen.

Damit ist nicht gemeint, was vorher schon möglich war, nämlich unterschiedliche StyleSheets anzubieten für verschiedene Grob-Kategorien von Geräten wie Bildschirme oder Drucker.

Die neuen Leistungen gehen darüber weit hinaus und beruhen im Wesentlichen auf den im Rahmen von CSS3 eingeführten ‘media queries’. Das sind Abfragen von Eigenschaften von Ausgabegeräten.

CSS3-Regeln erlauben, die Ausführung von Code-Abschnitten zur Gestaltung von der jeweiligen Antwort eines Browsers auf eine solche Abfrage abhängig zu machen.

Aber wozu das alles?

Die zentrale Herausforderung für Webdesigner liegt in der Tatsache, dass sie den anzubietenden Informationen ein Aussehen geben sollen, das beispielsweise auf jedem Bildschirm mit einer Diagonale zwischen fünf Zentimetern und hundertfünfundfünfzig Zentimetern (oder größer) gleich gut, gleich konsumierbar wirkt.

Offenbar ein Ding der Unmöglichkeit.

Webseiten unterschiedlichen Inhalts anzubieten für SmartPhone-Surfer und für Desktop- oder Laptop-User, wie seit dem Aufkommen der Handhelds geübt, erscheint heute als unbefriedigende Reaktion. Es gibt schließlich keinen vernünftigen Grund, warum Nutzer von SmartPhones von übers Web sonst zugänglichen Informationen ausgeschlossen bleiben sollten, oder, warum Nutzer von ‘klassischen’ Computermodellen mit inhaltlich überfrachteten Seiten zu leben gezwungen werden müssten.

Wenn aber beide Nutzer-Gruppen (und alle möglichen dazwischen) sinnvollerweise mit denselben Inhalten beliefert werden sollen, muss die Darstellung dieser Inhalte einer Vielfalt verschiedener Szenarien angepasst werden können:

  • Bedienung der Oberfläche mit Tastatur, Maus, Stift, Finger oder TV-Fernbedienung 
sowie in Zukunft vmtl. vermehrt sprachgesteuert
  • Display-Größe von 320 x 480 Pixel (oder weniger) bis zu 2560 x 1600 Pixel (Tendenz steigend) bei einer Auflösung von 72ppi (pixel per inch) bis z.T. schon deutlich über 300ppi

Und welche Reaktionsmöglichkeiten haben Designer auf die Mischungen obiger Auswahlkriterien?

  • Anpassen der Anordnung von Objekten an das jeweilige Platzangebot
  • Anpassen der Größen von Objekten an das jeweilige Platzangebot

Wobei das Meiste natürlich verkleinert werden muss, wenn weniger Bildfläche verfügbar ist.

Schrift dagegen muss manchmal vergrößert werden! Gerade bei kleinflächigen Schirmen, die dafür heute in der Regel eine höhere Auflösung verwenden, geraten sonst die Buchstaben unlesbar klein.

Und um herauszufinden, welche Situation am Ausgabegerät vorliegt, lassen sich über ‘media queries’ (Quelle: www.w3.org/TR/css3-mediaqueries) folgende Parameter abfragen:
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan und grid

Zum Beispiel können wir mit

@media screen and (max-resolution: 199dpi) {

#display_box {

font-size: .875em;

}

}

für die Ausgabe nur auf Bildschirmen, die eine Auflösung unter 200ppi bieten, die Schriftgröße verkleinern, was bei höher auflösenden Geräten zu schlecht(er) lesbarem Text führen würde.

Oder wir können mit (z.B.)

@media screen and (max-width: 799px) {

#nav {

width: 22.5%;

}

#aside {

width: 91%;

min-height: 0;

}

}

@media screen and (max-width: 479px) {

#nav, #aside {

width: 66.66%;

min-height: 0;

}

}

für bestimmte Elemente in zwei Stufen deren Breite neu bestimmen, so dass sich in Verbindung mit anderen Angaben das Layout ändert, etwa von dreispaltig auf zweispaltig (unter 800px Schirm-Breite) und schließlich auf einspaltig (unter 480px).

Eine Kombination aller so entstehenden Möglichkeiten, lässt recht verschiedene Designs für unterschiedliche Ausgabe-Situationen zu, ohne dass die eigentlichen Inhalte eines Webauftritts angetastet werden müssen.

… wird fortgesetzt

 

Share on Google+Share on LinkedInPin on PinterestShare on TumblrTweet about this on TwitterShare on Facebook