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 und wird durch das CSS in einer @media-Regel beschrieben:

.column { width: 90%; margin: 1em auto; }
.column h2 { font-size: 1.2em; color: firebrick; }

@media only screen and (min-device-width: 40em) {
	.column { width: 48%; float: left; }
}

In einem Breakpoint werden nur Änderungen gegenüber dem vorangegangenen Regeln aufgeschrieben, also muss .column h2 in der @media-Regel nicht erneut notiert werden.

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.

media-query

Dieses Beispiel enthält drei Breakpoints:

  • Viewports Handy und Tablett Porträt | Das Design innerhalb von ~20em bis ~40em wendet sich an Smartphones und Tabletts im Portrait-Modus (hochkant). Die Inhalte folgen einander linear.
  • Breakpoint1
    Tablett Landscape |
    Die Breite von ~40em bis ~60em gilt Tabletts im Landscape-Modus (Querformat), aber auch an Browserfenster auf großen Monitoren, die nicht den gesamten Monitor einnehmen.
  • Breakpoint2
    Mittelgroßes Browserfenster |
    Die klassische Browserfenstergröße zwischen ~60em bis ~80em bekommt ein klassisches Drei-Spalten-Layout.
  • Breakpoint3
    Großes Browserfenster |
    Auf großen Monitoren bei einem groß aufgezogenem Browserfenster gibt es ein Vier-Spalten-Layout.

Meist ist es am einfachsten, mit dem CSS für kleine 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.

drei-spalten-responsive
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 */
}

Content Management Systeme wie WordPress, Drupal 8 oder Joomla können automatisch kleinere Auflösung für Bilder auf kleinen Viewports einsetzen, um Webseiten – vor allem auf den mobilen Geräten – schneller zu laden. Mit sizes und srcset-Attributen des img-Tags lädt der Browser kleinere Bilder für Smartphones, Bilder mit doppelter Auflösung für Retina-Displays und große Bilder für Desktop-Monitore.

Das HTML picture-Tag kann darüber hinaus auch Bilder mit unterschiedlichen Seitenverhältnissen (aspect ratio) einsetzen.

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 …