1. Startseite
2. CSS
3. Responsives Webdesign

Responsives Webdesign

Das "Responsive Webdesign" bezeichnet eine Technik, bei der die Bildschirmgröße des Betrachters berücksichtigt wird.

Auf kleinen Displays wie bei Smartphones werden weniger oder andere Inhalte angezeigt als bei den großen Monitoren am Arbeitsplatz, bei denen viel mehr Content dargestellt werden kann. Für "responsives Webdesign" benötigen wir ein "fluides Layout", anpassungsfähigen Inhalt und Layoutumbrüche durch "Media Queries".

Layouts

Das feste Layout

Das "feste" oder "fixe Layout" wird mit der Einheit Pixel erstellt. Eine flexible Anpassung an das Endgerät ist nicht möglich.

Das fluide Layout

Das "fluide" oder "fexible Layout" wird in % des Viewports, also in % der Fensterbreite angegeben. Beim Verändern der Fenstergröße verändern sich die Dimensionen relativ mit.

Das adaptive Layout

Das "adaptive Layout" besteht aus eine "festem Layout" in mehreren Versionen, je nach verfügbarem Platz wird das Layout anders dargestellt. Die Umsetzung wird durch definierte Umbruchpunkte ermöglicht.

Das responsive Layout

Das "responsive Layout" vereint das "adaptive Layout" mit dem "fluiden Layout". Dadurch wird der Inhalt an der Fenstergröße angepasst und bei bestimmten Größen wird ein anderes Layout verwendet.

Flexible Raster - Gridsystem

Das "Grid-System" mit den "960 Pixeln" breite ist schon ein etwas älterer Kollege im Webdesign.

Typisch für seine Zeit war ein einfaches "2-Spalten Layout".

<div id="wrapper">
 <div id="nav">
  ...
 </div>
 <div id="main">
  ...
 </div>
</div>

#wrapper {
 width: 960px;
}
#nav {
 width: 300px;
 margin-left: 10px;
 margin-right: 10px;
}
#main {
 width: 620px;
 margin-left: 10px;
 margin-right: 10px;
}

Mit Sicherheit gibt es noch genug Webseiten, die dieses Layout verwenden, weil es eine Standardgröße war, als die Monitore am Arbeitsplatz mit einer Auflösung von "1024 x 768" Pixel weit verbreitet waren. Es ist das Ergebnis aus "12 Spalten" mit je "60 Pixel" und "10 Pixel" links und rechts Außenabstand. Um aus dem festen Pixel flexible Einheiten zu machen, berechnen wir nach einer Formel die % des Viewports.

Angenommen, wir müssen ein "960 Pixel" Layout flexibel gestalten, dann rechnen wir die Pixel der Spaltenbreite in % des Viewports um.

Als Erstes die kleine Spalte vom Bereich nav.

Als Nächstes die breite Spalte vom Bereich "main".

Auch wenn es übertrieben wirkt, mit so vielen Nachkommastellen zu arbeiten, sollten wirklich viele Nachkommastellen verwendet werden. Umso mehr Nachkommastellen angegeben werden, umso geringer ist die Gefahr, dass Rundungsfehler auftreten. Auch bei den kleinen Abständen wird genau gerechnet.

Jetzt nur noch die festen Pixelwerte in CSS mit den errechneten %-Werten austauschen und nicht vergessen, die Gesamtbreite vom Bereich wrapper auf "100%" zu setzen.

#wrapper {
 width: 100%;
}
#nav {
 width: 31.25%;
 margin-left: 1.0416666667%;
 margin-right: 1.0416666667%;
}
#main {
 width: 64.5833333333%;
 margin-left: 1.0416666667%;
 margin-right: 1.0416666667%;
}

Schon ist aus einem festen Layout ein fluides Layout geworden.

Layoutumbrüche - Breakpoints

Ein Layoutumbruch wird durch die Technologie "Media Queries" erzeugt.

@media(min-width: 600px) {
 Wird ausgeführt wenn der Viewport mindestens "600px" breit ist.
}

Die Deklarationen im Anweisungsblock werden ausgeführt, wenn der Viewport mindestens eine breite von "600 Pixel" hat.

Schlüsseltechnologie Media Queries

Mit "Media Queries" können Designs für verschiedene Ausgabemedien individuell angepasst werden.

"Media Queries" unterteilen zum einen die "Media-Typen" und zum anderen die "Media-Eigenschaften".

Mediatypen

Die wohl bekanntesten und am häufigsten verwendeten "Mediatypen" sind "screen" für den Bildschirm und "print" für den Drucker.

<link href="design.css" rel="stylesheet" media="screen">

Wenn bei der Referenz zum "Stylesheet" kein "Mediatyp" angegeben wird, dann hat das "Stylesheet" den "Mediatyp" "all".

Innerhalb eines "Stylesheets" definieren wir die Eigenschaften für die verschiedenen "Mediatypen" in geschweiften Klammern.

@media screen {
 CSS Deklarationen
}

Bei Import-Anweisungen hängen wir den "Mediatyp" einfach direkt hinten ran.

@import "farben.css" screen;

Mediaeigenschaften

Neben den "Mediatypen" gibt es noch die "Media-Features" oder einfach die "Media-Eigenschaften". "Mediaeigenschaften" beschreiben unter anderem:

Die "Mediaeigenschaften" werden direkt bei den "Mediatypen" in runden Klammern geschrieben, bei denen sie gelten sollen.

<link href="design.css" rel="stylesheet" media="screen and (max-width: 800px")>

@media screen and (max-width: 800px) {
 CSS Deklarationen
}

@import url("farben.css") screen and (max-width: 800px);

Mit "Media Queries" werden also Bedingungen geprüft, die ausgeführt werden, wenn das Ergebnis "true" ist, also wenn die Aussage zutrifft. Zwischen den "Mediatypen" und den "Mediaeigenschaften" können wir noch das logische Schlüsselwort "and" verwenden. Die Kombination aus "Mediatyp" dem Schlüsselwort "and" und der "Mediaeigenschaft" stellt sicher, dass der Anweisungsblock nur ausgeführt wird, wenn die Bedingungen zu "Mediatyp" und "Mediaeigenschaft" "true" ergibt.

Adaptives oder responsives Layout?

Beim "adaptiven Layout" wird das Design nur an bestimmten Stellen umgebrochen.

Das "fluide Layout" wächst relativ mit dem verfügbaren Platz. Die Kombination aus "adaptivem Layout" und "fluiden Rastern" eignet sich optimal um "responsive Designs" zu erschaffen. Das "adaptive Layout" bietet die größere Detailkontrolle. Das "responsive Layout" bietet die größere Flexibilität.

Schnelleinstieg responsive Webdesign

Angenommen, es gibt einen grafischen Entwurf mit festen Abmessungen und nun soll daraus eine "responsive Webseite" entstehen.

• Die Vorgabe hat eine Gesamtbreite von "1400 Pixeln".
• Über die gesamte Breite erstreckt sich ein Logo im Kopfbereich der Seite.
• Die Navigation befindet sich auf der linken Seite und hat "280 Pixel" breite.
• An der rechten Seite befinden sich aktuelle News die "320 Pixel" breit sind.
• Dann bleiben für den Hauptteil der Webseite "800 Pixel" übrig.

In diesen "800 Pixeln" breiten Hauptfenster befinden sich immer 3 aktuelle Storys, die aus einer Überschrift, einem Bild und etwas Text bestehen. Wenn genug Platz vorhanden ist, stehen die Storys nebeneinander, sollte die Webseite allerdings eine Breite erreichen, die unter "1000 Pixel" liegt, dann sollen die Storys zur besseren Darstellung untereinander stehen. Direkt unter dem Storybereich mit den Bildern befinden sich die älteren Storys ohne Bilder.

Jetzt noch mal Stück für Stück mit dem entsprechenden Quelltext dazu.

Die Vorgabe ist eine maximale Gesamtbreite mit "1400 Pixel".

<body>
 <div id="wrapper">
 </div>
</body>

#wrapper {
 max-width: 1400px;
}

Über die gesamte Breite erstreckt sich ein Logo im Kopfbereich der Seite.

<body>
 <div id="wrapper">
  <header>
   <img src="banner.jpg" alt="Logo" width="1400px">
  </header>
 </div>
</body>

Die Navigation befindet sich auf der linken Seite und hat "280 Pixel" breite.

<body>
 <div id="wrapper">
   ...
  </header>
  <nav id="nav">
   <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="#">Übersicht</a></li>
    <li><a href="#">Geschichte</a></li>
    <li><a href="#">Impressum</a></li>
   </ul>
  </nav>
 </div>
</body>

#nav {
 width: 280px;
 float: left;
}

Neben der Navigation sind der Hauptinhalt (mittig) und ein Newsbereich (rechts). Beide werden wir in einem extra <div>-Bereich packen und nach rechts schieben, um ein überlappen mit der Navigationsleiste zu verhindern, die wir mit "float" nach links gestellt haben.

<body>
 <div id="wrapper">
   ...
  </nav>
  <div class="main-wrapper">
   <main>
   </main>
   <aside>
   </aside>
  </div>
 </div>
</body>

.main-wrapper {
 width: 1120px;
 margin-left: 280px;
}

An der rechten Seite befinden sich aktuelle News die "320 Pixel" breit sind.

<body>
 <div id="wrapper">
   ...
   <aside>
    <h2>News</h2>
    <p>Schlagzeilen</p>
    <p>Unglaubliches</p>
    <p>Presse</p>
    <h3>Sport</h3>
    <p>Basketball</p>
    <p>Tennis</p>
    <p>Golf</p>
   </aside>
  </div>
 </div>
</body>

aside {
 width: 320px;
}

Dann bleiben für den Hauptteil der Webseite "800 Pixel" übrig. Um den Hauptbereich mittig zu platzieren und die News nach rechts zu schieben, verwenden wir wieder "float" und "margin-left".

main {
 float: left;
 width: 800px;
}
aside {
 width: 320px;
 margin-left: 800px;
}

Der Hauptbereich beinhaltet 2 <section>-Elemente, einen für die neuen Storys und einen für die alten Storys. Das <section>-Element für die neuen Storys bekommt für jede Story ein <article>-Element, in dem ein Bild, eine Überschrift und etwas Text stehen.

<body>
 <div id="wrapper">
   ...
   </nav>
   <div class="main-wrapper">
    <main>
    <section class="neue-storys">
     <article class="storybox">
      <img src="board.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Neue Architektur für Prozessorkerne</h2>
       <p>Durch einen neuen Denkansatz wurde eine Prozessorarchitektur entwickelt, die eine so hohe Recheneffizenz hat dass die Messungen noch nicht abgeschlossen werden konnten.</p>
      </div>
     </article>
     <article class="storybox">
      <img src="math.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Neue Zahlenarten entdeckt</h2>
       <p>Neben den bekannten natürlichen Zahlen, ganzen Zahlen, rationalen Zahlen und reellen Zahlen gibt es jetzt die Kategorie der ungewöhnlichen Zahlen.</p>
      </div>
     </article>
     <article class="storybox">
      <img src="speedlimit.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Tempolimit im Internet</h2>
       <p>Weil für Spionageagenturen der Datenverkehr zu schnell zum mitlesen geworden ist, soll ein Tempolimit im Internet eingeführt werden.</p>
      </div>
     </article>
    </section>
    <section class="alte-storys">
    </section>
   </main>
   <aside>
    ...
   </aside>
  </div>
 </div>
</body>

Das <section>-Element für die alten Storys bekommt in unserem Beispiel nur eine Überschrift und etwas Text.

<body>
 <div id="wrapper">
   ...
   </nav>
   <div class="main-wrapper">
    <main>
    <section class="neue-storys">
    ...
    </section>
    <section class="alte-storys">
     <h2>Alte Storys</h2>
     <p>Hier können die alten Storys aufgeführt werden.</p>
    </section>
   </main>
   <aside>
    ...
   </aside>
  </div>
 </div>
</body>

Bis hier, haben wir eine Seite mit einem "3-Spalten-Layout" und einer Größenangabe wie in der Designvorlage.

Um jetzt Richtung "responsives Layout" zu gehen, werden wir aus dem festen Pixelwerten wieder ein "fluides Layout" mit %-Angaben machen.

#wrapper {
 width: 100%;
}
#nav {
 width: 20%;
 float: left;
}
.main-wrapper {
 width: 80%;
 margin-left: 20%;
}
main {
 float: left;
 width: 71.4285714285%;
}
aside {
 width: 28.5714285715%;
 margin-left: 71.4285714285%;
}
/*Das Bild im header soll sich auch an den Viewport orientieren*/
header img {
 width: 100%;
}

Die 3 Spalten und das Bild im <header> verhalten sich jetzt wie gewollt und passen sich an die breite des Browserfensters an.

Betrachten wir wieder den Hauptbereich mit den Storys

Wenn genug Platz vorhanden ist, stehen die Storys nebeneinander, sollte die Webseite allerdings eine Breite erreichen, die unter "1000 Pixel" liegt, dann sollen die Storys untereinander dargestellt werden. Hierfür greifen wir auf die "Media Queries" zurück.

@media screen and (max-width: 1000px) {
 .storybox {
  width: 100%;
 }
 .storybox img {
  width: 55%;
  float: left;
  margin: .4rem;
 }
}
@media screen and (min-width: 1001px) {
 .neue-storys {
  display: flex;
 }
 .storybox {
  margin: .8rem;
  flex: 1;
 }
 .storybox img {
    width: 100%;
 }
}

Bei einem Viewport bis "1000 Pixel" stehen die Storys untereinander.

Bei einem Viewport ab "1001 Pixel" stehen die Storys nebeneinander.

Hier noch mal der komplette Quelltext (<body>-Element) zum Kopieren und ausprobieren.

<body>
 <div id="wrapper">
  <header>
   <img src="banner.jpg" alt="Logo" width="1400px">
  </header>
  <nav id="nav">
   <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="#">Übersicht</a></li>
    <li><a href="#">Geschichte</a></li>
    <li><a href="#">Impressum</a></li>
   </ul>
  </nav>
  <div class="main-wrapper">
  <main>
    <section class="neue-storys">
     <article class="storybox">
      <img src="board.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Neue Architektur für Prozessorkerne</h2>
       <p>Durch einen neuen Denkansatz wurde eine Prozessorarchitektur entwickelt, die eine so hohe Recheneffizenz hat dass die Messungen noch nicht abgeschlossen werden konnten.</p>
      </div>
     </article>
     <article class="storybox">
      <img src="math.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Neue Zahlenarten entdeckt</h2>
       <p>Neben den bekannten natürlichen Zahlen, ganzen Zahlen, rationalen Zahlen und reellen Zahlen gibt es jetzt die Kategorie der ungewöhnlichen Zahlen.</p>
      </div>
     </article>
     <article class="storybox">
      <img src="speedlimit.jpg" alt="Bild" width="270px">
      <div class="story">
       <h2>Tempolimit im Internet</h2>
       <p>Weil für Spionageagenturen der Datenverkehr zu schnell zum mitlesen geworden ist, soll ein Tempolimit im Internet eingeführt werden.</p>
      </div>
     </article>
    </section>
    <section class="alte-storys">
     <h2>Alte Storys</h2>
     <p>Hier können die alten Storys aufgeführt werden.</p>
    </section>
   </main>
   <aside>
    <h2>News</h2>
    <p>Schlagzeilen</p>
    <p>Unglaubliches</p>
    <p>Presse</p>
    <h3>Sport</h3>
    <p>Basketball</p>
    <p>Tennis</p>
    <p>Golf</p>
   </aside>
  </div>
 </div>
</body>

#wrapper {
 width: 100%;
}
#nav {
 width: 20%;
 float: left;
}
.main-wrapper {
 width: 80%;
 margin-left: 20%;
}
main {
 float: left;
 width: 71.4285714285%;
}
aside {
 width: 28.5714285715%;
 margin-left: 71.4285714285%;
}
/*Das Bild im header soll sich auch an den Viewport orientieren*/
header img {
 width: 100%;
}
@media screen and (max-width: 1000px) {
 .storybox {
  width: 100%;
 }
 .storybox img {
  width: 55%;
  float: left;
  margin: .4rem;
 }
}
@media screen and (min-width: 1001px) {
 .neue-storys {
  display: flex;
 }
 .storybox {
  margin: .8rem;
  flex: 1;
 }
 .storybox img {
    width: 100%;
 }
}