Heutzutage werden Websites mit den unterschiedlichsten Endgeräten besucht. Vom traditionellen Desktop PC über Laptops, Netbooks, MacBooks bis hin zu iPhones, Windows Phones und Fernsehgeräten samt Spielekonsole. Wie gelingt es aber, dass auch jeder Besucher die Website auf seinen Bildschirm angepasst präsentiert bekommt? Dieser Artikel gibt eine Einführung in Responsive Webdesign mit dem CSS3 Grid Module.

(Web)Seitenverhalten

Die meisten Websites haben ein Problem mit der Vielzahl an Endgeräten. Das Problem liegt im Design des Layouts begründet. Lange Zeit war es Mode, ein fixed Layout zu benutzen. Meist hat man hierzu im CSS folgendes definiert:

.page {
margin: 0px auto;
width: 980px;
}

Die CSS Klasse „.page“ zentriert das jeweilige Element in die Seitenmitte mit einer Breite von 980 Pixeln. Im unteren Beispiel ist die Klasse auf ein „div“ Element angewendet.

980px-595x208

Das funktioniert super, solange die Mindestbreite des Browsers 980 Pixeln entspricht. Als zweites Beispiel nehmen wir ein Blog. Das Beispiel-Blog verwendet WordPress und das Theme hat folgende Layout-Definition

#wrapper { 
width: 960px;
margin: 30px auto;
background: #fff;
border: 1px dotted #000;
}

#main {
width:610px;
padding: 2em 30px;
}

.col-full {
width: 960px;
margin:0 auto;
}

#main.fullwidth, .layout-full #main {
width: 900px;
margin:0 auto;
}

#sidebar {
width:290px;
background: #f2f2f2;
}

#sidebar .secondary {
width:140px;
}

.entry img {
max-width:610px;
}

Dies definiert, dass der eigentliche Seiteninhalt in zwei Spalten mit einer Gesamtbreite von 960 Pixeln angezeigt wird.

kouder_net_-595x363

Oops, my layout sucks!

Smartphones haben in der Regel keine 960 Pixel breiten Displays. Sie bedienen sich aus diesem Grund für die Anzeige eines einfachen Tricks. Websites werden in die Smartphone-Auflösung reinskaliert. Besucher erhalten in der Regel die identische Seite wie auf einem Desktop angezeigt, wenn keine spezielle mobile Version der Seite vorliegt. Auf einem Lumia 800 wird die Seite auf eine Größe von 800 x 480 Pixeln heruntergerechnet.

nokia-595x346

Das funktioniert eigentlich ganz gut, man muss lediglich für die Lesbarkeit in den Text zoomen. Besser wäre jedoch eine Version der Website, die sich optimal auf diesem Display darstellt. Und genau hier kommt Responsive Webdesign ins Spiel.

Responsive Webdesign

Eine vereinfachte Definition von Responsive Webdesign lautet:

Responsive Webdesign ist die Anpassbarkeit einer Webseite auf verschiedene Formfaktoren. Dabei bleiben alle wesentlichen Elemente visuell und funktional erhalten.

Testen wir mal die Responsiveness des Beispiel-Blog. Im Web existieren verschiedene Online Tools, um Responsive Webdesign zu testen. Eines davon ist von Matt Kersley. Sein Tool für das Responsive-Webdesign-Testing zeigt die angegebene URL in verschiedenen Auflösungen.

tested-595x475

Das Tool emuliert keine Endgeräte, sondern dient vielmehr dazu, schnell ein Gefühl dafür zu bekommen wie sich die eigene Webseite in verschiedenen Screen-Größen verhält. Das Resultat für das Blog: Absolut nicht responsive.

Besser machen

Beispielhaft soll eine Textbasierte Seite mit Hilfe von ein paar CSS Hilfsmitteln „Responsive“ gemacht werden. Dazu nimmt man das „article“-Elemente mit folgenden Inhalt:

<article>
<h2>Überschrift</h2>
<p>Inhalt...</p>
<article>

Mit einigen Lorem Ipsum Texten und einer Hintergrundgrafik die oben rechts positioniert ist sieht die Website wie folgt aus:

step-1-595x444

Wenn man mit neuen CSS-Techniken arbeitet, kommt man noch nicht um Vendor-Prefixe herum. Damit spricht man speziell eine noch nicht final standardisierte Implementierung eines Browsers an. Damit das Beispiel nicht zu umfangreich wird, berücksichtigt man vorerst lediglich den Internet Explorer 10 und Webkit-fähige Browser wie Chrome und Safari.

Einfaches Layout mit dem Grid

Fangen wir mit der Positionierung des Inhaltes an. Hierfür nehmen wir ein GridLayout. Das Gridlayout ermöglicht eine Aufteilung eines Elements in Spalten und Zeilen. Neben den üblichen fixen Positionierungsmöglichkeiten wie Pixeln gibt es auch die „fractions“-Einheit. Diese deklariert die Anteile eines verfügbaren Platzes. Der Browser rechnet dementsprechend in Pixel um. Das Layout für das Beispiel soll etwas links versetzt angezeigt werden, mit mehr Platz nach rechts, wie unten im Schaubild nachgestellt.

step-2

Die GridLayout-Definition für das „body“-Element für die Seiteninhalte sieht dann in CSS so aus:

display: -ms-grid;
-ms-grid-columns: 1fr 5fr 2fr;
-ms-grid-rows: 1fr 12fr;

Die „section“ muss nun entsprechend in die richtige Zeile und Spalte platziert werden.

section {
-ms-grid-row: 2;
-ms-grid-column: 2;
}

Hier gibt es noch keine WebKit-Implementierung der W3C Spezifikation, deshalb lediglich der -ms Prefix. Das Resultat im Browser spiegelt das angedachte Layout des Grids wider.

step-3-595x326

Texte, bitte Mehrspaltig

Neben dem traditionellen 4:3 Bildschirm Format sind heute Seitenverhältnisse von 16:10 und 16:9 angesagt. Einen breiteren Screen sollte man auch ausnutzen. Allerdings liest sich Text nicht besonders gut auf einem Breitbildschirm über dessen gesamte Breite. Hier bietet es sich an, diesen mehrspaltig darzustellen. Das ist mit Hilfe des CSS Multi-column Layout Module schnell realisiert:

article {
-webkit-column-count: 3;
-webkit-column-gap: normal;
-webkit-column-rule-color: gray;
-webkit-column-rule-style: solid;
-webkit-column-rule-width: 1px;
-webkit-column-width: auto;
column-fill: auto;
column-gap: normal;
column-rule: 1px solid gray;
columns: 3 auto;
height: auto;
overflow-x: auto;
overflow-y: auto;
margin-bottom: 50px;
}

Der CSS-Code definiert für das „article“-Element eine dreispaltige Textverteilung, mit einer Trennlinie von einem Pixel dazwischen.

step-4-595x415

Media Queries

Die letzte CSS-Technik die wir verwenden sind sogenannte Media Queries . Damit kann der Webentwickler – abhängig von Abfrageparametern – Elemente unterschiedlich stylen.

Dazu wird folgende Grundsyntax verwendet:

@media [type] [and (query) | * ]

Typischerweise fragt man „width“ ,„height“ , „device-width“ , „device-height“ , „aspect-ration“ , „device-aspect-ratio“ und „orientation“ ab. Es gibt noch die Möglichkeit, Farbunterstützung und sogar die Scan-Rate des Fernsehgerätes in der Query anzugeben.

Möchte man zum Beispiel einen Style für ein iPhone deklarieren, so definiert man einfach:

@media screen and (max-device-width: 480px) {
/* hier kommen die CSS Regeln rein */
}

Auch die Beispielseite soll nun Media Queries erhalten. Dazu legt man nun fest, dass bei einer Mindestauflösung von 720p der Text dreispaltig angezeigt wird. In allen anderen Fällen wird der Text zweispaltig und auf Smartphones nur noch einspaltig und ohne GridLayout angezeigt. Im übrigen ist diese Spaltenaufteilung abhängig vom Display völlig willkürlich und soll nur die Möglichkeit der Anwendung von Media Queries verdeutlichen.

Hierfür definiert man zwei Media Queries:

@media screen and (max-width: 480px) {
/* 1-Spaltig, kein GridLayout, 64 Pixel Grafik, Schriftgröße 100% */
}

@media screen and (min-width: 1280px) and (device-aspect-ratio: 16/9) {
/* 3-Spaltig, GridLayout, 512 Pixel Grafik, Schriftgröße 150% */
}

@media screen
{
/* 2-Spaltig, GridLayout, 256 Pixel Grafik, Schriftgröße 120% */
}

 

final-result-595x418

Wir haben für die Demo nicht die Geräte-Werte abgefragt, sondern die momentane Browser-Größe. Für eine richtige Anwendung muss man hier auch die entsprechenden „device-*“-Abfragen nutzen. Zu guter letzt sei noch erwähnt, dass zusätzlich für mobile Geräte noch ein Meta Tag hinzugefügt werden sollte.

<meta name="viewport" 
content="width=device-width,
initial-scale=1,
maximum-scale=1>

Mit dieser Meta-Anweisung wird ein Mobilgerät nicht versuchen, eine Desktop-Seite einfach herunterzuskalieren, sondern das Responsive Design kann direkt angewendet werden.

Ihr seid dran

Dieser Artikel kratzt nur an der Oberfläche von Responsive Webdesign. Wer sich tiefer mit dem Thema beschäftigen möchte, dem sei das Buch Responsive Web Design empfohlen. Es behandelt ausführlich die Erstellung einer Seite nach diesen Prinzipien. Des Weiteren noch eine Alternativ-Empfehlung zum Online Testen einer Webseite namens ScreenFly .

Falls Eure Webseite noch nicht "Responsive" ist und Euch Inspiration fehlt, dann werft doch einen Blick auf die Gewinner des 10k Apart "Responsive Edition" Wettbewerbs .

Weiterführende Links: