Design für unterschiedliche Bildschirmgrößen
Immer mehr wird Responsive Design zu einem probaten Mittel, um mit unterschiedlichen Bildschirmgrößen umzugehen. Bei der konkreten Umsetzung ergeben sich viele Fragen. Wir haben die Antworten.
Responsive Webdesign ermöglicht Layouts, die sich an verschiedene Bildschirmgrößen anpassen - was heute angesichts von Smartphones einerseits und Breitbildschirmen andererseits zunehmend wichtiger wird. Für Ethan Marcotte, der den Begriff in einem Artikel bei A List Apart geprägt hat, gehören ...
Responsive Webdesign ermöglicht Layouts, die sich an verschiedene Bildschirmgrößen anpassen - was heute angesichts von Smartphones einerseits und Breitbildschirmen andererseits zunehmend wichtiger wird. Für Ethan Marcotte, der den Begriff in einem Artikel bei A List Apart geprägt hat, gehören drei Ingredienzien dazu:
- Ein flüssiges Rasterlayout (fluid grid), das heißt ein Rasterlayout mit Breitenangaben in Prozent
- Flexible Bilder: Auch Bilder müssen sich flexibel in das Layout integrieren und in ihren Dimensionen an die unterschiedlichen Gegebenheiten anpassen.
- Eine wichtige Komponente beim Responsive Webdesign sind die Media Querys: Mit den in CSS3 eingeführten Media Querys lassen sich bestimmte Formatierungsvorgaben gezielt für bestimmte Viewports bereitstellen; beispielsweise können Sie damit Inhalte bei wenig Platz einspaltig anordnen, bei mehr verfügbarem Platz mehrspaltig.
Flüssiges Rasterlayout
Mit Media Querys definieren Sie, wann bestimmte grundlegende Änderungen im Layout stattfinden sollen. Damit Ihre Seitenaber auch bei allen möglichen Zwischenstufen gut aussehen, müssen Sie Ihr Layout flüssig gestalten, also Breitenangaben in Prozent vornehmen.Prozentwerte in CSS beziehen sich immer auf das Elternelement.
<div style="width: 80%; margin:
auto"><div style="width: 80%; float: left;
background-color: yellow">Eins</div><div style="margin-left: 80%;
background-color: red"> Zwei</div></div>Das umfassende Element ist 80 Prozent breit. In ihm befindet sich ebenfalls ein Element, das 80 Prozent breit ist. Wie breit nun die beiden Elemente dargestellt werden, hängt vom Kontext ab.Nehmen wir an, das Browserfenster ist 980 Pixel breit aufgezogen und im inneren Bereich des Browserfensters stehen 960 Pixel zur Verfügung. Dann ist das äußere Element 768 Pixel breit, was sich aus 960 Pixeln multipliziert mit 0,8 ergibt. Beim inneren div-Element beziehen sich die 80 Prozent auf das Elternelement. Wenn dieses wie gerade berechnet, 768 Pixel breit ist, so ist das innere Element 768 Pixel mal 0,8, also gut 614 Pixel breit.Deswegen muss man bei der Arbeit mit Prozenten immer berücksichtigen, was der Bezugspunkt ist und wie die Elemente ineinander verschachtelt sind.Bei der Realisierung von Layouts hat man oft den umgekehrten Fall: Die Pixelwerte stehen fest und die Prozentwerte müssen berechnet werden. Hierfür hat Ethan Marcotte eine schöne Formel parat, nämlich "target : context = result". Das heißt: Die Zielbreite geteilt durch die Breite des Kontexts ist das gewünschte Ergebnis.Gehen wir von einem Layout aus, das auf 960 Pixel angelegt ist. Die linke Spalte ist 300 Pixel breit, die rechte 660 Pixel. Um die Breite der linken Spalte in Prozent umzurechnen, nimmt man 300 Pixel (das Ziel) und teilt es durch 960 Pixel (das ist der aktuelle Kontext). Ergebnis ist 0,3125. Damit ist die gesuchte Breite 31,25 Prozent.Diese Formel ist insbesondere hilfreich bei der Berechnung der Breitenangaben von Unterelementen. Nehmen wir an, innerhalb der linken Spalte von 300 Pixeln gibt es einen Abstand von 35 Pixeln. Jetzt ist das Ziel 35 Pixel, der Kontext 300 Pixel, das Ergebnis ist also 11,666 Prozent. Auf diese Art lassen sich alle Breiten und Abstände umrechnen.Offen ist allerdings noch, was man als Gesamtbreite angibt. 100 Prozent passt nicht, weil man meist etwas Abstand rechts und links haben will. 90 Prozent ist normalerweise eine gute Wahl.
Flexible Bilder
Bei Texten, die sich problemlos umbrechen lassen, funktionieren flexible Breiten. Schwieriger ist es bei Elementen, die eine inhärente Breite besitzen, wie beispielsweise Bilder. Ethan Marcotte hat aber auch dafür eine einfache Lösung parat:
img { max-width: 100%;}Dann behalten Bilder ihre normale Größe, sie können aber nie größer sein als der sie umgebende Block. Für das Problem, dass skalierte Bilder in älteren Windows-Versionen unschön aussehen, gibt es eine Javascript-Lösung von Ethan Marcotte.
Diese Lösung ist perfekt - aber nur solange man den Desktop-Browser als Normalfall ansieht. Schlechter sieht es für mobile Nutzer aus. Ein Bild, das für Desktop-Browser eine vernünftige Größe hat, ist für den mobilen Zugriff in aller Regel zu groß und braucht zu lange zum Laden.Inzwischen gibt es eine Reihe von Lösungen zur Behebung des Problems - etwa Adaptive Images von Matt Willcox, das den Vorteil hat, dass es sich leicht in bestehende Projekte integrieren lässt.
Adaptive Images
Das Kernstück von Adaptive Images ist ein PHP-Skript, das die Skalierung der Bilder übernimmt. Damit das funktioniert, brauchen Sie PHP 5.x mit GD Lib. Weitere wichtige Komponenten dieser Lösung sind eine .htacess-Datei, die die Bildanfragen an das PHP-Skript weiterleitet. Außerdem gibt es ein Javascript-Schnipsel, das die Viewportgröße ausliest und in einem Cookie speichert. Darauf basierend können dann die für die Größe optimierten Bilder geladen werden.Und so funktioniert es:
- Die .htaccess-Datei speichern Sie im Wurzelverzeichnis des Webprojekts. In dieser Datei können Sie Verzeichnisse angeben, die von der Bildskalierung nicht betroffen sein sollen. Sinnvoll ist es beispielsweise, hier das Verzeichnis anzugeben, in dem sich Symbole befinden.
- Auch die Datei adaptive-images.php speichern Sie im Hauptverzeichnis des Projekts ab. Sie übernimmt die Hauptarbeit bei der Skalierung der Bilder.
- Erstellen Sie außerdem ein beschreibbares Verzeichnis ai-cache, in dem die skalierten Bilder gespeichert werden.
<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+'; path=/';</script>Dieser Code setzt ein Cookie mit dem Wert der aktuellen Auflösung, anhand dessen kann das jeweils benötigte Bild in der richtigen Größe bereitgestellt werden.Die Einstellungen für das Skript nehmen Sie in der Datei adaptive-images.php vor. Hier können Sie beispielsweise die verschiedenen Viewportgrößen angeben, für die eigene skalierte Bilder zur Verfügung stehen sollen.
$resolutions = array(1382, 992,
768, 480);Sehr wichtig ist ebenfalls der Parameter $mobile_first:
$mobile_first = TRUE;Dadurch wird, wenn kein Cookie vorhanden sein sollte, die mobile Version des Bildes gesendet. Wenn Sie hier FALSE angeben, wird ohne Cookie die Variante für große Bildschirme gesendet.Bedenken Sie aber beim Testen, dass wirklich die Breite des Bildschirms ausgelesen wird, nicht die Breite des Browserfensters.
Media Querys
Eine der wichtigsten Komponenten von Responsive Design sind die Media Querys. Über diese in CSS definierte Möglichkeit können Sie gesonderte Layoutvorgaben je nach Viewportgröße machen. Das folgende Stylesheet wird beispielsweise nur geladen, wenn die Viewportgröße des anfordernden Geräts mindestens 600 Pixel beträgt:
<link rel="stylesheet" href="klein.
css" media="screen and (min-width: 600px)" />Diese Angaben können Sie auch innerhalb eines Stylesheets machen:
@media screen and (min-width: 600px)
{}Damit das dann auch auf Smartphones funktioniert, müssen Sie das normale Zoomen der Smartphones unterbinden.
<meta name="viewport" content="width=
device-width,initial-scale=1" />Das Grundprinzip ist also klar - aber es gibt viele Wege, Media Querys zu nutzen. Gerade wenn man Smartphones und andere mobile Geräte berücksichtigen will, empfiehlt sich ein Mobile-First-Ansatz.
- Die ersten Angaben stehen außerhalb des Stylesheets und sind gedacht für Geräte mit sehr kleinem Viewport und außerdem für solche, die keine Media Querys verstehen.
- Darauf aufbauend kommen dann die Änderungen für Bildschirme einer bestimmten Größe, also beispielsweise das Zweispaltenlayout.
- Das lässt sich dann beliebig erweitern mit zusätzlichen Angaben für größere Viewportbreiten.
body {
/* grundlegende Formatierungen fuer kleine Bildschirme und fuer Geraete
ohne Support von Media Querys */
}
@media screen (and min-width: 480px)
{
/* Zusaetzliche Angaben fuer kleine
Viewports */
}
@media screen (and min-width: 960px)
{
/* Zusaetzliche Angaben fuer groessere
Viewports */
}Der IE < 9 braucht allerdings Nachhilfe. Sie können beispielsweise innerhalb von konditionalen Kommentaren die Stylesheetangaben für den Desktop noch einmal einbinden:
<!--[if lt IE 9 & !IEMobile]><!-- Stylesheet einbinden fuer den IE
--><![endif]-->Durch diese konditionalen Kommentare wird sichergestellt, dass die darin stehenden Angaben nur vom IE vor Version 9, aber nicht vom IE Mobile, berücksichtigt werden. Eine Alternative hierzu wäre das Nachbessern per Javascript beispielsweise über respond.js.
Breakpoints
Heiß diskutiert wird die Frage, wie viele @media-Regeln man braucht und welche Werte richtig sind. Es geht also darum, die Bruchstellen (Breakpoints) des Layouts zu ermitteln, ab wo genau neue Angaben benötigt werden.Für Breakpoints gibt es keine allgemeingültigen Werte, es hängt vom Projekt und den Inhalten ab. Aber natürlich sollten Sie auch die gängigen Größen im Kopf haben.
- 320 Pixel - iPhone im Hochformat
- 480 Pixel - kleines Display, auch iPhone Querformat
- 600 Pixel - kleine Tablets
- 768 Pixel - iPad im Hochformat
- 1024 Pixel - manche Laptops, iPad im Querformat
- 1200 Pixel - größere Monitore
Tabellen
Layouttabellen sind längst passe`, aber für tabellarische Daten sind Tabellen die korrekte semantische Auszeichnung. Bei einem Responsive Webdesign stellen Tabellen eine besondere Herausforderung dar, da sie einen vorgegebenen Platz benötigen. Eine Tabelle mit 10 Spalten beispielsweise lässt sich schlecht auf eine Breite von 320 Pixeln zusammenquetschen. Und horizontales Scrollen sollte man vermeiden.Eine schöne Lösung kommt von Chris Coyier. Sie besteht darin, dass bei kleinem Viewport die Zellen der Tabelle als normale Blockelemente angezeigt werden, vor denen die Beschriftung über erzeugte Inhalte eingefügt wird.Gehen wir von einer einfachen Tabelle mit folgender Struktur aus:
<table><tr><th>Produkt</th><th>Besondere Eigenschaften</th><th>Beste Pflanzzeit</th><th>Bluetenfarbe</th><th>Verfuegbarkeit</th><th>Preis</th></tr><tr><td>Petersbirne</td><td>Auch bekannt als Honigbirne, Lorenzbirne, Rote Margarethenbirne. </td><td>Herbst</td><td>weiss </td><td>ja </td><td>12,00 Euro</td></tr><!--Weitere Zeilen ausgelassen --></table>Dann können Sie Sonderangaben für schmale Viewports machen, bei denen die Inhalte nicht mehr ohne Scrollen lesbar sind:
@media only screen and (max-width:
600px) {
}Die nun im Folgenden beschriebenen Angaben stehen innerhalb der geschweiften Klammer der Media-Query-Angabe. Zuerst einmal muss man die Darstellung als Tabelle ausschalten. Das erreichen Sie, indem Sie alle an der Tabelle beteiligten Elemente zu Blockelementen machen.
table,td, tr {
display: block;
}Die Überschriften werden zunächst nicht mehr gebraucht und ausgeblendet.
th {
position: absolute;
top: -9999px;
left: -9999px;
}Jetzt kommen die Formatierungen der einzelnen Zeilen an die Reihe. Sie werden relativ positioniert und erhalten einen Innenabstand von 30 Prozent. Dieser Innenabstand ist ein Platzhalter, dort werden danach die Tabellenbeschriftungen eingefügt:
td {
position: relative;
padding-left: 30%;
}Die Tabellenüberschriften werden jetzt vor die einzelnen Zellen gesetzt. Über position: absolute wird die Position festgelegt. Diese bezieht sich auf die eigentlichen td-Elemente, für die position: relative bestimmt war. Die mit width festgelegte Breite für die Beschriftung korreliert dabei mit dem über padding-left dafür reservierten Platz.
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 30%;
}Zum Schluss wird den einzelnen Tabellenzellen die richtige Beschriftung über erzeugte Inhalte zugeordnet. Die Zuordnung erfolgt über den CSS3-Selektor :nth-of-type(), über den Sie das soundsovielte Kindelement seiner Art auswählen können.
td:nth-of-type(1):before { content:
"Produkt"; }
td:nth-of-type(2):before { content:
"Eigenschaften"; }
td:nth-of-type(3):before { content:
"Pflanzzeit"; }
td:nth-of-type(4):before { content:
"Bluetenfarbe"; }
td:nth-of-type(5):before { content:
"Verfuegbarkeit"; }
td:nth-of-type(6):before { content:
"Preis"; }Problematisch ist dabei der IE, der die mit per display: block ausgezeichneten Tabellenelemente falsch darstellt. Deswegen empfiehlt es sich, die gesamten Angaben in einem Stylesheet zu machen, das vom IE nicht gelesen wird.
www.alistapart.com/articles/responsive-web-design/ www.abookapart.com/products/responsive-web-design unstoppablerobotninja.com/entry/fluid-images/ adaptive-images.com www.cloudfour.com/responsive-imgs-part-2/ https://github.com/scottjehl/Respond www.slideshare.net/yiibu/pragmatic-responsive-design www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design css-tricks.com/9096-responsive-data-tables/ jsbin.com/emexa4 fitvidsjs.com
Weitere Vorschläge zur Darstellung von Tabellen auf kleinen Displays kommen von Scott Jehl. Man könnte die Tabelle auf kleinen Bildschirmen auch als Diagramm anzeigen lassen - sofern die Daten dafür geeignet sind.Eine spezielle Herausforderung für das Responsive Webdesign ist die Flexibilisierung von Videos, für die es aber schöne Javascript-Lösungen gibt. Auch nicht ganz trivial ist ein gutes Handling der Navigation. Eine Navigation, die auf dem Desktop gut aussieht, braucht auf einem kleinen Bildschirm meist einfach zu viel Platz. Schließlich soll auf dem Bildschirm ja ohne Scrollen mehr zu sehen sein als Logo und Navigation.Gleichzeitig dürfen die Menüpunkte nicht zu klein sein, damit sie mit den Fingern per Touchscreen bedienbar sind. Eine sinnvolle Lösung ist es sicher, mit einer ausklappbaren Navigation zu arbeiten, wie es der Boston Globe zeigt.Responsive Webdesign ist noch eine relativ junge Technik, aber parallel zu neuen Problemen, die bei der praktischen Anwendung auftauchen, gibt es auch neue kreative Lösungen. Teilweise kommt man aber mit CSS alleine nicht weiter, sondern muss zu anderen Techniken greifen wie beispielsweise bei der Behandlung von Bildern.
