CSS, HTML und Javascript mit {stil}

Media Queries: Einfaches responsives Webdesign

Media Queries und Breakpoints für mobile Geräte

Media Queries setzen ein responsives Layout für Webseiten um. Es gibt gute Frameworks, die das Grundgerüst für das Layout automatisch erzeugen (z.B. Gridpack von Erskine Design) – aber Media Queries sind nicht so aufwändig, wie es auf den ersten Blick erscheint.

Der aufwändigste Schritt bei der Entwicklung eines responsiven Webdesigns ist der Plan, wie die Webseite auf unterschiedlichen Monitoren aufgebaut sein soll.

Bei der Planung müssen keinesfalls die typischen Monitorgrößen herangezogen werden – es ist heute schlicht unmöglich und überflüssig, die einzelnen Geräteklassen vom iPhone über ein Samsung-Handy, vom iPad über das iPad Mini bis hin zum Google Nexus gezielt anzusprechen. Besser ist es, zwei oder drei Breakpoints zu setzen, an denen das Layout der Seiten umspringt.

Breakpoints

Ein Breakpoint ist der Punkt, an dem das Design für die Größe des Viewports umspringt. Je kleiner der Viewport oder die Auflösung des Monitors, desto wichtiger ist die Konzentration auf den Inhalt und um so weiter muss das Design in den Hintergrund treten.

Dieses Beispiel enthält drei Breakpoints:

  • Viewports bis zu 760px | Das Design unterhalb von 760 px wendet sich in erster Linie an Smartphones. Die Inhalte folgen einander linear.
  • 760 bis 980px | Die Breite von 760 bis 980 Pixel gilt den Tabletts, aber auch an Browserfenster auf großen Monitoren, die nicht den gesamten Monitor einnehmen.
  • 980 bis 1280 Pixel | Die klassische Browserfenstergröße zwischen 980 bis 1279 px bekommt ein klassisches Zwei-Spalten-Layout.
  • ab 1280 Pixel| Auf großen Monitoren bei einem groß aufgezogenem Browserfenster bleibt das Layout unverändert, nur Schrift und Bilder werden größer.

Meist ist es am besten, mit dem CSS für die kleinen Monitore zu beginnen und danach das Layout für höhere Auflösungen festzulegen. Den kleinen mobilen Geräten soll so wenig Last wie möglich zugemutet werden. Das CSS nutzt Prozentangaben, damit sich das Layout bis zum ersten Breakpoint flexibel an die Größe des Viewports anpasst.

Die Breakpoints bauen aufeinander auf, so dass mit jedem neuen Breakpoint ein Schuss Layout mit hinzukommt, aber keine Stile zurückgesetzt werden müssen.

Ein großer Teil der Besucher wird das Browserfenster nicht in voller Bildschirm-Auflösung aufziehen … diese Prämisse verdient einen Knoten im Taschentuch des Webdesigners.

Das ist eine von unendlich vielen möglichen Unterteilungen. Für die Webseite eines Unternehmens, bei dem die meisten Mitarbeiter mit IE 8 vor klassischen 4x3-Monitoren 1280 x 1024 Pixel Auflösung sitzen, wäre z.B. das Design für eine Fensterklasse von 720 bis 1280 der zentrale Drehpunkt.

Überlegungen zu »responsive Webdesign« bei den Netzialisten

Alternative für alte IEs

Browsern, die Media Queries nicht unterstützen – Internet Explorer bis einschließlich IE8 – könnten wir z.B. das Layout für Browserfenster mit 720 bis 939 Pixel vorsetzen.

IE9 braucht ebenfalls einige zusätzliche CSS-Regeln, denn das Layout benutzt das Flexmodell, das erst ab IE 10 unterstützt wird.

Responsives Design für Handys

Es macht Sinn, mit dem Layout der Webseite für die kleinen Monitore anzufangen – für die kleinen Monitore muss sich das Design in besonderer Weise auf die Inhalte konzentrieren. Beim Bottom-Up-Entwurf wird bei jedem Schritt das zusätzliche Platzangebot effizient ausgenutzt.

Per Default zeigen Handys die Seite in der vollen Breite der Inhalte und zoomen die Seite dazu aus.

In den HTML-Header wird darum ein Meta-Tag gesetzt, das dieses Verhalten verhindert:

Default-Verhalten bei Handys unterbinden
<meta name="viewport" content="width=device-width, 
   initial-scale=1.0, 
   maximum-scale=1.0, 
   user-scalable=no">
  • Auf dem Handy stehen die Meta-Informationen zur Seite vorzugsweise über den Inhalten.
  • Inhalte oben halten: Der Besucher sollte sofort einen ersten Beitrag lesen können – möglichst ohne zu scrollen.
  • Da die Beiträge im Design für Smartphones linearisiert werden, ist ein Sprung vom Fuß der Seite zum Seitenkopf eine nette Geste.

Nutze den Platz

Für die nächste größe Geräteklasse kann der zusätzliche Platz dann mit weiteren Informationen ausgelegt werden. Dabei gibt es eine Prämisse: Der Text in den Beiträgen darf nicht zu breit laufen. Der Text sollte eine Breite von 10 bis 12 Wörter nicht überschreiten, denn sonst fällt uns das Lesen zu schwer und Besucher verlieren die Geduld und verlassen die Seite.

Text ist von Haus aus responsive: Ein Text läuft so breit wie seine Box. Wenn die Box schmaler oder breiter wird, bricht Text automatisch um.

Bilder hingegen und Video – z.B. von Vimeo oder YouTube – kommen in festen Breiten. Für Bilder gibt es aber ein einfache Lösung, bei der sich die Bildgröße an das Design anpasst.

Bilder und Video in responsiven Webseiten

Der Stil img { width: 100%; height: auto; } für img-Tags sorgt dafür, dass sich die Bilder an die Größe ihrer Boxen anpassen, wenn das Layout kleiner oder größer aufgezogen wird.

IE8 braucht für img in responsiven Designs noch eine CSS-Regel als Sonderlocke:

img { 
   width: auto; /* IE8 */
}

In einem Content Management System wie WordPress kann man über einen angepassten Stil hinaus tatsächlich eine kleinere Auflösung für die Bilder einsetzen, damit das Laden der Seiten – vor allem auf den mobilen Geräten – schneller abläuft.

Vimeo- und youTube-Videos lassen sich nicht so einfach durch eine CSS-Regel in responsive Webseiten einsetzen: Die Videos lassen das responsive Design gnadenlos platzen. Eine Lösung für responsives Video auf Javascript-Basis bietet fitvids.

Das war schon das CSS für das Grundgerüst der Seite für Browserfenster mit mind. 1280 Pixeln Breite. Die Breite wird nur einmal durch die Klasse .reframe festgelegt. Im Grunde genommen muss das CSS für ein responsives Webdesign kaum größer werden als ein Layout für große Monitore ohne Breakpoints.

Media Queries in drei Schritten

Responsives Stylesheet
/* Kleine Monitore */
img { width: 100%; height: auto }
.reframe { max-width: 96%; margin: 0 auto }
ul#mainmenu { 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
#home { background: salmon }
footer { background: black }
…

/* Tabletts */
@media only screen and (min-width: 760px) {
	.reframe { max-width: 760px }
…
}

/* Mittlere Monitore */
@media only screen and (min-width: 980px) {
	.reframe { max-width: 980px }
}

/* Große Monitore */
@media only screen and (min-width: 1280px) {
	.reframe { max-width: 1280px }
…
}

Die Media Queries überschreiben die CSS-Stile für das Grundgerüst – hier natürlich nur plakativ. Damit direkt sichtbar ist, in welches CSS der Browser nun gerade fällt, sind im Kopf der Seite farbige Streifen.

Das Feilen an den Feinheiten kann beginnen … 

Pretty Simple – einfaches Grundgerüst für responsive Webseiten

Beispiel float für 2, 3, 4 Spalten – ein responsives Grid