Responsive Webdesign (II)

Media Queries

Media Queries sind neben den flexiblen Layoutrastern und den anpassungsfähigen Webinhalten die dritte wichtige Komponente im responsiven Webdesign.

Mit der Einführung des Medientyps wurde die Möglichkeit geschaffen, einer Website mehrere Stylesheets zuzuordnen, die abhängig vom Ausgabegerät Verwendung finden. So können unterschiedliche Stylesheets für den Druck (media="print") oder die Ausgabe auf einem Bildschim (media="sreen") eingesetzt werden. Wird der Medientyp nicht definiert, gelten die CSS-Anweisungen automatisch für alle Ausgabetypen und entsprechen somit media="all". Um zu vermeiden, dass es zu Problemen mit Browsern kommt, die Media Queries nicht verstehen, verwendet man das Schlüsselwort only, das dafür sorgt, dass der gesamte Anweisungsblock vor diesen Browsern verborgen bleibt. Es werden von diesen Browsern nur CSS-Anweisungen außerhalb der Media Queries ausgeführt.

Die Media-Queries kennen neben dem Medientyp auch noch andere Eigenschaften, deren wichtigste die Viewportbreite bzw. -höhe sind (width bzw. max-width und min-width und height bzw. max-height und min-height). Mit ihnen lassen sich die Media Queries bereits sehr gut an unterschiedliche Ausgabegeräte anpassen.

Am einfachsten ist es, die Media Queries in das Stylesheet einzubauen. Dies sieht beispielsweise folgendermaßen aus:

/* Anweisungen für Smartphones*/ 

 @media only screen and (min-width: 320px) { 

.nav {width: 100%; margin-bottom: 1em;} 

.main {width: 100%;} 

}

    

Wichtig ist dabei, dass es eine Fallback-Lösung für alle Geräte bzw. Browser gibt, die Media Queries nicht interpretieren können. Die entsprechenden CSS-Anweisungen müssen dabei natürlich außerhalb eines Media Queries stehen. In der Regel ist dies die Basisversion der Website.

Vorgehenweise bei responsivem Design

Der klassische Ansatz bestand darin mit der Desktopversion zu beginnen und sich nach unten zu arbeiten. Dagegen spricht der starke Anstieg der Nutzung mobiler Geräte gegenüber Desktopgeräten. Das Designen für moblie Geräte macht es zu einem notwendig, sich auf das Wesentliche zu beschränken, bietet aber auch ganz neue Möglichkeiten durch das Einbeziehen von Anwendungen, die am Desktop nicht zur Verfügung stehen (z.B. GPS, Bewegungssensor, Verbindung zu social media etc.). Der Übergang zu größeren Geräten bietet wiederum die Möglichkeit, deren spezielle Eigenschaften und Stärken zu nutzen. Aus diesen Gründen setzt sich zunehmend der Ansatz 'Mobile first' durch.

Mobile first

Mobile first stellt radikal den Inhalt in den Vordergrund und zwingt dazu , die inhaltlichen Prioritäten zu klären. Wenn man mit dem Ergebnis im kleinsten Viewport zufrieden ist, vergrößert man das Browserfenster, bis das Design nicht mehr passt. Das ist der Punkt, an dem ein neues Layout benötigt wird – ein Breakpoint.

Breakpoints

Es gibt keine normierten Breakpoints und diese hängen auch von der Entwicklung neuer Geräte ab. Prinzipiell könnte man für jede Gerätegröße einen eigen Media Query erstellen, was aber bald uferlos wird. Als Anhaltspunkt können jedoch folgende Werte gelten:

• @media only screen and (min-width: 320px) { … }
• @media only screen and (min-width: 480px) { … }
• @media only screen and (min-width: 768px) { … }
• @media only screen and (min-width: 992px) { … }
• @media only screen and (min-width: 1200px) { … }

• @media only screen and (max-width: 1200px) { … }
• @media only screen and (max-width: 992px) { … }
• @media only screen and (max-width: 768px) { … }
• @media only screen and (max-width: 480px) { … }
• @media only screen and (max-width: 320px) { … }

Layout-Patterns für unterschiedliche Ausgabegeräte

Als Layout-Patterns bezeichnet man Muster für die Darstellung responsiver Websites, die sich im Laufe der Zeit herauskristallisiert haben. Auf der folgenden Seite sind diese Patterns beschrieben und können anhand von praktischen Beispielen nachvollzogen werden.