Responsive Web Design

von Ethan Marcotte,

erschienen am 25. Mai 2010 in A List Apart
Originaltitel und Link zum Originalartikel: Responsive Web Design
Übersetzt von Martin Mantel, intertain

Große Bilder bleiben große Bilder. Unser Layout, obwohl flexibel, passt sich schlecht an die Auflösung oder den Anzeigebereich an.

 

Doch kein Design, ob fest oder variabel, skaliert sich nahtlos über andere Anzeigeformate, als diejenigen, für die es konzipiert wurde. In unserem Beispiel passt sich das Layout perfekt an die Größe des Browserfensters an, Schwierigkeiten zeigen sich aber sehr schnell bei sehr kleinen Größen. Bei einem kleineren Anzeigebereich als 800 × 600 Pixel wird das Bild hinter dem Logo beschnitten, der Text verschachtelt und die Bilder am unteren Rand der Seite werden bis zur Unkenntlichkeit verkleinert. Und nicht nur die geringen Größen sind betroffen: Bei der Anzeige der Seite auf einem breiten Bildschirm werden die Bilder unschön vergrößert und verdrängen optisch die anderen Inhalte.

Kurz gesagt: Unser flexibles Layout funktioniert, so wie es konzipiert wurde, recht gut: Für die Anzeige in einem Standard-Desktop-Kontext. Jenseits dieser Grenzen ist es weit vom Optimum entfernt.

"Responsive" werden


Seit einiger Zeit wird von „responsiver Architektur“ gesprochen, einer neuen Disziplin, die nach der "Reaktion" von Räumen auf die Menschen, die diese durchqueren, fragt. Eine Kombination von beweglichen und festen Materialien lässt Architekten mit Kunst-Installationen und flexiblen Wandstrukturen experimentieren, die sich zum Beispiel ausdehnen können, wenn sich eine Menschenmenge nähert.
Bewegungs-Sensoren können im Zusammenspiel mit Klimaanlagen die Raumtemperatur und die Ausleuchtung eines Raumes verändern, wenn der Raum sich mit Menschen füllt. Eine „Smart-Glas“-Technologie wurde ebenfalls bereits entwickelt: Beim Überschreiten einer Schwelle für die Besetzung der Räume fäbt sich der gläserne Raumteiler dunkel, um in den einzelnen Zimmern mehr Privatsphäre zu bieten.

In ihrem Buch „Interaktive Architektur“ beschreiben Michael Fox und Miles Kamp diesen Prozess der Anpassung als „ein System mehrerer Kreisläufe, durch das man einer Art Konversation beitritt: einem kontinuierlichen und konstruktiven Informationsaustausch.” Ich denke, das ist der feine, aber entscheidende Unterschied: Anstatt starre, unveränderliche Räume zu schaffen, die eine ebenso statische Erfahrung definieren, wird hier vorgeschlagen, dass Benutzer und Struktur sich gegenseitig beeinflussen können und sollen.

Das geht also in die richtige Richtung: Anstatt die Designs für immer mehr Endgeräte mehr und mehr auseinanderzudividieren, sollten wir diese verschiedenen Systeme als Spiegel ein und derselben Erfahrungswelt betrachten. So können wir Websites als optimales Seh-Erlebnis gestalten, gleichzeitig aber die neuesten Industrie-Standards implementieren, um die Sites nicht nur flexibler, sondern tatsächlich reaktiv zu machen, jeweils anpassungsfähig für das gerade darstellende Medium. Kurz: Wir brauchen ein „responsives“ Webdesign. Nur: Wie stellen wir das an?

Entdecken Sie Media Queries


Seit den Tagen von der CSS 2.1 bestechen unsere Stylesheets bei der Endgeräte-Erkennung durch sogenannte Media Types. Wenn Sie schon einmal ein Print-Stylesheet geschrieben haben, sollten Sie hiermit vertraut sein:

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

Da wir ja nicht nur saubere Print-Codes generieren wollten, hielten diese CSS-Stylesheets auch Lösungen für eine Handvoll anderer Medientypen bereit, jeweils für ein spezifisches, geeignetes Zielgerät. Nun sind die meisten Browser und Geräte aber sicherlich nicht im Hinblick auf Spezialisierung konzipiert, so dass viele Medientypen unvollkommen umgesetzt oder sogar schlicht ignoriert wurden.

Glücklicherweise hat das W3C im CSS3 so genannte Media Queries (etwa „Medien-Abfragen“) kreiert, die die Kompatibilität mit verschiedenen Medientypen verbessern sollen. Ein Media Query ermöglicht uns nicht nur, bestimmte Geräteklassen gezielt anzusteuern, sondern auch die momentanen physischen Eigenschaften des darstellenden Umfelds abzufragen.

Media Queries wurden so, der stetig steigenden Zahl mobiler Geräte Rechnung tragend, zu einer wichtigen Technik, um maßgeschneiderte Style-Sheets auf iPhone, Android und Co. zu liefern. Um dies zu tun, könnten wir ein Media Query in einen Stylesheet-Link integrieren:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

Diese Abfrage besteht aus zwei Komponenten:
1. dem Medientyp (screen) und
2. der eigentlichen Größenabfrage in Klammern (max-device-width) und dem Zielwert (480px).
Im Klartext: Hier wird abgefragt, ob die horizontale Auflösung (max-device-width) weniger oder gleich 480px ist. Wenn dem so ist (mit anderen Worten: Wenn unsere Seite auf einem kleinen Bildschirm wie dem des iPhone angezeigt wird), dann wird „shetland.css“ geladen. Andernfalls wird der Link einfach ignoriert.

In der Vergangenheit experimentierten die Web-Designer mit auflösungsabhängigen Layouts, die vor allem auf Javascript-Lösungen basierten, wie den hervorragenden Scripts von Cameron Adams. Aber die Media Queries erlauben Lösungen für weit mehr Konstellationen, als Bildschirmgröße und -auflösung, und erweitern damit den Anwendungsbereich unserer Abfragen erheblich. Darüber hinaus kann man verschiedenste Werte in nur einer Abfrage zusammenfassen, indem man sie mit dem Keyword „and“ aneinanderhängt.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

Desweiteren ist die Zahl der Media Queries in unseren Links nicht begrenzt. Sie können im CSS auch als Teil einer „@media“-Regel enthalten sein:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Oder auch als Teil einer „@import“-Anweisung:

@import url("shetland.css") screen and (max-device-width: 480px);

In jedem Fall läuft es auf das Gleiche heraus: Wenn das darstellende Gerät unseren Media-Qery-Test besteht, können die entsprechenden CSS angewendet werden. Media Queries sind, kurz gesagt, anwenderbedingte Anmerkungen. Anstatt auf eine bestimmte Version eines bestimmten Browsers abzuzielen, werden größenabhängig feine Korrekturen am Layout vorgenommen. Es verändert sich und bleibt doch in der ursprünglichen idealen Darstellung.

Anpassen, reagieren und Grenzen überwinden


Wenden wir uns den Bildern an der Unterseite der Seite zu. Im ursprünglichen Layout sehen die betreffenden CSS wie folgt aus:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Ich habe einige typografische Merkmale weggelassen, um mich ganz auf die Gestaltung zu konzentrieren: Jedes „.figure“-Element hat ungefähr ein Drittel der Spaltengröße, für die beiden Bilder am Ende jeder Zeile ist der rechte Rand auf Null gesetzt. Das funktioniert auch ziemlich gut, bis die Browserbreite deutlich kleiner oder größer wird. Mit Media Queries können wir nun Umschaltpunkte setzen, die das Layout unserer Anzeigegröße anpassen.

Zunächst widmen wir uns dem Fall, dass die Breite der Anzeigefläche unter einen gewissen Wert, sagen wir 600px, fällt. Am Ende des Stylesheets erstellen wir also ein neues „@media“-Attribut:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

Wenn wir nun die modifizierte Seite in einem modernen Browser öffnen und die Breite des Fensters auf unter 600px reduzieren, deaktiviert das Media Query die „float“-Eigenschaft unserer Elemente und stapelt sie übereinander. Unser Mini-Layout wird korrekt in Form gerückt, die Bilder werden allerdings immer noch nicht intelligent skaliert. Die Media Queries sollten also auch noch die Anzeige dieser Bilder beeinflussen:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

Die Bilder werden für kleine Bildschirmgrößen modifiziert.


Die krummen Prozentsätze stören uns nicht weiter, wir versuchen einfach, die Größe  des flexiblen Rasters an das neue Layout anzupassen. Wenn die Browserbreite nun unter die Schwelle von 400px fällt, wird aus dem dreispaltigen Layout ein zweispaltiges und die Bilder werden so besser präsentiert.

Jetzt kann der gleiche Ansatz für große Browsergrößen herangezogen werden. Auf größeren Displays sollen alle sechs Bilder nebeneinander in einer Reihe erscheinen:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

Unsere Bilder sind nun wunderbar organisiert und in ihrer Anordnung von der kleinsten bis zur größten Browsergröße, für alle Größenänderungen und Auflösungen optimiert.

Die Angabe eines „min-width“-Befehls in den Media Queries ermöglicht die Anzeige der Bilder in einer einzigen Zeile.


Doch das ist nur der Anfang. Mit in unsere CSS eingebetteten Media Queries können wir weit mehr beeinflussen, als die Anordnung von ein paar Bildern: Wir erstellen völlig neuartige Layouts, die sich je nach Größe und Auflösung anpassen. So könnte sich beispielsweise das Hauptmenü auf einem Großbildschirm viel prominenter darstellen, als auf kleineren Bildschirmen, wo es sich wieder brav über dem Logo einordnet.

Mit Responsive Webdesign können wir unsere Inhalte nicht nur an kleinere Endgeräte (wie etwa Smartphones) anpassen. Es ermöglicht maßgeschneiderte Darstellungslösungen für alle möglichen Displays.


Responsive Webdesign zielt nicht nur auf Änderungen im Layout. Media Queries erlauben unglaublich präzise Anpassungen bei der Reorganisation einer Seite: So kann die Größe von Links für kleinere Bildschirme erhöht werden („Fitts’ Law“ wird so auch für Touchscreens eingehalten). Elemente können vergrößert oder ausgeblendet werden, je nachdem, was für die Navigation dienlicher ist; Auch eine reaktive Typografie ist möglich: Die Textgröße kann sich anpassen, um die Lesbarkeit zu optimieren.

Einige technische Hinweise


Media Queries erfreuen sich robuster Unterstützung der neuesten Browser (wie Safari 3+, Chrome, Firefox 3.5+, Opera 7+) sowie der meisten mobilen Browser (Opera und WebKit Mobile zum Beispiel), die sie nativ unterstützen. Ältere Versionen sind dagegen offensichtlich nicht mit Media Queries kompatibel. Und obwohl Microsoft die Unterstützung von Media Queries im IE9 versprochen hat, bietet der Internet Explorer derzeit noch keine native Implementierung.

Wenn Sie dennoch Media-Queries auf einem solchen Browser einsetzen wollen, gibt es dafür einen Silberstreif am Horizont: Eine JavaScript-Lösung.
• So ermöglicht ein jQuery-Plugin (von 2007) die Verwendung von eingeschränkten Abfragefunktionen, allerdings nur für minimale und maximale Breite und nur angehängt an separate „link“-Elemente.
• Desweiteren wurden vor Kurzem die „CSS3-mediaqueries.js“ veröffentlicht, eine Bibliothek, die verspricht: „IE 5+, Firefox 1+ und Safari 2 genauestens zu analysieren und mit CSS3 Media Queries kompatibel zu machen“, und zwar mit dem integrierten Attribut „@mediablock“. Auch wenn es sich erst um die Version 1.0 handelt, ich fand dieses Tool sehr gut gemacht und beabsichtige, seine Entwicklung weiter zu verfolgen.

Wenn eine JavaScript-Lösung Ihnen nicht praktisch vorkommt, ist das durchaus verständlich. Trotzdem: So ein Code ist sehr nützlich für Ihr Fluid-Raster-Layout und ein gewisses Maß an Flexibilität Ihrer Seiten auf Media-Query-blinden Browsern oder Endgeräten.

Ausblick


Flexibles Layoutraster, anpassbare Inhalte und Media Queries sind die drei Grundvoraussetzungen für ein responsives Webdesign, aber ihre Anwendung erfordert auch eine neuen Art des Denkens. Anstatt unsere Inhalte für verschiedene, geräteabhängige Anwendungen zu separieren, ermöglichen uns Media Queries eine weit bessere Art der Veröffentlichung für die verschiedensten Ansichten. Das heißt nicht, dass nicht in bestimmten Fällen auch die Erstellung separater Sites für verschiedene Endgeräte richtig sein kann – zum Beispiel, wenn auf dem mobilen Gerät weniger Inhalte bereitgestellt werden sollen, als in der Desktop-Version.

Aber diese Art von Web-Design sollte nicht mehr unsere Maxime sein. Heute soll das Ergebnis unserer Arbeit auf einer großen Anzahl verschiedenster Geräte eine „gute Figur“ machen. Responsive Webdesign ermöglicht uns, nach vorne zu blicken und gibt uns endlich die Möglichkeit, im Web für „Ebbe und Flut“, für „die Welt in Bewegung“ zu gestalten.


 

Über den Autor: 

Ethan Marcotte
ist Webdesigner und Webentwickler. Er bemüht sich um schönes Design und um eleganten Code. Und um das Zusammenspiel dieser beiden Dinge. Seit Jahren freut sich Ethan über die Zusammenarbeit mit Kunden wie dem Sundance Film Festival, der Stanford University, dem New York Magazine und der The Today Show. Er schwört auf Twitter und möchte ein unaufhaltsamer Ninja-Roboter werden, wenn er einmal groß ist. Sein zuletzt erschienenes Buch ist „Responsive Web Design“.


Translated with the permission of A List Apart and the author.