Responsive Webdesign mit Media Queries

Spätestens seit dem Siegeszug des iPhones wurde die Frage nach einem optimierten Website-Design für verschiedene Geräte und Displaygrössen immer wichtiger. Grosse Seiten wie Facebook oder Twitter haben schon länger eigens für Smartphones angepasste Subdomains (meistens über mobile.domain.com oder m.domain.com aufrufbar).

Wer sich also mit Webdesign auseinander setzt wird früher oder später mit diesem Thema konfrontiert werden.

Auch ich habe letzte Woche einige Artikel und Anleitungen über dieses Thema gelesen und auch selber gleich ein wenig herumprobiert. Speziell möchte ich hier auf einen Artikel auf kulturbanause.de verweisen, welcher wirklich sehr einfach und verständlich auf dieses Thema eingeht.

Es gibt verschiedene Lösungsvarianten für diese Aufgabe, ich werde mich in diesem Artikel auf CSS Media Queries beschränken.

CSS Media Queries bisher
Bereits in CSS 2.0 (vielleicht sogar schon in CSS 1.0) gab es sie, die Media Queries. Mit deren Hilfe konnte man verschiedene CSS Files für verschiedene Medientypen angeben. So kann man z.B. ein spezielles CSS File schreiben welches für die Druckansicht gilt und unnötige Elemente wie Werbung, Hintergrundbilder oder die Navigation ausblendet.

Verwendung des media attributs im HTML Header


<link href="style.css" media="screen" rel="stylesheet" type="text/css"></link>
<link href="print.css" media="print" rel="stylesheet" type="text/css"></link>

Verwendung des media attributs im CSS Code


body { background-color: #000; }

@media print {
body { background-color: none; } /* überschreibt die obere Regel falls die Seite im Medium "print" angeschaut wird */

Gültige Media-Typen gemäss w3c

Media Queries in CSS 3.0
In CSS 3.0 wurden die Funktionen dieser Media Queries erweitert. So ist es nun auch möglich detailliertere Infos zum Gerät zu erhalten, sowie verschachtelte Abfragen zu erstellen.

Die hilfreichsten Angaben sind folgende:

  • width
    Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
    Beispiel:
    @media handheld and (min-width: 20em) { ... }
  • height
    Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
    Beispiel:
    @media screen and (max-height: 700px) { … } 
  • device-width
    Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
    Beispiel:
    @media screen and (device-width: 800px) { … }
  • device-height
    Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
    Beispiel:
    @media screen and (device-height: 400px) { … }
  • orientation
    Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
    Beispiel:
    @media all and (orientation:portrait) { … }

Anhand der Beispiele sieht man auch gleich wie diese Abfragen verknüpft werden können.
Auch hierzu gibt es eine offizielle Spezifikation vom w3c.

Media Query Beispiele
http://mediaqueri.es/

Responsive Design Frameworks
http://csswizardry.com/inuitcss/

Interessante Artikel zum Thema

2 Gedanken zu „Responsive Webdesign mit Media Queries“

  1. Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
    Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:

    http://www.colibrimedia.de/responsive_design/example.html

Leave a Reply