Responsive Webdesign

Flexibel angepasst

Ein neuer Trend im Webdesign ist das Responsive Design: Webdesigns, die auf die unterschiedlichen Bildschirmgrößen und sonstigen Beschaffenheiten der Ausgabegeräte reagieren.

Bei Responsive Webdesign, frei übersetzt vielleicht mit „reagierendes Webdesign“, geht es um ein flexibles Design, das sich an das Medium anpasst, in dem es dargestellt wird. Die Notwendigkeit für Responsive Webdesign ergibt sich dadurch, dass Webseiten auf immer unterschiedlicheren Geräten betrachtet werden – vom riesigen Desktop-Monitor, den Netbooks über iPads bis hin zu Smartphones. Besonders Letztere sind ein wichtiges Thema: Immer mehr Kunden wollen Webseiten, die eben auch auf Smartphones eine gute Figur machen.

Für den mobilen Zugriff können Sie auch eigene Subdomains einrichten, über die Sie dann spezielle Inhalte ausliefern. Damit hat man aber natürlich nicht das Problem der so unterschiedlichen Browserfenster bei Desktop-Rechnern gelöst. Und auch nicht bei allen Projekten ist der Aufwand einer eigenen Subdomain angebracht. Genau hier setzt das Responsive Webdesign an, das darauf basiert, dass ein und derselbe Inhalt je nach Beschaffenheit des Ausgabemediums anders aufbereitet wird.

Media Queries

Über CSS3 Media Queries können Sie gesonderte CSS-Angaben machen, je nachdem, welche Größe das Browserfenster hat; also bei viel Platz beispielsweise die Inhalte als Vierspalter anzeigen lassen, bei weniger Platz untereinander. Durch folgende Zeile wird für Bildschirme mit einem Browserfenster, das nicht breiter als 600 Pixel ist, das Stylesheet klein.css eingebunden:

Codebeispiel:

<link rel="stylesheet" href="klein.
css" media="screen and (max-width: 600px)" />

Sie sehen, hier steht eine detailliertere Angabe hinter media, als man es aus CSS 2.1 gewohnt ist. Um HTTP-Requests zu sparen, empfiehlt sich die @media-Regel, die innerhalb des Stylesheets steht.

Codebeispiel:

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

Neben max-width können Sie auch min-width benutzen und dazu gibt es natürlich die umgekehrten Entsprechungen max-height und min-height.

Ebenfalls häufig eingesetzt werden max-device-width oder min-device-width. Damit lassen sich eigene Formatierungen je nach Breite des Ausgabegeräts vornehmen. Bei einem Desktoprechner bezieht sich max-device-width auf die Auflösung des Monitors, max-width hingegen auf die Breite des Browserfensters.

Nicht ohne mein Meta-Tag

Bei Smartphones funktioniert es ein bisschen anders. Smartphones stellen viele Webseiten dar, die eigentlich nicht für diese Geräte optimiert sind. Sie behelfen sich, indem sie die Webseiten so stark verkleinern, dass sie in ihrer Gesamtheit auf den Smartphone-Bildschirm passen.

Wenn der Benutzer etwas genauer sehen möchte, kann er einen Bereich zoomen. Die Breite, die Smartphones anzeigen können, nennt man auch den Viewport. Er ist unterschiedlich groß, bewegt sich zwischen 800 Pixel (Android) und 960 Pixeln (iPhone). Auf diesen Viewport beziehen sich die max-width- beziehungsweise min-width-Angaben in Media Queries. Deswegen verwendet ein Smartphone nicht die Styles, die über @media screen and (max-width: 600px) {} spezifiziert sind. Schließlich hat das Smartphone ja einen Viewport von über 800 Pixeln.

Um das zu ändern, müssen Sie ein Meta-Tag in Ihre Webseite einfügen, das folgendermaßen lautet:

Codebeispiel:

Damit wird der Viewport optimal verkleinert. Mit dieser Meta-Angabe interpretiert jetzt das Smartphone die Style-Angaben, die innerhalb von @media screen and (max-width: 600px){} stehen.

Noch einen weiteren Vorteil hat das Meta-Element: Dadurch ist der anfängliche Zoom deaktiviert und Smartphones zeigen die Seite nicht mehr so verkleinert an – und genau das ist gewünscht bei einer Seite, die für kleine Bildschirme optimiert ist. Wenn man das oben erwähnte Meta-Tag einfügt, können folgende – von Peter-Paul Koch vorgeschlagene – Media Queries eine sinnvolle Basis für unterschiedliche Formatierungen sein:

Codebeispiel:

/* Grundlegende allgemeine
Formatierungen */
@media all and (max-width: 600px) {
/* Angaben fuer Smartphones und kleine
Bildschirme */
}
@media all and (min-width: 600px) {
/* Formatierungen fuer groessere
Bildschirme */
}

Zuerst schreiben Sie die allgemeinen CSS-Angaben, die unabhängig vom verfügbaren Platz sind. Dann kommen innerhalb von Media Queries die Viewport-spezifischen Angaben: Zuerst die für Smartphones und kleine Browserfenster, dann die für Desktop-Rechner mit größerem Browserfenster.

width oder device-width?

Eine andere Methode, um gesonderte Stylesheets für Smartphones zu definieren, setzt auf device-width, also beispielsweise so:

Codebeispiel:

Damit werden die Formatierungen nur angewandt, wenn die Größe des Bildschirms (nicht des Viewports) zwischen 320 und 480 Pixeln liegt. Damit erreicht man nur Smartphones und lässt alle Desktoprechner mit kleinem Browserfenster außen vor. Das funktioniert wunderbar für iPhones, aber nicht auf allen Android-Smartphones, die teilweise eine wesentlich größere Displaygröße angeben und damit das angegebene Style-sheet nicht laden.

Shi Chuan (www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/ ) schlägt vor, diese Angabe zu erweitern, um mehr Android-Smartphones anzusprechen:

Codebeispiel:

@media only screen and (min-device-
width: 320px) and (max-device-width: 569px) {}

Nach unseren Tests ist dieser Wert für max-device-width allerdings nicht immer ausreichend. Zuverlässiger erscheint hingegen die Abfrage nach max-width in Kombination mit der oben beschriebenen Meta-Angabe.

Bild vergrößern 434 496 http://img4.magnus.de/image-r434x496-C-75649250-48686911.jpg Das Layout der 320-and-Up-Projektvorlage passt sich dann aber auch an mittlere oder automatisch an größere Browserfenster an. © Internet Magazin

© Internet Magazin

Das Layout der 320-and-Up-Projektvorlage passt sich dann aber auch an mittlere oder automatisch an größere Browserfenster an.

Diese Lösung wird von verschiedenen renommierten Seiten empfohlen, beispielsweise bei der Projektvorlage 320 ans Up oder aber auch beim Template Mobile Boilerplate.

Außerdem bietet die Variante mit max-width den Vorteil, dass sie ebenfalls auf kleinen Browserfenstern auf dem Desktoprechner funktioniert und sich einfacher erstellen lässt, weil man die verschiedenen Versionen auf einem Desktop-Rechner testen kann.

Media Queries funktionieren in allen modernen Browsern und selbstverständlich auch auf den Webkit-Derivaten, die auf iPhones und Android-Smartphones zum Einsatz kommen. Der Internet Explorer unterstützt Media Queries ab Version 9. Für ältere IEs gibt es Abhilfe über JavaScript.