Basis-Vorlage für Responsive Webdesign – CSS3 Media Queries

Das Thema Responsive Webdesign hört man inzwischen an jeder Ecke im Webdeveloper-Bereich. Eigentlich ist das Thema ziemlich einfach abgearbeitet, doch man kann sich je nach Anwendungszweck schon etwas schwerer tun. Vor allem dann, wenn es um eine bestehende Website geht, die vielleicht ohne ein Grid-System auskommen muss. Doch darum soll es hier heute nicht gehen. Viel mehr steht für mich die Leichtigkeit im Vordergrund, mit der man selbst einen einfachen WordPress-Theme oder eine einfache Single-Page auch für mobile Geräte angemessen lauffähig macht.

Man kann sich hier natürlich ziemlich einen abreißen, wenn man beispielsweise meine vollständige Vorlage „Responsive Webdesign – CSS3 Media Queries – CSS-Vorlage für Browser und mobile Geräte“ verwendet. Doch wenn man nicht gerade ein ziemlich dickes Projekt mit richtig feinem Grid-System benutzt, dürfte das ein bisschen zu aufgeblasen sein. Natürlich kann man sich aus der erwähnten Vorlage auch alles rausstreichen, worauf man eher keine Lust hat. Doch es geht auf noch etwas einfacher, nämlich mit der Vorlage in diesem Beitrag.

„Für welche Geräte soll die Website überhaupt angepasst werden?“ – Sollte bei jedem neuen Projekt immer als erstes auf dem Plan stehen. Nicht, weil man vielleicht auf unnötigen Ballast wie Flash achten sollte, sondern vielmehr weil das Webdesign nicht nur auf die passende Auflösung skaliert werden sollte. Es gibt hierbei den Ansatz „Mobile First“, der auch wirklich gut ist. Nur eben etwas schwieriger wenn es sich um ein bestehendes Projekt handelt.

Doch nun mal Butter bei die Fische: Welche Auflösungen sind wichtig?

Mobile Viewport 320+ Pixel
Mobile Viewport 480+ Pixel
Tablet Viewport 768+ Pixel
Desktop Viewport 1.000+ Pixel
Desktop Viewport 1.300+ Pixel

Wie ihr seht, teile ich den „Portrait-Modus“ von Smartphones (320+ Pixel) und den „Landscape-Modus“ (480+ Pixel) in eigene Bereiche ein. Würde man hier als Basis die 480 Pixel nehmen, hätte man auf einem 320-Pixel-Screen keinen Spaß, denn leider wird entweder die Fläche auf Basis-Breite skaliert oder man sieht schlichtweg nicht alles. Umgekehrt würde es jedoch klappen, lässt man die 480-Pixel unter den Tisch fallen, muss man eben im Landscape-Modus etwas mehr Freiraum in Kauf nehmen. Ich bleibe bei beiden Versionen, da immer mehr Leute Webseiten mit Smartphones ansurfen und es toll ist, wenn man so unnötiges Zoomen vermeiden kann.

Für Tablets im Portrait-Modus (768+ Pixel) verwende ich bewusst 768 Pixel, da es für Tablets sehr viele Auflösungen gibt und bei den Verkaufszahlen sowohl des iPad mit 768 x 1.024 Pixel sowie Android-Geräte mit 800 x 1.280 Pixel ganz oben stehen. Zugegeben, es gibt auch noch unzählige Geräte mit z. B. 600 x 1.024 Pixel oder auch 600 x 800 Pixel, doch die müssen hier noch mit der 480+-Variante vorlieb nehmen. Den Landscape-Modus deckt hierbei den Desktop-Variante für 1.000+ Pixel mit ab. Etwas aufhübschen kann man (muss man aber nicht) Grafiken nun noch, indem man z. B. Logos als Backgrounds einbindet und nun mit doppelter Größe für „Retina-Displays“ bzw. Displays mit höherer Device-Pixel-Ratio verwendet und runterskaliert. Auf diese „Spielerei“ gehe ich jetzt jedoch bewusst nicht ein, da dies nachträglich immer möglich ist und erst eimmal die Ladezeiten, Grund-Usability sowie eben das Einstiegs-Set im Vordergrund stehen.

Die Beispieldaten kommen unter Anderem bei VisualBloc.com zum Einsatz. Die Website ist ein schönes Beispiel für die einfache Umsetzung von Responsive Webdesign für Mobile, Tablet und Desktop. Hierbei stand die Einfachheit im Vordergrund, so hat die gesamte Theme-Erstellung von Idee (kleiner Wutanfall am Abend mit „Free-Grid-Themes“), ersten getippten Zeichen bis zur Fertigstellung nur rund 3 Stunden gedauert. Das wäre natürlich auch noch schneller gegangen, doch zwischendurch entschied ich mich noch für das neue „Logo“ und musste noch etwas Eureka gucken. *lach*

 

Angaben für euren HTML-Header am Beispiel für WordPress-Themes:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="144x144" href="<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" type="image/png" href="<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/apple-touch-icon.png" />

 

Angaben für eure CSS-Datei (z. B. in der style.css bei WordPress-Themes):

/* -----------------------------------------------
---- Base ----------------------------------------
------------------------------------------------*/

/* Basic-Styles - e. g. for 960/1.000 Pixel Wrap */



/* -----------------------------------------------
---- Media Queries -------------------------------
------------------------------------------------*/

/* Mobile/Smartphone - Portrait-Modus */
@media
only screen and (min-width: 320px) and (max-width: 479px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
}

/* Mobile/Smartphone - Landscape-Modus */
@media
only screen and (min-width: 480px) and (max-width: 767px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
}

/* Mobile/Tablets - Portrait-Modus */
@media
only screen and (min-width: 768px) and (max-width: 959px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

 

Optional: Styles für Viewports, die breiter als 1.300 Pixel sind (z. B. 19″ Widescreen-Monitore). Einfach am Ende des CSS-Files anhängen (aufsteigende Reihenfolge der Größen).

/* Desktops - Viewport 1.300+ Pixel */
@media
only screen and (min-width: 1300px) {
}

 

Optional II: Um jetzt noch explizit Styles für das iPad 3 („New iPad“) mit Retina-Display vorzuhalten, müsstet ihr den folgenden Schnipsel direkt hinter dem Tablet-Absatz in der CSS-Datei einfügen. Beachtet hierbei, dass das Retina-iPad hierbei nicht die doppelte Fläche angezeigt bekommt, sondern nur die Pixel „zusammengefasst“ werden und die Fläche dennoch bei 768 x 1.024 Pixel bzw. 1.024 x 768 Pixel bleibt. Ebenso verhält es sich auch beim Retina-MacBook (siehe: „Das Apple MacBook Pro Retina und die CSS3 Media Queries„).

@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
}