kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 Seminar-Termine für 2018 sind online!

Jetzt Tickets 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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

1 Kommentar

  1. Christopher

    Verfasst am 11. August 2015 um 3:07 Uhr.

    Guter und hilfreicher Beitrag , responsive ist sehr wichtig, von 10 Besucher auf einer Webseite sind ca 7 mit einem mobilen Gerät online. Zudem auch im Seo Bereich ist responsive sehr wichtig um ein gutes ranking zu erzeugen. Falls also jemand noch keine responsive Webseite hat, sollte dies schnell ändern-

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.