Starre Layouts in flüssige Layouts umwandeln – Responsive Webdesign Basics

fixed-fluid-website

Ein wichtiger Bestandteil einer responsive Website ist das flüssige Gestaltungsraster auf Basis von Prozent- oder em-Werten. Doch wie wandelt man ein auf Pixelwerten basierendes, evtl. bereits programmiertes Layout in ein flüssiges Raster um? Anhand eines leicht verständlichen Beispiel-Projekts möchte ich euch die grundlegende Vorgehensweise erklären.

kulturbanause-Seminare 2017

WordPress, HTML & CSS, Responsive Design, SVG, Prototyping, Muse …

Jetzt Frühbucher-Preise sichern!

Das flüssige Raster im RWD

Ein responsive Design besteht mindestens aus folgenden drei Komponenten:

  • Flüssiges Gestaltungsraster
  • Flexible Medieninhalte (Bilder, Videos etc.)
  • Media Queries

In diesem Beitrag behandle ich das Raster der Website. Ergänzende Infos zum Thema findet ihr in meinen folgenden Beiträgen:

Quellcode des starren Layouts

Das Markup des Beispiel-Projekts ist denkbar simpel aufgebaut. Durch das Container-Element (.container) wird die Website mit einer Breite von 960 Pixeln mittig im Browserfenster positioniert. Die restlichen Elemente erhalten Breiten- und Höhenangaben und werden innerhalb des Containers untergebracht. Der Hauptinhalt und die Sidebar werden nach links und rechts gefloatet, der Footer hebt den float wieder auf.

Aufbau des starren Layouts

Aufbau des starren Layouts

HTML-Markup


[…]
<body>
<div id="container">
  <div id="header"> <a href="#" id="logo">Logo</a> </div>
  <div id="article">
    <h1> … </h1>
    <p> … </p>
    <p class="info"> … </p>
    <p> … </p>
  </div>
  <div id="aside"> … </div>
  <div id="footer"></div>
</div>
</body>
[…]

CSS-Code


body {
	margin: 20px;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 960px;
	background: white;
}

#header {
	float: left;
	background: orange;
	width: 960px;
	margin: 0 0 20px 0;
}

#logo {
	width: 120px;
	display: block;
	background: white;
	margin: 30px 20px;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: grey;
}

#article {
	float: left;
	width: 600px;
}

.info {
	background:yellow;
	padding:30px;
	margin:20px 0;
}

#aside {
	float: right;
	width: 280px;
	background: #FC0;
	padding: 20px;
}

#footer {
	clear: both;
	padding: 10px;
	background: orange;
}

Beispiel des starren Layouts anzeigen

Pixelwerte in Prozentwerte übertragen

Um das statische Layout für ein responsive Design vorzubereiten, müssen lediglich alle Pixelwerte in Prozentwerte umgerechnet werden. Das führt allerdings nicht nur dazu, dass das Design sich kleinen Viewports anpasst, es dehnt sich auch unendlich weit aus. Auf großen Bildschirmen oder Smart-TVs hätten wir demnach viel zu lange Zeilen. Aus diesem Grund wird das Layout nach oben in der Ausdehnung begrenzt.

Max-Width

Die Begrenzung des Layouts nach oben hin wird auf den umschließenden .container angewendet. Mit der CSS-Eigenschaft max-width: 960px; hindern wir das Design daran sich über diesen Wert hinaus zu verbreitern.


#container {
	margin: 0 auto;
	max-width: 960px;
	background: white;
}

Die Formel

Nun geht es daran die restlichen Pixelwerte in Prozent umzurechnen. Die Größe des Bezugs-Elements ist dabei entscheidend. Normalerweise ist das Bezugs-Element das Eltern-Element, doch dazu später noch etwas mehr.
Mit folgender Formel lassen sich die Werte schnell umrechnen. Achtet drauf, ausreichend viele Nachkommastellen im CSS-Code anzugeben um ein sauberes Ergebnis zu erhalten.

Zielgröße in Pixeln / Bezugs-Element in Pixeln x 100 = Wert in Prozent

Am Beispiel des 600 Pixel breiten Inhaltsbereichs (#article) sieht die Rechnung wie folgt aus. Das Bezugs-Element ist der umschließende .container mit einer Breite von 960px.

600 / 960 * 100 = 62,5%

Der zugehörige CSS-Code wird also wie folgt angepasst. Den Rechnungsweg habe ich als Kommentar hinzugefügt.


#article {
	float: left;
	width: 62.5%; /* 600/960x100 */
}

Hilfsmittel zur Berechnung

Um euer Leben ein wenig zu erleichtern, möchte ich euch einige Online-Tools zur Berechnung des Verhältnisses vorstellen. Verschiedene "Responsive Calculator" findet Ihr hier.

Veränderte Bezugs-Elemente

Wenn ihr padding-Angaben in Prozent darstellen wollt, ist das Bezugs-Element übrigens nicht das umschließende Element. Entsprechend des CSS-Box-Models orientiert sich padding am Element selbst.

Erwähnenswert ist in diesem Zusammenhang der gelb hervorgehobene Textabsatz (.info). Ein Absatz ist ein Block-Element und hat daher automatisch eine Breite von 100%, gemessen am umschließenden Element. Da sich der Absatz innerhalb des #article befindet, muss daher auch die Breite des #article für die Berechnung verwendet werden.


.info {	
  background:yellow;
  padding: 5%; /* 30/600x100 */
  margin: 3.333333333% 0;  /* 20/600x100 */
}

Quellcode des flüssigen Layouts

Das war eigentlich auch schon alles. Ein wenig Rechenarbeit ist natürlich notwendig, aber nach kurzer Zeit basieren alle Abmessungen auf Prozentwerten.

Flexibler Aufbau auf Basis von Prozentwerten

Flexibler Aufbau auf Basis von Prozentwerten

CSS-Code

Der vollständige CSS-Code für alle Elemente sieht so aus:


body {
	margin: 20px;
	padding: 0;
}

#container {
	margin: 0 auto;
	max-width: 960px;
	background: white;
}

#header {
	float: left;
	background: orange;
	width:100%; 
	margin: 0 0 2.08333333% 0; /* 20/960x100 */
}

#logo {
	width: 12.5%; /* 120/960x100 */
	display: block;
	background: white;
	margin: 3.125% 2.08333333%; /* 30/960x100, & 20/960x100*/
	padding: 2.08333333%; /* 20/960x100 */
	text-align: center;
	text-decoration: none;
	color: grey;
}

#article {
	float: left;
	width: 62.5%; /* 600/960x100 */
}

.info {
	background:yellow;
	padding:5%; /* 30/600x100 */
	margin:3.333333333% 0;  /* 20/600x100 */
}

#aside {
	float: right;
	width: 29.16666667%; /* 280/960x100 */
	background: #FC0;
	padding: 2.08333333%; /* 20/960x100*/
}

#footer {
	clear: both;
	padding: 1.0416666667%; /* 10/960x100 */
	background: orange;
}

Beispiel des flüssigen Layouts anzeigen