Eine Webseite für alle Gerätegrößen und Klassen? Und das ohne viele Scripte oder teure Speziallösungen? Es geht. Und in nur drei Punkten lassen sich die Grundlagen zusammenfassen.

1. <meta name=“viewport“ content=“width=device-width“/>

Damit überhaupt die korrekten Daten zur Verfügung stehen wird der Viewport auf die maximale tatsächliche Gerätebreite gesetzt. Viele Smartphones und Tablets versuchen nämlich durch geschicktes Zoomen und Skalieren Webseiten zu „optimieren“. Um vernünftig arbeiten zu können müssen wir ihnen das abgewöhnen.

2. Breakpoints definieren

Im zweiten Schritt muss überlegt werden welche Auflösungsgrößen das Layout „brechen“. Ob das nun anhand der häufigsten Auflösungen mobiler Geräte oder den Elementen der Webseite definiert wird ist eigentlich egal.

Beispiel A: Das Menü ist horizontal und wird bei Auflösungen kleiner 1024 Pixeln in der Breite skaliert. Also wird 1024 Pixel als Breakpoint definiert unterhalb dem das Menü in eine vertikale Liste umgewandelt wird.

Beispiel B: Ein Großteil der Besucher einer Webseite verwendet das IPad mit einer Auflösung von 768 x 1024 Pixeln (im Portrait-Modus). Alle Elemente sind zwar noch lesbar, jedoch könnte das Layout optimiert werden. Also wird eine breite von 768 Pixeln als Breakpoint definiert unterhalb dem einige Elemente anders positioniert und skaliert werden.

Aber wie bringt man der Webseite nun bei, mit diesen Breakpoints etwas anfangen zu können?

3. CSS Media Queries

Media Queries sind die Antwort auf die Frage im letzten Abschnitt. Media Queries gibt es bereits seit CSS2 in rudimentärer Form. Seitdem war es möglich für verschiedene Ausgabegeräte verschiedene Stylesheets anzugeben. Heutzutage sind die Möglichkeiten da schon sehr viel differenzierter. Mittlerweile lassen sich durch Media Queries innerhalb eines Stylesheets sehr feine Unterscheidungen treffen.

@media only screen and ( max-width: 1200px ) and ( min-width: 800px ) {}

Dies ist ein Beispiel für eine kombinierte Media Query, die für alle Geräte mit einer Bildschirmausgabe (screen) und einer Auflösung zwischen 800 und 1200 Pixeln zutrifft. Innerhalb der Klammern dieser Media Query stehen dann alle Styleangaben die für diesen Auflösungsbereich gültig sein sollen.

Dabei sollte man im Hinterkopf behalten, das alle Styleangabe, die nicht in Media Queries stehen immer gültig sind.

Natürlich bin ich nicht der erste, der hierzu etwas schreibt, und vermutlich findet sich sehr viel Ähnliches auch auf anderen Webseiten. Eine kleine Auswahl an Ressourcen die ich hilfreich finde gibt es hier:

• http://www.splio.com/responsive/
  (Sehr gute Infografik zum Thema, beinhaltet eine Liste mit gerätespezifischen Breakpoints)
• http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
  (Ebenfalls ein 3-Schritte-Guide, allerdings anders aufgeteilt)
• http://wiki.selfhtml.org/wiki/CSS/Media_Queries
  (Details zu Media Queries)