Responsive Webdesign mit Breakpoints und Media Queries

Responsive Websites basieren auf flexiblen Gestaltungsrastern und passen sich automatisch an die unterschiedlich großen Displays verschiedener (mobiler) Endgeräte an. Für die optimale Darstellung auf Tablets oder Smartphones werden dazu mithilfe von CSS Media Queries sog. Breakpoints definiert, an denen das Layout einer Website umbricht. In diesem Artikel zeige ich euch, wie die Desktopversion einer Website mit Hilfe von Breakpoints responsiv gestaltet wird, und welche Display-Eigenschaften neben der Displaygröße noch abgefragt werden können.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Frühbucher-Preise sichern

Mit CSS-Medientypen die Ausgabe auf verschiedenen Geräten beeinflussen

Am Beispiel der Druckausgabe einer Website lässt sich gut veranschaulichen, wie mit Hilfe der CSS-Regel @media print {} das Aussehen einer Website auf verschiedenen Ausgabegeräten verändert werden kann. Sofern keine CSS-Regel für das Ausgabegerät Drucker definiert wurde, wird die Internetseite genauso ausgedruckt, wie der Browser sie auch darstellt.

Links die Ansicht im Browser, recht die Druckansicht
Links die Desktopversion im Browser und rechts die Druckansicht des Beispiels. In beiden Versionen sind alle Inhalte zu sehen – lediglich Hintergrundfarben werden nicht mitgedruckt.

Der Code der Beispiel-Seite sieht wie folgt aus:


<body>
 <div class="container">
   <header class="header">
     <img class="logo" src="http://placehold.it/200x80">
     <nav class="navi">
       <ul>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Leistungen</a></li>
         <li><a href="#">Service</a></li>
         <li><a href="#">Kontakt</a></li>
       </ul>
     </nav>
   </header>
   <article class="content">
     <h1>Lorem ipsum dolor sit amet</h1>
     <p>Lorem ipsum dolor sit amet …</p>
   </article>
   <aside class="sidebar">
     <h3>Lorem ipsum dolor sit amet</h3>
     <p>Lorem ipsum dolor sit amet …</p>
   </aside>
 </div>
</body>
</html>

.container {
  background: white;
  max-width: 960px;
  margin: 2em auto;
}

.header {
  width: 100%;
  float: left;
  margin-bottom: 2em;
  background: #ddd;
}

.logo { float: left; }

.navi {
  float: right;
  margin-right: 1em;
}

.navi ul {
  list-style: none;
  padding: 0;
}

.navi li { float: left; }

.navi a {
  display: block;
  background: white;
  padding: 1em;
}

.content {
  width: 62%;
  float: left;
}

.sidebar {
  width: 34%;
  float: right;
}

Beispiel ansehen

Die @media-Regel am Beispiel des Medientyps print

Wenn unsere Beispiel-Website gedruckt wird, ist nur der Hauptinhalt relevant – die Navigation und die Seitenleiste sind in diesem Beispiel unwichtig. Um die Druckansicht der Website optimieren zu können, schreiben wir die @media-Regel am Ende des Stylesheets und sprechen mit dem Medientyp print einen Drucker an.



@media print {

/* Hier folgen die Druck-spezifischen Angaben */

}

Für den Ausdruck werden die Navigation und die Seitenleiste nicht benötigt. Sie werden daher ausgeblendet. Das Logo soll in der Druck-Ansicht oben rechts stehen und der Inhalt über die gesamte Breite des Dokuments laufen. Im CSS-Code sieht das Beispiel dann folgendermaßen aus:


/* abweichende CSS-Regeln für Drucker, die den vorher notierten CSS-Code überschreiben */

@media print {  

  .logo {float:right;}
  .navi, .sidebar {display:none;}
  .content {width:100%;}
}
Links die Browseransicht, rechts optimiert für den Druck
Links die Website im Browser und rechts die optimierte Druckansicht mit CSS

Beispiel anschauen

Websites mit Hilfe von Media Queries responsiv gestalten

Im responsive Webdesign wird mit Media Queries (Medienabfragen) zunächst der Medientyp screen (Bildschirm) angesprochen und um die Abfrage (Query) nach einer Eigenschaften, in diesem Fall der Viewport-Größe, erweitert. Somit ist es möglich, das Layout einer Website anhand bestimmter Pixelbreiten des Viewports anzupassen. Die Punkte an denen das Layout schlagartig umbricht nennt man Breakpoints (Bruchstellen).

Den passenden Breakpoint finden

Aufgrund der Vielzahl an Smartphones und Tablets ist es fast unmöglich, alle gerätespezifischen Displaygrößen zu berücksichtigen. Daher empfiehlt es sich, den Breakpoint nach dem Layout auszurichten. Um herauszufinden an welchen Stellen der Breakpoint gesetzt werden muss, bieten sich die Entwickler-Tools der Browsers an. In meinem Fall öffne ich die Website in Google Chrome und wähle nach einem Rechtsklick auf die Seite, im Kontextmenü den Eintrag »Element untersuchen« aus.

Mit Entwicklertool im Browser Element untersuchen
Mit Hilfe eines Rechtsklicks kann das angeklickte Element in den Entwickler-Tools untersucht werden

Beim Verkleinern des Browser-Fensters sehe ich in den Entwickler-Tools oben rechts, dass ab einer Viewport-Breite kleiner als 720 Pixel eine Fehldarstellung entsteht. Die Seitenleiste wird zu schmal und die Navigation schiebt sich ab einer Viewportbreite von 620 Pixel treppenartig unter das Logo.

Ansicht der Website bei 720px und bei 620px
Das Layout der Website erzeugt in kleineren Ansichten noch Fehldarstellungen. In der linken Ansicht ist bereits die Seitenleiste zu schmal, unterhalb von 620 Pixeln (rechts) wir die Fehldarstellung dann offensichtlich

@media screen and (max-width: 720px)

Um der Fehldarstellung entgegenzuwirken setzen wir nun zwei Breakpoints. Den ersten Breakpoint definieren wir bei 720 Pixeln. Die oben beschriebene @media-Regel wird jetzt nach der Angabe des Medientyps screen um die Abfrage nach der Displaygröße (max-width) erweitert. Das heißt übersetzt, dass bei einer Bildschirmgröße kleiner als 720px mit dem Aussehen der Website etwas passieren soll.


…

/* CSS-Regel für Displays, die kleiner als 720px sind */

@media screen and (max-width:720px) { 

}

Wir möchten, dass sich an dieser Stelle der Inhalt (article class="content") und die Seitenleiste (aside class="sidebar") untereinander anordnen. Das erreiche ich mit einer Breite (width) von 100% für beide Elemente.



…

/* CSS-Regel für Displays, die kleiner als 720px sind */

@media screen and (max-width:720px) {
  .content, .sidebar {
    width:100%;
  }
}

Beispiel ansehen

Beim Verkleinern des Browserfensters seht ihr nun, dass sich die Seitenleiste unter dem Inhalt (article class="content") anordnet. Das liegt daran, dass im HTML-Code die Seitenleiste aside class="sidebar" nach dem Artikel notiert wurde.


<article class="content">
    …
</article>
<aside class="sidebar">
    …
</aside>

Responsive Navigation für die Ansicht im Smartphone

Der zweite Breakpoint wird jetzt bei 620px gesetzt und die Navigation muss entsprechend angepasst werden. Ich möchte, dass die Menüpunkte untereinander angeordnet über die gesamte Breite des Displays laufen. Die Navigation wird ursprünglich rechts gefloatet und muss jetzt nach links versetzt werden.



…

/* abweichende CSS-Regel für Displays, die kleiner als 720px sind */

@media screen and (max-width:720px) {

  .content, .sidebar {width:100%;}
}

/* abweichende CSS-Regel für Displays, die kleiner als 620px sind */

@media screen and (max-width:620px) { 

  .navi {float:left; width:100%;}
  .navi li {width:100%;}
}

…

Jetzt möchte ich den Menüpunkten noch einen dunkleren Hintergrund zuweisen und sie zusammen mit dem Logo im Header zentriert darstellen.



…

/* abweichende CSS-Regel für Displays, die kleiner als 720px sind */

@media screen and (max-width:720px) {

  .content, .sidebar {width:100%;}
}

/* abweichende CSS-Regel für Displays, die kleiner als 620px sind */

@media screen and (max-width:620px) { 

  .header {text-align:center;}
  .logo {float:none;}
  .navi {float:left; width:100%;}
  .navi li {width:100%;}
  .navi a {background:#333; color:white;}
}

…

Beispiel ansehen

Breakpoints in die Einheit em umwandeln

Bei flexiblen Rastern, die die Basis für responsive Webseiten sind, wird mit Prozentwerten gearbeitet. Da liegt es nahe, die Breakpoints bei den Media Queries ebenfalls in einer relativen Einheit zu schreiben. In diesem Fall bietet sich die typografische Einheit em an (1em = 16px). Die Verwendung einer flexiblen Einheit wirkt sich beispielsweise vorteilhaft bei unterschiedlichen Zoomstufen in alten Browsern aus.

CSS-Code



…

/* Umrechnung 720 Pixel / 16px = 45em */

@media screen and (max-width:45em) {

  .content, .sidebar {width:100%;}

}

/* Umrechnung 620 Pixel / 16px = 38.75em */

@media screen and (max-width:38.75em) {

  .header {text-align:center;}
  .logo {float:none;}
  .navi {float:left; width:100%;}
  .navi li {width:100%;}
  .navi a {background:#333; color:white;}
}

…

Die Ausrichtung mobiler Endgeräte abfragen

Mit Media Queries lassen sich außer der Displaygröße noch weitere Eigenschaften der Ausgabegeräte abfragen. Zum Beispiel ob das Gerät im Hoch- oder Querformat gehalten wird.

In meinem Beispiel vergebe ich bei einem Hochformat (orientation:portrait) einen gelben und bei Querformat (orientation:landscape) einen hellgrünen Hintergrund.



…

@media screen and (orientation:portrait) {
  body {background:gold;}
}

@media screen and (orientation:landscape) {
  body {background:lime;}
}

…

Vollständiges Beispiel

Hier seht ihr nochmal den gesamten CSS-Code des Beispiels:


.container {
  background: white;
  max-width: 960px;
  margin: 2em auto;
}

.header {
  width: 100%;
  float: left;
  margin-bottom: 2em;
  background: #ddd;
}

.logo { float: left; }

.navi {
  float: right;
  margin-right: 1em;
}

.navi ul {
  list-style: none;
  padding: 0;
}

.navi li { float: left; }

.navi a {
  display: block;
  background: white;
  padding: 1em;
}

.content {
  width: 62%;
  float: left;
}

.sidebar {
  width: 34%;
  float: right;
}

@media print {

  .logo {float:right;}
  .navi, .sidebar {display:none;}
  .content {width:100%;}

}

@media screen and (max-width:45em) {

  .content, .sidebar {width:100%;}

}

@media screen and (max-width:38.75em) {

  .header {text-align:center;}
  .logo {float:none;}
  .navi {float:left; width:100%;}
  .navi li {width:100%;}
  .navi a {background:#333; color:white;}

}

@media screen and (orientation:portrait) {

  body {background:gold;}

}

@media screen and (orientation:landscape) {

  body {background:lime;}

}

Beispiel ansehen

Mobile First

In diesem Beitrag wurde der »Desktop-First«-Ansatz erklärt. Wie ihr das Beispiel »mobile First« aufbaut und worin die Vorteile dieser Art der Umsetzung bestehen, erfahrt in unserem ergänzenden Beitrag Responsive Design und Mobile First