Die Theorie der responsiven Webseiten

Inhaltsverzeichnis

Eine Webseite ist responsiv, wenn sie ihre Darstellung unterschiedlichen Geräten anpassen kann. Allerdings gehört mehr dazu, als ein paar Änderungen am CSS vorzunehmen. Themen wie "Mobile first" sind in aller Munde und bei Weitem nicht nur eine technische Herausforderung.

Statistiken belegen den eindeutigen Trend der steigenden Zahlen mobiler Internet-Surfer. Um Mobil- und Desktopgeräte gleichmäßig gut bedienen zu können, kann responsives Webdesign (RWD) einen perfekten Kompromiss zwischen technischem Aufwand und Nutzen bieten. Eines der zentralen Merkmale von RWD ist das der gleichbleibenden HTML-Ausgabe auf jedem Gerät, denn es handelt sich im Prinzip immer um dieselbe Webseite. Wie sie dargestellt wird, kann jedes Gerät selbst entscheiden, indem es Elemente wie Container oder Menüs den Gegebenheiten entsprechend anpasst.

Ein Smartphone-Bildschirm bietet längst nicht so viel Platz wie der eines großen Desktop-PCs, was ein Umdenken bei vielen Designern erfordert. Ein mittlerweile weit verbreiteter Ansatz, das Problem zu lösen, ist "Mobile first". Dabei berücksichtigen die Verantwortlichen zuerst, wie sich die Webseite auf den kleineren Geräten verhalten soll, was darzustellen ist und wie der Besucher letztlich durch die Seite navigieren soll. Erst danach optimieren sie die mobile Webseite Schritt für Schritt für die größeren Brüder.

Dieses sogenannte "Progressive Enhancement"-Verfahren kommt bei der Entwicklung sehr häufig zum Einsatz, denn es bringt einige Vorteile mit sich:

• Durch den eingeschränkten Platz (in der Regel bietet ein Smartphone nur etwa 20 Prozent der verfügbaren Fläche eines Desktops), sind die Designer gezwungen, sich auf das Wichtigste zu konzentrieren. Auch auf den kleinsten Geräten sollen die Kerninformationen der Webseite zur Verfügung stehen und vor allem einfach zu finden sein.
• Durch den progressiven Enhancement-Prozess lässt sich sicherstellen, dass Informationen häppchenweise dazukommen und keine unnötige Informationsflut entsteht.
• Es ist einfacher, der Webseite Details hinzuzufügen, als welche zu entfernen. Hat sie einen komplexen Aufbau, gestaltet es sich vergleichsweise schwierig, Elemente zu entfernen, ohne den Desktop leer wirken zu lassen. Elemente zu verstecken, also auf display:none zu setzen, ist zwar einfach, widerspricht allerdings dem Prinzip.

Einmal angenommen, es käme folgende Media Query zum Einsatz, um bei geringen Auflösungen die Inhalte einer Seite untereinander darzustellen:

/* Desktop first - nicht empfohlen! */
.spalte {
    float: left;
    width: 50%;
}

@media all and (max-width: 500px) {
    .spalte {
        float: none;
        width: auto;
    }
}

Der Code hat gleich mehrere Nachteile, denn zum einen ignoriert er die älteren mobilen Browser, die keine Media Queries unterstützen, und zum anderen kann er durch viele Redundanzen schnell komplex werden. Eine elegantere und sauberere Lösung wäre es, von einer mobilen Version auszugehen und für größere Auflösungen Anpassungen vorzunehmen:

@media all and (min-width: 500px) {
    .spalte {
        float: left;
        width: 50%;
    }
}

Dieser Ansatz ist viel kürzer und bleibt beim Hinzufügen weiterer Auflösungen und Erweiterungen vergleichsweise überschaubar.

Unterschiedliche Darstellungen realisieren

Die in CSS3 eingeführten Media Queries bieten eine Vielfalt an Möglichkeiten, Regeln für unterschiedliche Auflösungen zu erstellen. Sie lassen sich sowohl innerhalb der einzelnen Stylesheet-Dateien als auch beim Einbinden dieser einsetzen:

<link rel="stylesheet" type="text/css" href="desktop.css" 
media="screen and (min-width: 768px)" />