Responsive Design Frameworks Dokumentation
freigegeben - Volker Schaefer
← Zurück zu Responsive Design Frameworks
- Grundgedanke
- Grid-System
- Typografie
- Vorgefertigte Elemente
- Media-Queries
- Vorteile
- Nachteile
- Browserunterstützung
- Verschiedene Frameworks
- Beispiel zur Umsetzung mit Skeleton
- Nützliche Links
- Quellen
Responsive Design Frameworks sind eine besondere Art der CSS-Frameworks. Sie liefern eine solide Grundlage um Webseiten zu entwickeln, die sich dynamisch an das jeweilige Endgerät anpassen. Dabei sind keine Grenzen gesetzt. Eine Webseite ist nach der Umsetzung mit einem dieser Frameworks auf einem 27“-Monitor genau so funktional, wie auf einem Smartphone. In der heutigen Zeit greifen immer mehr Menschen auch per Smartphone auf Webseiten zu. Um also möglichst viele Menschen anzusprechen, ist es heutzutage unumgänglich, seine Webseite für mobile Endgeräte zu optimieren.
Im Web existiert eine große Anzahl von Frameworks, welche sich teilweise sehr stark unterscheiden. Deshalb ist es wichtig, seine Bedürfnisse zu kennen und danach sein Framework zu wählen.
Im Großen und Ganzen sind diese Frameworks eine Ansammlung an CSS-Klassen. Diese Klassen sind im Hinblick auf dynamische Anpassung bereits mit CSS-Eigenschaften belegt. Oft verfügen sie auch über einige JS-Funktionen, die aber nicht für die Funktionalität des Frameworks an sich, sondern für die Bereitstellung von Extras zuständig sind.
Alle Frameworks basieren auf einem Grid-System. Das bedeutet, dass eine Webseite in beispielsweise 16 Spalten aufgeteilt wird. Diese Spalten haben alle die selbe Breite und einen identischen Zwischenabstand. Hat unsere Webseite also eine Breite von 960px und einen Spaltenabstand von 20px, so beträgt unsere Spaltenbreite abzüglich der 10px Außenabstand um das Grid bei einem 16er Grid 40px. Das Ganze sieht dann wie folgt aus:
In vielen Frameworks lassen sich die Inhalte nicht nur durch feste Spalten, sondern auch durch einfache Aufteilung in Drittel oder in zwei Hälften aufteilen. Mithilfe dieser Spalten lässt sich dann eine Webseite auf die verschiedenen Endgeräte anpassen und bis auf die Größe von Smartphones „herunterbrechen“. Durch die Spalten werden dann die sogenannten Breakpoints (siehe Responsive Design Breakpoints) definiert. Ist unsere Webseite gedrittelt, so werden die Spalten auf einem herkömmlichen Monitor nebeneinander und auf einem Smartphone untereinander dargestellt.
Auch Typografie wird von den Frameworks abgedeckt. Für Headlines sind beispielsweise schon feste Abstände festgelegt, die sowohl auf einem 27“-Bildschirm, als auch auf einem Smartphone funktionieren. Oft nutzen Frameworks eine sogenannte Baseline. Dabei wird eine Webseite horizontal in Zeilen eingeteilt. Diese Zeilen haben alle eine identische Höhe. Elemente werden dabei immer auf die Unterkante der Spalte gesetzt. Schriftgrößen werden dann häufig ebenfalls in diesen Schritten festgelegt.
Haben wir beispielsweise eine 7px-Baseline, wird die Standardschriftgröße auf 14px festgelegt und die Schriftgröße der Überschrift auf 21px. Man erkennt also, dass die angegebenen Größen immer restlos durch die Größe der Baseline teilbar sein müssen. Ist das nicht der Fall, muss mit der Zeilenhöhe gearbeitet werden. Nutzen wir also eine Schriftgröße von beispielsweise 11px, so müssen wir zusätzlich eine Zeilenhöhe von 14px definieren. Dabei wird immer der nächste, restlos teilbare, Betrag gewählt. Wird die Baseline sauber eingehalten, sorgt dies im Auge des Betrachters für ein saubereres Gesamtbild.
Einige Frameworks sind nicht nur auf die Anpassung an verschiedene Geräte ausgelegt, sondern liefern zusätzlich noch einige CSS-Eigenschaften für die Darstellung von Formularen, Headlines, Buttons etc.
Mit Darstellung ist in diesem Fall nicht nur die Optik gemeint, sondern auch wieder die Reaktion auf die Größe des Browserfensters. So bleibt auch die Optimierung von Formularen erspart. Die Formulare lassen sich dann auf einem Smartphone genauso einfach bedienen, wie auf einem herkömmlichen Monitor. Frameworks wie das Twitter Bootstrap liefern zusätzlich sogar ein Set an bereits optimierten Icons, die im Design frei verwendet werden dürfen.
Das Herz eines jeden Frameworks sind die Media Queries. Je mehr Queries vorhanden sind, desto dynamischer kann eine Webseite sich an Endgeräte anpassen. Mit Hilfe von Queries lassen sich die Größe des Browserfensters und andere Monitoreigenschaften auslesen. So ist es möglich, anzugeben, welche CSS-Eigenschaften bei einer bestimmten Bildschirmgröße angewendet werden sollen. Siehe auch CSS-Basics Medienspezifische Stylesheets und Media-Queries.
Der große Vorteil ist, dass die Webseite sich an nahezu jedes Gerät „von allein“ anpasst. Entwickelt man beispielsweise eine eigenständige mobile Webseite, so hat man doppelte Arbeit und erreicht trotzdem nicht so viele Endgeräte, wie mit einem Framework. Zwar ist die Erstellung einer Webseite mit einem Framework nicht ganz so einfach und muss bereits bei der Planung bedacht werden, bietet aber später weitaus mehr und ist zukunftsbasiert. Die entwickelte Webseite wird automatisch mit den meisten Geräten kompatibel sein, die in Zukunft entwickelt werden. Zusätzlich vergrößert sich der Kreis der potentiellen Nutzer, da eine optimierte Webseite wesentlich ansprechender ist, als eine unoptimierte Webseite, bei der der Nutzer mit seinem Smartphone beispielsweise zoomen und scrollen muss.
Ein weiterer Vorteil bei der Arbeit mit Frameworks ist, dass diese bereits auf Kompatibilität mit verschiedenen Browsern, unter anderem auch den meisten mobilen Browsern, getestet und darauf optimiert wurden. Zu dem gibt es zu jedem Framework meist eine Community, die einem bei Fragen zur Seite steht und an der Weiterentwicklung und Perfektion des Frameworks interessiert und beteiligt ist.
Ein Nachteil ist, dass dynamische Webseiten manche Gestaltungselemente, wie z.B. größere Bilder, nicht unterstützen. Minimalistische Webseiten sind weitaus einfacher umzusetzen, als komplexe Entwürfe. Bei komplizierten und aufwendigen Designs mit beispielsweise vielen Hintergrundgrafiken müssen, mit Hilfe der Media Queries, viele verschiedene Styles definiert werden. Das stellt kein Hindernis dar, sorgt aber für wesentlich mehr Arbeitsaufwand.
Nahezu alle Frameworks sind für alle gängigen Browser optimiert und getestet. Dazu gehören die meisten Desktop, sowie die meisten mobilen Browser. Bei älteren Browsern, die kein CSS3 und somit auch keine Media-Queries unterstützen wird die Webseite normal dargestellt, da die Queries nicht greifen können. Die Webseite erscheint also so, als wäre sie nicht responsive.
Skeleton ist neben dem Twitter Bootstrap momentan eines der meistgenannten Frameworks im Zusammenhang mit Responsive Webdesign. Es basiert auf einer 960px breiten Basis und bietet dem Nutzer ein 16er Grid-System, welches sich frei einteilen lässt. Skeleton ist ein Leichtgewicht in Sachen Responsive Design Frameworks. Es eignet sich durch diese Leichtheit sehr gut für den Einstieg in das Responsive Webdesign.
Lizenz: The MIT License (MIT)
Preis: kostenlos
Download: http://getskeleton.com/
Twitter Bootstrap wurde von, wie der Name bereits sagt, Twitter entwickelt. Es basiert auf einem 12er Grid, welches sich normalerweise über 940px erstreckt. Es kann je nach Viewport aber auch eine Breite von bis zu 1170px annehmen.
Bootstrap bietet eine Reihe von Features wie z.B. Icons, Buttons oder Alert-Boxen. Auf der Webseite der Entwickler kann man sich zusätzlich ein Framework generieren lassen, welches genau die Features enthält, die man benötigt.
Lizenz: Apache License v2.0
Preis: kostenlos
Download: http://twitter.github.com/bootstrap/
Foundation 3 wurde von ZURB entwickelt. Es basiert auf einem 12er Grid. Foundation nutzt das CSS-Framework SASS (siehe SASS-Dokumentation) und bietet auf der Entwicklerseite eine Menge an interessanten Extras, wie frei herunterladbare Templates für verschiedene Grundaufbauten. Zusätzlich gibt es einen Generator für ein personalisiertes Framework. Dort kann von der Anzahl der Spalten über Spaltenabstände und Farbgebung nahezu alles bestimmt werden.
Lizenz: The MIT License (MIT)
Preis: kostenlos
Download: http://foundation.zurb.com
Es existieren eine Vielzahl von weiteren Frameworks. Häufig ist der Aufbau sehr ähnlich und es ist oft Geschmackssache, mit welchem Framework man lieber arbeiten möchte. Wer sich zum ersten Mal mit einem solchen Framework auseinander setzen möchte, sollte ein Framework wählen, welches nicht zu überladen ist. Das gilt ebenso für die Umsetzung komplexer Projekte. Was nützt es dem Benutzer, wenn er die Vielzahl an mitgelieferten Buttons und sonstigen "Spielereien" erst anpassen muss, bevor er mit dem eigentlichen Projekte beginnen kann. Die Zeit, die diese Umbauten verursacht, kann in einem leichtgewichtigen Framework dazu genutzt werden, das Framework nahezu perfekt auf seine Bedürfnisse anzupassen.
Der Markt zum Thema Responsive Design Frameworks ist im Moment noch recht unklar. Es gibt sehr viele Frameworks, die alle ein ähnliches Ziel verfolgen. Die beiden bekanntesten sind „Twitter Bootstrap“ und „Skeleton“. Im folgenden wird Skeleton näher erklärt.
Skeleton kann kostenlos heruntergeladen werden. Es steht unter der MIT-Licence und kann somit für private, als auch für kommerzielle Zwecke genutzt werden. Skeleton ist ebenfalls unter https://github.com/dhgamache/Skeleton auf Github zu finden.
Das Skeleton-Paket kommt mit einem bereits vorgefertigten Template. Die Basisdateien sind folgende:
index.html
Diese Datei enthält Beispielcode und zeigt dem Nutzer bereits einige Einsatzmöglichkeiten und kann frei bearbeitet und angepasst werden.
base.css
Die base.css legt, wie der Name schon sagt, die Basis für das Framework fest. Hier sind die grundlegenden Styles definiert. Dabei handelt es sich um Styles für Überschriften, Absätze, Formulare und andere HTML-Elemente.
skeleton.css
Hier wird das 960er Grid, inkl. aller .columns und .container, definiert.
layout.css
Die layout.css ist die Datei, in der der Nutzer seine Styles definieren kann. Dort sind bereits Media-Queries vordefiniert.
Zusätzlich gibt es bereits einen Ordner mit Icons, die beispielsweise auf Smartphones geladen werden. In den Dateien sind in den meisten Fällen Kommentare gesetzt, die es dem Nutzer einfacher machen sich zurecht zu finden. Die wichtigsten Dateien sind also die index.html und layout.css.
Bei der Arbeit mit dem Skeleton-Framework ist es vorerst wichtig zu wissen, welche Klassen man wie zu nutzen hat. Die wichtigste Klasse ist die Klasse container. Sie umfasst einen festgelegten Bereich auf unserer Seite. Würde man die Seite in horizontale Streifen schneiden, so wäre jeder Streifen ein Container.
Innerhalb des Containers lassen sich die Inhalte nun auf 16 Spalten verteilen. Dies geschieht ebenfalls über Klassen. Die wichtigste Klasse dafür ist columns bzw. column zur Zusammenfassung mehrerer Spalten. Diese Klasse wird dann mit der Anzahl der Spalten kombiniert. Insgesamt stehen 960px Webseitenbreite zur Verfügung.
Die Elemente lassen sich nicht verschachteln. Es ist also nicht möglich, ein .column/.columns innerhalb eines anderen .column/.columns zu definieren.
Die im Framework hinterlegten Klassen zur Breitenangabe der Spalten sind folgende:
.container .one.column,
.container .one.columns
.container .two.columns
.container .three.columns
.container .four.columns
.container .five.columns
.container .six.columns
.container .seven.columns
.container .eight.columns
.container .nine.columns
.container .ten.columns
.container .eleven.columns
.container .twelve.columns
.container .thirteen.columns
.container .fourteen.columns
.container .fifteen.columns
.container .sixteen.columns
.container .one-third.column
.container .two-thirds.columnZusätzlich ist es möglich, Abstände zu definieren. Dies geschieht ebenfalls über das Grid-System. Diese Angaben sind optional und lassen sich mit den reinen Spaltenangaben kombinieren. Es handelt sich hierbei nur um links-Abstände. Die Zahl nach dem .offset-by gibt die Anzahl der Spalten an, die als Abstand festgelegt werden sollen. .offset-by-three steht beispielsweise für einen Abstand nach links in einer Breite von drei Spalten. Wichtig hierbei ist, dass auch hier immer die Klasse .container zusätzlich angegeben wird. Die verfügbaren Klassen sind folgende:
.container .offset-by-one
.container .offset-by-two
.container .offset-by-three
.container .offset-by-four
.container .offset-by-five
.container .offset-by-six
.container .offset-by-seven
.container .offset-by-eight
.container .offset-by-nine
.container .offset-by-ten
.container .offset-by-eleven
.container .offset-by-twelve
.container .offset-by-thirteen
.container .offset-by-fourteen
.container .offset-by-fifteenMöchte man also vier Spalten nebeneinander haben, welche sich responsive verhalten, so verwendet man die CSS-Klasse .four.columns, da 16 Spalten/4=4. Der Grundaufbau dafür sieht so aus:
<div class="container">
<div class="four columns">Spalte 1</div>
<div class="four columns">Spalte 2</div>
<div class="four columns">Spalte 3</div>
<div class="four columns">Spalte 4</div>
</div>
Ein weiteres Beispiel zur Veranschaulichung der Offset-Funktion:
Das Herzstück des Responsive Design, die Media Queries, befinden sich in der Datei layout.css.
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}Die in einem Media-Query angegeben Eigenschaften gelten nur für den jeweilig definierten Viewport (siehe Response Design Viewport). Von oben nach unten erklärt bedeuten die Queries folgendes:
- Der erste Query greift, sobald der Viewport kleiner als 960px in der Breite ist. Also ab dem Moment, wo die Webseite das erste mal durch das Framework an den Viewport angepasst wird.
- Der zweite Query gilt hauptsächlich für Tablet-Computer, da die angegebenen Werte dort meist Standard sind. Hier greift der Query für Viewports von 768px bis 959px.
- Der dritte Query gilt für alle mobilen Geräte mit einer Viewportbreite unter 767px.
- Der vierte Query gilt für mobile Geräte mit einer Viewportbreite von 480px bis 767px.
- Der fünfte und letzte Query stellt die kleinste Viewportgröße dar. Er greift nur bei Viewports, welche kleiner als 479px in der Breite sind.
- Das Schlüsselwort
onlyinnerhalb eines Media-Querys verhindert, dass ältere Browser den Query interpretieren. Moderne Browser ignorieren dieses Schlüsselwort.
Nun kommen wir zu Elementen, die wir für verschiedene Endgeräte anpassen müssen.
Oft besteht das Problem, dass ein Menü zu lang für die Anzeige eines Smartphones ist. Auf einem Desktopcomputer ist weitaus mehr Platz für die Navigation vorhanden, als auf einem Smartphone. Um diesen Anforderungen gerecht zu werden, verwenden wir die Media-Queries.
Gehen wir davon aus, das Menü ist mit Hilfe eines Listenelements aufgebaut.
<nav id="normal">
<ul>
<li><a href="seite1.html">Link 01</a></li>
<li><a href="seite2.html">Link 02</a></li>
<li><a href="seite3.html">Link 03</a></li>
<li><a href="seite4.html">Link 04</a></li>
</ul>
</nav>Der nächste Schritt besteht darin, das Menü in ein Dropdown zu konvertieren. Dieses Dropdownmenü wird dann unter dem "herkömmlichen" Menü zusätzlich eingebunden. Der Quellcode für das gesamte Menü lautet also wie folgt:
<nav id="normal">
<ul>
<li><a href="seite1.html">Link 01</a></li>
<li><a href="seite2.html">Link 02</a></li>
<li><a href="seite3.html">Link 03</a></li>
<li><a href="seite4.html">Link 04</a></li>
</ul>
</nav>
<nav id="responsive">
<select>
<option value="seite1.html">Link 01</option>
<option value="seite2.html">Link 02</option>
<option value="seite3.html">Link 03</option>
<option value="seite4.html">Link 04</option>
</select>
</nav>Wie man sieht, wird jedes li in ein option umgewandelt. Das href-Attribut des Links wird dabei als value übernommen. Die IDs #normal und #resposive helfen dabei, die Menüs später in CSS genau anzusprechen. Als nächstes muss das Dropdownmenü standardmäßig verborgen werden. Dazu wird in der Datei layout.css folgendes definiert:
nav#responsive {
display:none;
}Da nun das Dropdownmenü für alle Viewports "abgeschaltet" ist, widmen wir uns den Media-Queries. Hier kann das Menü gezielt für die jeweiligen Viewports wieder aktiv geschaltet werden. Dazu wird in der Datei layout.css unter den Media-Queries folgendes definiert bzw. ergänzt:
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
nav#responsive {
display:block;
}
nav#normal {
display:none;
}
}Wie man sieht wurde im Media-Query für alle mobilen Geräte das Dropdownmenü #responsive auf sichtbar und das normale Listenmenü #normal auf unsichtbar geschaltet.
Kommen wir nun zum letzten Schritt. Da ein Dropdownmenü nicht von sich aus als Menü funktionieren kann, muss ihm diese Fähigkeit erst mit Hilfe des Javascript-Frameworks jQuery (siehe auch jQuery-Dokumentation) gegeben werden. Dazu wird die Javascript Bibliothek jQuery eingebunden und folgendes per Javascript definiert:
$('nav#responsive select').change(function() {
window.location = $(this).find('option:selected').val();
});Diese Funktion besagt, dass bei Änderung der Auswahl des Dropdowns nav#resposive select der Value der aktuell angewählten Option als neue window.location gesetzt wird. Das bedeutet, der Browser wird auf den Dateipfad weitergeleitet, der als value angegeben wurde. Somit handelt das Dropdownmenü nun wie ein Link.
Gridgenerator für einfaches Gridverständnis