Website Advisor: Schritt-für-Schritt • Anleitung Responsive Web Design • Media Queries verwenden

EnglishDisplay this page in English

Was bedeutet Responsive Web-Design?



Nutzer greifen heute zunehmend über mobile Geräte auf das Internet zu. Deshalb reicht es schon lange nicht mehr aus, wenn Webseiten auf dem Desktop-Monitor oder Laptop (eventuell sogar nur bei einer Standardauflösung gut aussehen.

Tablets, Netbooks und Smartphones haben andere Video Auflösungen als Desktop Computer und Laptops. All diese unterschiedlichen Displays und Bildschirmauflösungen müssen bei der Gestaltung einer Webseite berücksichtigt werden. Responsives Web Design sorgt dafür, dass eine Website auf jedem Endgerät gut aussieht und leicht benutzbar ist.

Responsive Webseiten Gestaltung bedeutet, dass Webseiten sich automatisch an die verfügbare Bildschirm- oder Fenstergröße anpassen.

Responsive Web-Design
Anzeige

Beim Responsiven Webdesign greifen alle Nutzer mit ihrem Browser auf dieselbe HTML-Datei zu, egal welches Gerät sie für den Internetzugriff benutzen. Der CSS-Code steuert die Ausgabe für verschiedene Bildschirm und Fenstergrößen.

Eine Webseite ist mobile friendly, wenn

  1. sie mit jedem Browser auf jedem Gerät ansprechend und zugänglich dargestellt wird.

  2. alle Inhalte ohne Zoomen leicht und schnell erfasst werden können.

  3. sie (sehr) kurze Ladezeiten hat.

  4. alle Links und Buttons leicht erkennbar und klickbar sind.

Eine Webseite ist mobile unfriendly, wenn

  1. die Schrift zu klein oder nicht gut lesbar ist.

  2. die Ladezeit zu lang ist. 3 Sekunden sind bereits zu viel.

  3. wenn nur Desktop Computer Teile der Inhalte optimal darstellen können

  4. der Inhalt zu breit ist, so dass horizontales Scrollen notwendig ist.

Anzeige

Responsive Design – Grundlagen im Webdesign

Du fragst dich vielleicht, was die ideale Breite für deine Webseiten ist. Leider gibt es auf diese Frage keine eindeutige Antwort. Durch die Verwendung von Smartphones, Tablets, Laptops und Desktop Computer müssen unterschiedliche Displays und Bildschirmauflösungen bedient werden. Responsive Web-Design bedeutet so viel wie reagierendes Webdesign. Das bedeutet, das Layout der Website muss sich flexibel an die Fenstergröße des Browsers anpassen. Inhalt, Navigation und der strukturelle Aufbau der Seite müssen bei jeder Bildschirmauflösung optimal dargestellt werden.

Browser arbeiten intern mit dem Viewport-Konzept. Damit die Viewport-Breite mit der Display-Breite korrepondiert, muss eine Meta Viewport-Angabe in den <head>-Bereich der Web-Page eingefügt werden. Ohne dieses Meta-Tag würden mobile Geräte die Webseite so weit verkleinern, dass sie auf den Monitor passt.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Beim Responsive Web-Design müssen folgende drei Regeln unbedingt beachtet werden:

  1. Verwende keine absolute Schriftgröße.

    Wenn Schrift in der Einheit px angegeben wird, wird die Einstellung des Browsers ignoriert. Eine relative Schriftgröße ist besser. Die beiden relativen Schriftgrößen em und rem berücksichtigen die Voreinstellung des Browsers. Die Standard Schriftgröße entspricht immer dem Wert 1.0em. Die meisten Browser verwenden als Voreinstellung 16px.

  2. Verwende keine feste Auflösung für Bilder.

    Das Problem bei Bildern ist, dass Bilder in hoher Auflösung ein größeres Datenvolumen verbrauchen und dadurch längere Ladezeiten benötigen. Eine Lösung für dieses Problem besteht darin, dass mehrere Auflösungen für das gleiche Bild auf den Server geladen werden und dann das Bild mit der passenden Auflösung übertragen wird.

  3. Verwende keine absoluten Werte für verschiedenen Bereiche des Layouts.

    Das Layout muss unbedingt flexibel definiert werden. Sonst können verschiedene Bildschirmauflösungen zu ungewollten Verschiebungen der Bereiche führen. Werte in Prozent oder em sind besser als Werte in px.

    Das Layout der Website muss auch darauf reagieren, wenn sich die Größe des Browserfensers ändert.

Was sind die häufigsten Bildschirmauflösungen?

Es gab noch nie so viel unterschiedliche Geräte für den Internetzugriff wie heute. Deshalb gibt es heute auch mehr potentielle Bildschirmauflösungen als je zuvor. Auf die Frage, was die ideale Bildschirmbreite fürs Web-Design ist, gibt es leider keine eindeutige Antwort. Es gibt aber ein paar Auflösungen, die häufiger verwendet werden als andere.Du solltest deshalb beim Entwurf deiner Webseite besser auf Auflösungsbereiche achten, denn die Auflösung für viele unterschiedliche Geräte liegt in einem bestimmten Bereich.

Die häufigsten Bildschirmauflösungen sind:

  • Desktop: 1024x768 bis 1920x1080

  • Smartphone: 360x640 bis 720x1280

  • Tablet: 601x962 bis 1280x800

Durch Media Queries kann man das Layout der Webseite flexibel an die Breite des Browser-Fensters anpassen.

Was sind CSS Media Queries?

Media Queries (Deutsch: Medienabfragen) wurden im Jahr 2000 mit CSS3 eingeführt und werden im Responsive Web-Design verwendet. Media Queries sind eine CSS-Funktion, die es erlaubt, die Darstellung einer Webseite für verschiedene Geräte zu optimieren.

Media Queries sind ein grundlegender Teil von CSS3. Sie bestehen aus einem optionalen Media Type (Deutsch: Medientyp) und können eine oder mehrere Bedingungen enthalten, die durch logische Operatoren kombiniert werden können. Media Queries werden durch @media eingeleitet, um für eine Webseite angepasste CSS-Eigenschaften zu definieren.

Folgende Medientypen sind möglich:

Media Type Erklärung
all Alle Ausgabe-Medien
screen Darstellung der Webseite auf einem scrollenden Bildschirm, d.h. Smartphone, Tablet, Laptop oder Desktop-Computer
print Darstellung der Webseite auf mehreren Seiten, d.h. Ausgabe auf dem Drucker, aber auch Ausgabe als PDF-Datei oder Druckvorschau im Browser.
speech Vorlesen der Webseite durch einen Sprach-Synthesizer.

Den Medientyp muss man aber nicht angeben. Wird der Media Type in der Media Query nicht angegeben, wird per Default der Media Type all verwendet. Die Angabe des Media Type in Media Queries ist grundsätzlich zu empfehlen.

Media Queries funktionieren so ähnlich wie eine if-Klausel in einer Programmiersprache (Deutsch: Wenn-Anweisung). Im Grunde wird nur abgefragt, ob das angesprochene Gerät bestimmte Eigenschaften, sogenannte Media Features, hat. Falls das Gerät diese Eigenschaft hat, werden die angegeben Styles angewendet, sonst werden sie ignoriert.

Die am häufigsten benutzten Media Features für Responsives Web Design sind:

Media Feature Erklärung Beispiel
width Viewport Breite in Pixel min-width: 360px
height Viewport Höhe in Pixel min-height: 640px
orientation Bildschirm-Orientierung: Hochformat (portrait) oder Querformat (landscape) orientation: landscape
resolution verfügbare Auflösung des Bildschirms min-resolution: 72dpi
Anzeige

Mobile first vs. Desktop first

Breakpoints mit min-width sind Mobile first

Beim Mobile first Ansatz beginnt man mit dem Layout der Webseite für den kleinsten Monitor, d.h. für Smartphones im Hochformat (Portait Modus). Dazu schreibt man in den ersten Teil des CSS ohne Media Query alle Style-Angaben für den kleinsten Bildschirm bzw. alle Angaben, die für alle Bildschirmgrößen gleich sind. Danach wird der CSS-Code durch Media Queries für mehrere Breakpoints schrittweise für immer größere Monitore angepasst.

Die Style-Angaben innerhalb der Breakpoint-Abschnitte überschreiben die Style-Angaben für kleinere Monitore.

/* CSS-Code für den kleinsten Bildschirm, 
 * Smartphone Hochformat (Portrait Modus), 
 * Bildschirmbreite kleiner als 480 Pixel */ 


 ... 

@media screen and (min-width: 480px) {  
/* Smartphone Querformat (Landscape Modus) 
 * Tablet Hochformat (Portait Modus) 
 * Bildschirmbreite ab 480 Pixel */ 


   ... 

}

@media screen and (min-width: 786px) {  
/* Tablet Querformat (Landscape Modus) 
 * Bildschirmbreite ab 786 Pixel */ 
   ... 
}

@media screen and (min-width: 1024px) {  
/* Laptop , kleiner Desktop Monitor 
 * Bildschirmbreite ab 1024 Pixel */ 
   ... 
}

@media screen and (min-width: 1200px) {  
/* großer Desktop Monitor 
 * Bildschirmbreite ab 1200 Pixel */ 
   ... 
}
Anzeige

Breakpoints mit max-width sind Desktop first

Beim Desktop first Ansatz beginnt man mit dem Layout der Webseite für den größten Monitor. Dazu schreibt man in den ersten Teil des CSS ohne Media Query alle CSS Style-Angaben für den größten Bildschirm bzw. alle Angaben, die für alle Bildschirmgrößen gleich sind. Danach wird der CSS-Code durch Media Queries für mehrere Breakpoints schrittweise für immer kleinere Monitore angepasst.

Die Style-Angaben innerhalb der Breakpoint-Abschnitte überschreiben die Style-Angaben für größere Monitore.

/* großer Desktop Monitor 
 * Bildschirmbreite ab 1200 Pixel */

 ...

@media screen and (max-width: 1199px) {  
/* kleiner Desktop Monitor, Laptop 
 * Bildschirmbreite kleiner als 1200 Pixel */
   ... 
}

@media screen and (max-width: 1023px) {  
/* Tablet Querformat (Landscape Modus)
 * Bildschirmbreite kleiner als 1024 Pixel */
   ... 
}

@media screen and (max-width: 785px) {  
/* Smartphone Querformat (Landscape Modus)
 * Tablet Hochformat (Portait Modus)
 * Bildschirmbreite kleiner als 786 Pixel */
   ... 
}

@media screen and (max-width: 479px) {  
/* CSS-Code für den kleinsten Bildschirm,
 * Smartphone Hochformat (Portrait Modus),
 * Bildschirmbreite kleiner als 480 Pixel */
   ... 
}
Anzeige

Was sind Media Query Breakpoints?

Media Query Breakpoints oder kurz CSS Breakpoints sind die Punkte, an denen das Design der Webseite umbrechen soll. Eine @media Regel legt eine definierte Bildschirmbreite fest, bei der sich das Layout einer Webseite ändern soll. Zum Beispiel:

@media screen and (min-width: 1024px) {  
/* Viewport ab 1024 Pixel */
   ... 
}

bzw.

@media screen and (max-width: 1023px) {  
/* Viewport kleiner als 1024 Pixel */
   ... 
}

Breakpoints können mit min-width (d.h. Mobile first) oder mit max-width (d.h. Desktop first) oder mit einer Kombination aus beiden festgelegt werden.

In der Regel reichen 3 oder 4 Breakpoints aus, um ausreichend viele Geräteklassen zu definieren. Zum Beispiel: Breakpoints bei 380, 768, 1024 und 1200 Pixel. Ob man den Mobile-first oder Desktop-first Ansatz wählt, spielt grundsätzlich keine große Rolle. Beide Ansätze führen im Browser zum gleichen Ergebnis.

Anzeige

Wie überprüfe ich, ob mein Website Layout responsive ist?

Wenn du wissen willst, wie deine responsive Website auf gängigen Smartphones und Tablets aussehen wird, empfehle ich dir, Responsinator oder ResponsiveTestTool zu verwenden. Diese beiden Webseiten geben dir einen ersten Hinweis darauf, wie mobile Geräte deine Seite anzeigen werden. Die Ausgabe dieser beiden Simulatoren ist zwar nur ein erster Eindruck, der aber meistens ausreichend ist. Für genaue Tests solltest du immer echte Geräte verwenden. In der Regel stehen aber mehr als ein Smartphone und evtl. noch ein Tablet nicht zur Verfügung.

Responsives Webdesign ist kein Trend, sondern aktuelle Technik. Mit HTML5 und CSS Media Queries wird das Layout so flexibel gestaltet, dass die Webseite auf jedem Endgerät benutzerfreundlich benutzbar ist.

Responsives 2 Spalten CSS Layout mit Header

Responsives CSS-Layout mit Header
Beispiel 2:
Responsives CSS-Layout mit Header

Dieses Beispiel Layout ergänzt Beispiel 1 von der Seite Web-Design so, dass es auch für Smartphones im Hochformat geeignet ist. Ändere die Größe des Browser-Fensters, um den Effekt zu sehen. Bei den Breakpoints 900px und 480px wird die Navigation angepasst.

HTML Quelltext

 
<!DOCTYPE html>
<html lang= "de">

<head>
<title>Titel der Webseite</title>
<meta name="description" content="Beschreibung der Webseite">
<meta name="keywords" content="Suchbegriffe der Webseite">
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="audience" content="alle">
<meta name="robots" content="index, follow">
<meta name="robots" content="all">
<link href="favicon.png" rel="icon" type="image/png" size="32x32">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav id="sideNav">
<ul>
  <li><a class="active" href="/">Home</a>       <!-- URL Homepage --></li>
  <li><a href="/news.html">News</a>             <!-- URL "News" --></li>
  <li><a href="/kontakt.html">Kontakt</a>       <!-- URL "Kontakt" --></li>
  <li><a href="/ueber-mich.html">Über mich</a>  <!-- URL "Über mich" --></li>
</ul>
</nav>

<div id="container">
<header id="headline">
<h1>Hauptüberschrift der Seite</h1>
</header>

<article id="content">
<h2>Hauptinhalt der Seite</h2>
<p>Blindtext muss nicht immer Lorem Ipsum sein.</p>

<p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist. Die Seite ist genauso gut zum Drucken oder für die Darstellung auf einem Smartphone geeignet ist. Wohlgemerkt: es reicht eine für alle Browser und alle Geräte.</p>

<p>So gibt es Regeln für HTML, CSS und JavaScript; Worte, die du vielleicht schon einmal gehört hast. Diese Standards sorgen dafür, dass jeder die Webseite ohne Einschränkung nutzen kann. Im Gegensatz zu früher müssen wir heute nicht mehr zwei verschiedene Webseiten für den Microsoft Edge und dem Mozilla Firefox entwickeln.</p>
</article>
</div>  <!-- Ende container -->
</body>
</html>

CSS Quelltext

 
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Liberation Sans", Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  font-weight: normal;
  text-align: left;
  background: #dcebf2;             /* hellblau */
  color: #222;                     /* schwarz-grau */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#container {
  margin: 0 0 0 12.5em;            /* linke Spalte Breite 12.5em */
  padding: 0;
  height: 100%;
}

#content {
  margin: 0;
  padding: 0 0.625em;
  width: 100%;
}

/** ######################
 ** ##  Haupt-Headline  ##
 ** ###################### */
#container #headline {
  margin: 0 0 2.0em 0;
  padding: 0 0.625em;
  width: 100%;
  height: 2.5em;                   /* Headline Höhe 2.5em */
  top: 0;
  left: 0;
  background: #feffc1;             /* hellgelb */
  overflow: hidden;
}

#container #headline h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  color: #222;                     /* schwarz-grau */
}

/** ######################
 ** ##  Content Styles  ##
 ** ###################### */
#content h1, #content h2, #content h3 {
  display: inline-block;
  margin: 0 0 1.25em 0;
  padding: 0;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
  color: #b00;                     /* dunkelrot */
}

#content p {
  margin: 0 0 1.25em 0;
  padding: 0;
  color: #000;                     /* schwarz */
}

#content p+h1, #content p+h2, #content p+h3 {
  margin-top: 2.5em;
}

#content a {
  font-size: 1.0em;
  text-decoration: underline;
  color: #0000df;                  /* blau */
}

#content a:hover {
  text-decoration: underline;
  color: #df0000;                  /* rot */
}

/** ##############
 ** ##  Button  ##
 ** ############## */
#content .cssbtn {
  display: block;
  margin-bottom: 2.5em;
}

#content a.button {
  display: inline-block;
  margin: 1.0em 0.2em 1.0em 0;
  padding: 0.46em 1.2em;
  font-size: 1.4em;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
  text-align: center;
  background: #b00;                /* dunkelrot */
  color: #fff;                     /* weiß */
  transition: all 0.15s;
  border: 0.125em solid #000;
  border-radius: 0.5em;
  box-sizing: border-box;
}

#content a.button:hover {
  text-shadow: 0 0 2.0em rgba(255,255,255,1);
  background: #e00;                /* hellrot */
  color: #000;                     /* schwarz */
  border-color: #000;
}

/** ###############
 ** ##  sideNav  ##
 ** ############### */
#sideNav ul {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 12.5em;
  height: 100%;
  list-style-type: none;
  background: #d0dec9;             /* mintgrün */
  overflow: auto;
}

#sideNav ul li {
  border-bottom: 2px solid #bbb;   /* hellgrau */
}

#sideNav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  text-decoration: none;
  color: #000;                     /* schwarz */
}

#sideNav ul li a.active {
  background: #d0ffc9;             /* hellgrün */
  color: #000;                     /* schwarz */
}

#sideNav ul li a:hover:not(.active) {
  background: #ccc;                /* hellgrau */
  color: #000;                     /* schwarz */
}

@media screen and (max-width: 900px) {
  #sideNav ul {
    width: 100%;
    height: auto;
    position: relative;
  }

  #sideNav ul li {
    border-bottom: 0 solid #bbbbbb;
  }

  #sideNav ul li a {
    float: left;
    padding: 15px;
  }

  div#container {
    margin-left: 0;
  }
}

@media screen and (max-width: 480px) {
  #sideNav ul li a {
    text-align: center;
    float: none;
  }
}

Live Vorschau dieser Web Page Vorlage Responsives 2 Spalten Layout mit Header.

Download