Media Queries: Einfaches responsives Webdesign

CSS Media Query, Breakpoints und Mobile Geräte

Media Queries passen das Layout der Webseite durch Breakpoints im CSS an Monitorklassen an. An den Breakpoints springt das Design um. Es gibt gute Frameworks, die das Grundgerüst für das Layout automatisch erzeugen – aber Media Queries sind nicht so aufwändig, wie es auf den ersten Blick erscheint.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Auflösung des Monitors – Vielfalt ohne Ende

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 x über ein Samsung-Handy, vom iPad über das iPad Mini bis hin zum Google Pixel 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 den vorangegangenen Regeln aufgeführt, 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

Eine mögliche Anordnung mit 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.

Kleine Monitore zuerst

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

leo-magna-1-far
leo-magna-1-far
leo-magna-1-far

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 Beispiel-Template Leo Magna ist eine von unendlich vielen möglichen Unterteilungen. Für die Webseite eines Online-Shops, der die meisten Besucher mit IE 11 und Monitoren mit 1680x1050 Pixel Auflösung vermutet, wäre z.B. das Design für eine Fensterklasse von 1280 bis 1440 der zentrale Drehpunkt. Anderseits stellen bei vielen Internet-Auftritten Besucher mit dem Mobiltelefon und dem Tablett bereits die Mehrheit – da liegen dann zwei weitere wichtige Bereiche: Das lineare Webdesign für das Handy und ein erster Breakpoint für die Klasse der Monitore mit rund 700 bis 1024.

Alternative für veraltete Browser

Browsern, die Media Queries nicht unterstützen – Internet Explorer bis einschließlich IE8 – kommen in freier Wildbahn kaum noch vor. IE9 bewegt sich ebenfalls weit unterhalb der 0.1%-Grenze. Wenn IE9 dennoch unterstützt werden soll, werden zusätzliche CSS-Regeln gebraucht, denn das Layout benutzt das Flexmodell, das erst ab IE 10 unterstützt wird. IE10 unterstützt display : flex, braucht aber eine ältere Syntax.

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 – vom kleinsten Viewport hinauf zu großen Monitoren – 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,
               minimum-scale=1.0">
  • 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 responsiv: 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.

Content Management Systeme wie WordPress, Drupal 9 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.

Media Queries in drei Schritten

Responsives Stylesheet
/** CSS für alle **/
@media only screen and (max-width: 599px) {
	…
}

@media only screen and (min-width: 600px ) {
	…
}

@media only screen and (min-width: 980px ) {
	…
}

@media only screen and (min-width: 1260px ) {
	…
}

Die Media Queries überschreiben die CSS-Stile für das Grundgerüst – hier natürlich nur plakativ. Damit die Größe des Viewports oder Browserfensters beim Testen sichtbar ist, zeigt das Beispiel oben links eine Plakette mit der Auflösung und dem herrschenden Breakpoint.

Das Feilen an den Feinheiten kann beginnen …