Die Technik von heute ändert sich schnell. Was gerade absolut im Trend liegt, kann morgen schon völlig veraltet sein. Eine Auflösung im 4:3 Format von 1024:768 Pixel, wie früher viele Röhrenmonitore hatten, ist heute eher eine Seltenheit und nur noch im Museum zu finden.
Aktuell wächst der Markt rasant, immer neue Geräte erscheinen: SmartPhones, höher auflösende Geräte, wie z.B. der Apple iMac, das iPad oder auch die zahlreichen Android und Windows-Phone-Geräte. Auch die Bedienung ändert sich von der reinen Maus-Bedienung weg zu neuen Techniken, wie der Touch-Bedienung.
Dies erfordert neue Konzepte für Webentwickler. Nicht der Benutzer stellt seinen Monitor richtig ein, sondern die Website passt sich möglichst flexibel an den Monitor oder das Gerät an. Responsive Webdesign ist in aller Munde.
Dabei helfen u.a. JS Frameworks, wie jQuery und vorallem auch CSS3 Media Queries um dynamisch auf die Gegenheiten zu reagieren.
Media Queries + jQuery helfen www.nicolas-stey.de z.B. eine speziell für Smartphone optimierte Version der Website bereitzustellen.
Im Folgenden zeige ich ein paar Beispiele, was mit CSS3 Media Queries möglich ist.
In CSS2 konnte man für ein bestimmtes Medium CSS ausliefern, z.B. ALL, SCREEN oder PRINT
<link rel="stylesheet" type="text/css" href="print.css" media="print" title="PrintStyle" />
Folgende Anweisung sorgt dafür, dass die Anweisung des .containers "border: 1px solid red" nur für Fenster / Bildschirme greift, die eine maximale Breite von 800 Pixel haben.
// Größe des Fensters
@media screen and (max-width: 800px) {
.container {
border: 1px solid red;
}
}
// Auflösung des Bildschirms
@media screen and (max-device-width: 800px) {
.container {
border: 1px solid red;
}
}
Auch externe CSS-Stylesheets lassen sich über Media Queries bedingt einbinden.
<link rel="stylesheet" media="screen and (max-width: 800px)" href="responsive.css" />
Folgende Anweisungen sind u.a. noch möglich:
(min-device-width: 250px) (min-width: 250px) (max-device-width: 850px) (max-width: 850px) // Orientierung des mobilen Gerätes (orientation: landscape) (orientation: portrait) // Um z.B. höherauflösendere Bilder nachzuladen kann man speziell die Retina-Auflösung des iPhone ansprechen (-webkit-min-device-pixel-ratio: 2) (min-device-pixel-ration: 1.5)
Bei Smartphones sollte man den ViewPort des Gerätes auf 1 setzen, das bewirkt, dass es keine verkleinerte Darstellung zeigt, sondern die tatsächlichen Größenangaben verwendet.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// Weitere Optionen
meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">