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:

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

Labels: , , , , , , , ,