Es gibt drei zentrale Elemente, die ein Responsive Webdesign ausmachen:

  1. Ein flexibles Grid
  2. Flexible Bilder und Medien
  3. Mediaqueries

Die wichtigste Eigenschaft eines Responsive Webdesign ist das flexible Gestaltungsraster oder auch Grid genannt.

Mit einem flexiblen Grid wird es ermöglichst Texte automatisch an die unterschiedlichen Bildschirme anzupassen.

Damit aber das Grid wirklich flexibel bleibt, müssen neben Texten auch die eingebundenen Bilder und Videos flexibel sein.

Um auf die unterschiedlichen Bildschirmgrößen der verschiedenen Endgeräte reagieren zu können, wurden in CSS3 die sogenannten Mediaqueries eingeführt. Die Mediaqueries ermöglichen es, bestimmte Parameter wie Viewport oder Bildschirmgröße abzufragen und dazu ein entsprechendes CSS auszuliefern.

Flexibles Grid für Responsive Webdesign

 

Flexibles Grid erzeugen

Im Webdesign gibt es durch die unterschiedlichen Auflösungen und Bildschirmgrößen keine festen Begrenzungen wie beim Printdesign. Beim Printdesign hat man die festen Größen eines Papierblatts, Plakats oder einer Buchseite.

Beim Webdesign kann sich die Breite und die Höhe beliebig verändern.

Webdesigner haben sich bisher damit beholfen, eine imaginäre Seite mit fixen Dimensionen, basierend auf die gängigen Bildschirmbreiten festzulegen.

Das sah meistens so aus:

.page {
width: 1080px;

}

Um ein statisches Layout in ein flexibles Webdesign zu ändern, müssen wir uns den grundlegenden Aufbau einer Website ansehen.

Eine Website, bzw. ein Layout basiert auf einem 12-spaltigen Grid mit jeweils 60px breiten Spalten und 30px breiten Spaltenabständen. Das ergibt eine Gesamtbreite von 1080px.

Um das statische Layout jetzt in ein flexibles Layout zu ändern, werden die Pixelangaben in Relation zueinander gesetzt. Das kann mit Prozentwerten in CSS realisiert werden.

Für die Beurteilung der Verhältnisse brauchen wir erst mal ein HTML Grundgerüst:

<body>
<div class="page">
<div class="navigation">
...
</div>
<div class="content">
<div class="content_main">
...
</div>
<div class="content_right">
...
</div>
</div>
<div class="footer">
....
</div>
</div>
</body>

Die Klasse page ist der äußerste Container. Wir hatten der Klasse page schon eine Breite von 1080px zugewiesen. Das belassen wir erst einmal so. Die Breite der Navigation, des Contents und des Footers sollen erst einmal auch über die ganze Breite gehen. Von daher wird hier auch nichts geändert. Als Erstes kümmern wir uns um die Haupt- und Seitenspalte des Contents. Um die Spalten flexible zu machen, müssen wir die Verhältnisse prozentual angeben. Die können wir mit der folgenden Formel ausrechnen:

Zielgröße ÷ Gesamtbreite x 100 = gesuchter Prozentwert

Wir wollen z. B. für die Hauptspalte (Klasse content_main) eine Zielgröße von 700px. Die Gesamtbreite ist 1080px. Nun teilen wir die Zielgröße durch die Gesamtbreite und multiplizieren es mit 100:

700 ÷ 1080 x 100 = 64.81481481481481%;

Die Prozentzahl können wir dann in unser CSS übernehmen:

.content_main {
width: 64.81481481481481%;
}

Mit der gleichen Formel rechnen wir die Seitenspalte (Klasse content_right) aus. Wir wollen z. B. für die Seitenspalte eine Breite von 260px:

260 ÷ 1080 x 100 = 24.07407407407407%;

Die Prozentzahl für die Seitenspalte können wir dann wieder in unser CSS übernehmen:

.content_left {
width: 24.07407407407407%;
}

Sie sollten die Zahlen nicht runden, da es das Layout negativ beeinflussen kann.

Nun müssen wir die Gesamtbreite der Seite (Klasse page) so anpassen, dass das Layout auch noch bei kleineren Bildschirmen flexibel bleibt. Dafür definieren wir in CSS eine Maximalbreite von 1080px:

.page {
max-width: 1080px;
}

Mit dieser Angabe bleibt das Layout bei kleineren Bildschirmen flexibel.

 

Abstände flexibel gestalten

Wir möchten, dass in unserem Beispiel die Haupt- und Seitenspalte einen Abstand zum Rand haben. Bei beiden Spalten soll der Abstand bzw. der Padding 30px sein.

30 ÷ 1080 x 100 = 2.777777777777778%

Die Prozentzahl für die Abstände können wir dann wieder in unser CSS übernehmen:

.content_main {
float:left;
width:64.81481481481481%;
padding: 2.777777777777778%;
}

.content_left {
float:left;
width:24.07407407407407%;
padding: 2.777777777777778%;
}

Nun müssten alle unsere Prozentangaben, wenn wir sie addieren, 100 % ergeben. Da die Abstände links und rechts vorhanden sind, müssen wir die Angabe mal vier nehmen:

64.81481481481481% + 24.07407407407407% + (4 x 2.777777777777778%) = 100%

Jetzt müssten Sie das Browserfenster beliebig verkleinern und vergrößern können. Sowohl die Inhalte als auch die Abstände passen sich jetzt dem Bildschirm an.

 

Haben Sie Fragen oder Probleme beim Erstellen von flexiblen Grids für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.