Responsive Webdesign

Anordnung der Elemente

Autor: Dr. Florence Maurice • 9.9.2011 • ca. 5:10 Min

Inhalt

Flexibel angepasst
Anordnung der Elemente

Anordnung der Elemente Abhängig vom verfügbaren Platz sollen die Elemente üblicherweise unterschiedlich angeordnet werden. In folgendem Beispiel werden bei kleinem Viewport #navi und #inhalt untereinander angeordnet, bei einem größeren hingegen dank float nebeneinander....

Anordnung der Elemente

Abhängig vom verfügbaren Platz sollen die Elemente üblicherweise unterschiedlich angeordnet werden. In folgendem Beispiel werden bei kleinem Viewport #navi und #inhalt untereinander angeordnet, bei einem größeren hingegen dank float nebeneinander.

@media all and (max-width: 600px) {
#navi, #inhalt {
width: 100%;
}
}
@media all and (min-width: 600px) {
#navi, #inhalt {
width: 50%;
float: left;
}
}

Am besten ist es, die Variante für weniger Platz direkt bei der Erstellung zu berücksichtigen. Wenn man erst im Nachhinein nachbessert, hat man eventuell damit zu kämpfen, dass die Reihenfolge der Elemente nicht wie gewünscht ist.

Strategien für Bilder

Text passt sich unterschiedlich breiten Bereichen an. Nicht so Bilder. Wie kann man ein 400 Pixel breites Bild in einer Spalte integrieren, die je nach Layout einmal 200 und einmal 600 Pixel breit ist?Ein gangbarer Weg besteht darin, solchen im HTML-Code integrierten Bildern keine Breite über HTML zuzuweisen.

<img src="bild.jpg" alt=".." />

Stattdessen erhalten die Bilder ihre Breitenangabe über CSS - nämlich eine Maximalbreite von 100 Prozent.

img { max-width: 100%; }

Damit behält jedes Bild seine normale Breite, falls es aber breiter wäre als das umgebende Element, wird es auf die Breite dieses Elements skaliert. Diese Lösung hat allerdings einen kleinen Schönheitsfehler: Skalierte Bilder sehen unter Windows im IE < 8 leider nicht gut aus.Abhilfe bietet ein Skript von Ethan Marcotte, das beim 320-and-Up-Framework integriert ist. Eine etwas aufwändigere, aber dafür auch mächtigere Lösung für flexible Bilder bietet die Filament Group. Deren Lösung basiert darauf, dass unterschiedliche Bilder geladen werden: bei kleinerem Viewport das kleinere, bei größerem Bildschirm das größeres Bild.

Anpassbare Hintergrundbilder

Hintergrundbilder lassen sich besser handhaben, da sie per CSS geladen werden. So kann man beispielsweise unterschiedliche Hintergrundbilder je nach Medientyp einbinden.

@media all and (max-width: 600px) {
body {
background-image: url(klein.jpg);
}
}
@media all and (min-width: 600px) {
body {
background-image: url(gross.jpg);
}

CSS -Framework für Gridlayouts

Ein schönes Tool, das einem den Einstieg in anpassbare Designs erleichtert, ist das 1140-CSS-Grid-Framework. Es bietet ein flüssiges Layout, das sich an die Bildschirmgröße anpasst - dank Prozentangaben für die einzelnen Rasterfelder. Ab einer bestimmten Größe jedoch ändert sich die Darstellung und die einzelnen Rasterelemente werden untereinander dargestellt. Standardmäßig sind 12 Spalten vorgesehen, die beliebig verbunden werden können. Das Framework bringt die wichtigsten Dateien schon mit:

1140.css beinhaltet den CSS-Code für das flexible Gridlayout samt Media Queries für kleinere Bildschirme. Hier stehen zuerst die Angaben für den Desktop, danach erfolgen innerhalb von Media Queries die gesonderten Formatierungen für kleinere Bildschirme.
styles.css ist für eigene Layoutanpassungen vorgesehen und
css3-mediaqueries.js sorgt dafür, dass die Media Queries im IE < 9 funktionieren.

spezial.magnus.de/-sr6 zeigt häufig benutzte Bildschirmgrößen - und diese klaffen ganz schön auseinander.

Um das Framework zu benutzen, müssen Sie bestimmte Klassennamen einsetzen. Eine Zeile eines Rasters steht innerhalb von <div class="container">. Darin befindet sich dann ein <div class="row">. Innerhalb dieses Elements wiederum stehen die einzelnen div-Elemente mit Klassennamen, die angeben, über wie viele Rasterspalten sich die einzelnen Elemente erstrecken sollen. onecol bedeutet, dass sich das Element über eine Rasterspalte erstreckt, twocol entsprechend über zwei, threecol über drei und so weiter. Wichtig ist dabei, dass sich die Spalten insgesamt auf die Zahl 12 addieren und die letzte Spalte zusätzlich die Klasse last enthält.Im folgenden Beispiel sehen Sie eine Aufteilung einer Zeile - das erste Element erstreckt sich über vier Spalten, das zweite über zwei und das dritte über sechs.

<div class="container"><div class="row"><div class="fourcol">Vier Spalten</div><div class="twocol">Zwei Spalten</div><div class="sixcol last">Sechs
Spalten</div></div></div>

Die Layoutanpassungen funktionieren im IE dank JavaScript-Unterstützung - allerdings nur, wenn man das Beispiel auf einem Server ausführt.

Mobiles First - 320 and Up

Link-Tipps

Peter-Paul Koch empfiehlt die Kombination von Meta-Element und max-width für Media Queries: www.quirksmode.org/blog/archives/2010/09/combining_meta.html Browserunterschiede beim Laden von Bildern in Zusammenhang mit Media Queries: www.nealgrosskopf.com/tech/thread.php?pid=73 Tools1140-CSS-Grid-Framework samt Media Queries: cssgrid.net Projektvorlage 320 and up nach dem Ansatz Mobiles First: stuffandnonsense.co.uk/projects/320andup/ Mobile Boilerplate - Projektvorlage für mobile Webseiten: html5boilerplate.com/mobile/ Media Queries für den IE < 9: https://github.com/scottjehl/Respond#readme code.google.com/p/css3-mediaqueries-js/ Tool für anpassbare Bilder der Filament Group: https://github.com/filamentgroup/Responsive-Images Schöneres Skalieren von Bildern im Internet Explorer < 8: unstoppablerobotninja.com/entry/fluid-images/ Hilfe gegen den Resizing-Bug im iPhone: https://gist.github.com/901295

Einen anderen Ansatz verfolgt Andy Clarke mit seiner Projektbasis 320 and up. Es geht ihm um "responsible responsive design", das heißt verantwortungsvolles anpassbares Webdesign. Gerade um zu verhindern, dass bei kleinen Viewports Bilder oder ähnliche Medien geladen werden, die für diese Ausgabegeräte nicht vorgesehen sind, beginnt das grundlegende Design nicht bei den Desktops, sondern bei den kleinen Bildschirmen.Es gibt zwei Varianten:

Multiple linked stylesheets mit mehreren über link-Elemente eingebundenen Stylesheets
Single stylesheet mit allen Angaben innerhalb eines einzigen Stylesheet

Da Browser prinzipiell alle verlinkten Stylesheets laden, auch wenn aufgrund der Media-Query-Angabe diese gar nicht für sie gelten, sparen Sie über die zweite Variante HTTP-Requests. Dieses Basisprojekt bietet neben den schlau gestrickten HTML- und CSS-Dateien eine Sammlung von weiteren nützlichen JavaScript-Dateien:

Modernizr hilft dabei zu ermitteln, ob der aktuelle Browser ein bestimmtes Feature unterstützt oder nicht.
script.js beinhaltet ein Skript, das den Resizing-Bug im iPhone behebt, der bei einem Wechsel zwischen Hoch- und Querformat auftritt.

Mehrere JavaScript-Dateien sind speziell für den IE gedacht:

respond.js bessert bei der fehlenden Unterstützung für Media Queries im IE < 9 nach und ist besonders für den mobilen Einsatz geeignet.
imgsizer.js verbessert die Darstellung von skalierten Bildern im IE < 8.
DOMAssistant und selectivizr sorgen dafür, dass alle CSS3-Selektoren im IE < 9 funktionieren.

Der grundlegende Aufbau der CSS-Datei sieht folgendermaßen aus: Zuerst kommen ein Reset und allgemeine grundlegende Formatierungen. Dann folgen die Anpassungen für die unterschiedlichen Viewports - beginnend bei den kleinen Viewports:

@media print { }
@media only screen and (min-width:
480px) {}
@media only screen and (min-width:
768px) {}
@media only screen and (min-width:
992px) {}

Der Ansatz von Mobiles First und 320 and up hat den Vorteil, dass sichergestellt wird, dass Smartphones keine unnötigen Dateien laden. Der Nachteil ist, dass man, falls man mit dem IE < 9 unterwegs ist und und JavaScript abgeschaltet hat, dann nur die eigentlich für die mobilen Geräte vorgesehenen Formatierungen sieht.Das ist bei einer Lösung wie 1140 Grid anders. Hier erhält man die Formatierungen für den Desktop auch, wenn JavaScript deaktiviert ist und der Browser Media Queries nicht unterstützt.

1 2