Suche Menü

Responsive Webseite Grundlagen: Flexibles (flüssiges) Layout

Grundlagen Responsive Webdesign, starre Pixel-Layout in flexible Prozent-Layout umrechnen.

Grundvoraussetzung für eine Responsive Webseite ist ein flexibles Design, welches sich an die verschiedenen Viewports (sichtbarer Bereich innerhalb eines Browserfensters) anpasst.
In diesem kleinen und einfachen Beispiel möchte ich die grundlegende Vorgehensweise erklären, wie ein, mit einem Grafikprogramm erstelltes starres Layout mit Pixel-Werten in ein flüssiges Layout mit Prozent angaben umgerechnet wird.
Das Beispiel besitzt einen Kopf und Fuß Bereich, welcher sich über die gesamte Bildschirmbreite erstreckt.
Einen #container mit einer Breite von 960px mittig ausgerichtet. Hauptinhalt und Sidebar sind im #container untergebracht und werden rechts und links gefloatet.
rwd_flex_layout
HTML Code:

<div id="header">
<h1>..</h1>
</div>
<div id="container">
<div id="article">
<h1>..</h1>
</div>
<div id="aside">
<h3>..</h3>
</div>
</div>
<div id="footer">
<h3>..</h3>
</div>

CSS Code:

 body {
      margin: 0;
      padding: 0;
      background-color: #fff;
      color: #634C5C;
      line-height: 1.3;
      font-family: sans-serif;
      font-size: 100%;
    }
 #header {
      background-color: #105B63;
      color: white; 
      padding: 10px;
      width:100%;
    }
 #header h1, article h1 {
      font-weight: normal;    
    }
 #container {
      width: 960px;
      margin: auto;
    }
 #aside {
      background:  #FFFAD5;
      padding:20px;
      width: 280px;
      float: left;
	}
 #article {
      background-color: #fff;
      width: 600px;
      float: right;
	}
 #footer {
      background-color: #BD4932;
      color: white; 
      padding: 10px;
      clear:both;
    }
 #footer h3 {
      font-weight: normal;    
    }

Die Formel zur Umrechnung in Prozent-Werte lautet:
Zielbreite in Pixel / Kontext x 100 = Wert in Prozent
Ein hilfreiches Onlinetool zur Umrechnung ist der Responsive Calculator von Hover Studio.

Beziehend auf den Hauptinhalt #article, beträgt die Zielbreite 600px der Kontext bezieht sich auf den umschließenden  #container mit einer Breite 960px somit haben wir ein Ergebnis von 62,5%.

#article {
      background-color: #fff;
      width: 62.5%; /* 600/960x100 */
      float: right;
	}

Sehr wichtig: Im Code das Komma als Punkt schreiben und Nachkommastellen nicht runden.
Die Padding angaben der Sidebar, beziehen sich auf die Breite des umfließende Element #container, nicht wie vermuten lässt auf  die Breite der Sidebar #aside.

#aside {
	  background:  #FFFAD5;
	  padding:2.0833333%; /* 20/960x100*/
	  width: 29.16666667%; /* 280/960x100 */
          float: left;
	}

Erwähnenswert ist auch, der #container wird in der Breite mit „max-widht“ begrenzt, hat den Vorteil bei breiten Bildschirmen bleibt der Inhalt gut lesbar.
Umgewandelter CSS-Code

body {
   margin: 0;
   padding: 0;
   background-color: #fff;
   color: #634C5C;
   line-height: 1.3;
   font-family: sans-serif;
   font-size: 100%; }
 #header {
   background-color: #105B63; 
   color: white;
   padding: 10px; width:100%; }
#header h1, #article h1 { 
   font-weight: normal; } 
#container {
   max-width: 960px;
   margin: auto; } 
#aside {
   background: #FFFAD5;
   padding:2.0833333%; /* 20/960x100*/ 
   width: 29.16666667%; /* 280/960x100 */
   float: left; }
 #article { 
   background-color: #fff; 
   width: 62.5%; /* 600/960x100 */ 
   float: right; } 
#footer { 
   background-color: #BD4932;
   color: white; padding: 10px;
   clear:both; }
#footer h3 {
  font-weight: normal; }

Demo anschauen

Ich hoffe der Artikel war hilfreich, wie oben erwähnt ist dies nur eine einfache grundlegende Vorgehensweise beim erstellen eines Responsive Layout.

Weitere Artikel zum Thema Responsive Webseite:
Meta-Angaben Viewport