Responsive Design mit Media Queries

Responsive Design ist derzeit in aller Munde. Ich bin derzeit an einem Redesign für Chukki.de und bin in diesem zuge auch drauf gestoßen – ein Design, welches sich dem Nutzer – bzw. dessem Endgerät anpasst. Dies kann ein Desktop PC in verschiedenen Auflösungen, ein Notebook, ein iPad oder auch ein iPhone sein. Jedes dieser Geräte hat ein eigenes Nutzerverhalten und benötigt daher eine eigene Sicht auf die Inhalte einer Website, sofern der Betreiber einer Seite daran interessiert ist einen möglichst hohen Grad an Usability zur Verfügung zu stellen. Doch wie stellt man das am besten an?

Anfangszeiten mit Plugins

Vor einigen Jahren, als das iPhone rauskam fingen vor allem viele Blogger damit an ein “Design” für ihre Seite online zu stellen welches möglichst gut lesbar war. Dazu wurden Plugins installiert, welche ein mobiles CSS und passende Funktionen lud um sich den Anforderungen zu stellen: Die Seite sollte schnell geladen werden, die Artikel konnten gut und einfach gelesen werden und im Prinzip sollte jeder damit glücklich gewesen sein. Problem dabei – die eigene, visuelle Identität ging in sehr vielen Fällen verloren wie auf dem Bild links zu sehen.

Responsive Design mit Media Queries

Abhilfe schaffen die in CSS3 geschaffenen Media Queries. Dabei handelt es sich eigentlich um eine Erweiterung der Medientypen aus CSS2 (Screen, Print, etc.) durch weitere Angaben wie Breite oder Höhe eines Ausgabemediums.

Verfügbare Eigenschaften sind:

  • Breite und Höhe des Browserfensters (width / height)
  • Breite und Höhe des Gerätes (device-width / device-height)
  • Orientierung (orientation: landscape / portrait)
  • Bildschirmauflösung
  • uvm.

Quelle und weitere Parameter: http://www.w3.org/TR/css3-mediaqueries/

Die Anwendung dessen ist eigentlich ziemlich Simpel gestaltet. Es gibt verschiedene Anwendungsfälle, entweder durch Einbinden externer .css Dateien

<link rel="stylesheet" media="screen and (min-device-width: 480px)" href="480.css" />

als auch durch direkte CSS-Anweisungen in den HTML Dateien:

@media only screen and (max-device-width: 480px) {   } 

So ist es sehr einfach möglich für die jeweils nötige Auflösung eine eigene CSS Datei anzulegen. Die modernen Browser, welche auch auf den aktuellen mobilen Endgeräten vorhanden sind erkennen die Weiche. Allen anderen, wie der alte Internet Explorer z.B. werden einfach auf die Standard CSS Datei geführt.

Wunderbare Beispiele für Mediaquerie Designs zur Inspiration kann man auf mediaquerie.es finden.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

Kommentar schreiben