4.4    Bestandteile einer responsiven Webseite 

Vor allem drei technische Aspekte kennzeichnen eine responsive Webseite:

1. flexibles Raster (Fluid Grid)

2. der Einsatz von Media Queries

3. flexible Medieninhalte (vor allem Bilder und Videos)

Schauen wir uns die Aspekte genauer an.

 

4.4.1    Flexible Raster 

Traditionellerweise wurden die Webseitenmaße mit Pixeln definiert. Durch die veränderten Rahmenbedingungen entsprechen Pixelwerte aber nicht mehr den aktuellen Anforderungen. Responsive Webseiten werden mit relativen Einheiten wie Prozentwerten und nicht mit fixen Einheiten wie Pixeln umgesetzt. Eine Ausnahme stellen adaptive Layouts dar (siehe Abschnitt 4.2.1, »Adaptive Layout vs. Responsive Layout«). Hier werden mehrere Layouts mit fester Pixelbreite definiert, die je nach Bildschirmauflösung eingeblendet werden. Richtige responsive Webseiten sind aber flexibel.

Fast allen modernen Webseiten liegt ein Raster zugrunde (siehe auch Kapitel 8, »Layout und Raster«), das früher in CSS und heute noch zwangsläufig in Photoshop mit Pixeln definiert ist.

Betrachten wir die Entwicklung von einem statischen zu einem flexiblen Raster einmal an einem Beispiel: Die Gesamtbreite des Layouts beträgt 1.200 Pixel. Die einzelnen Spalten betragen 800 und 400 Pixel. Die statische Definition der Breiten würde demnach folgendermaßen aussehen:

#wrapper{ width: 1200px; }
#content{ width: 800px; }
#sidebar{ width: 400px; }

Listing 4.1    Statische Rasterdefinition

Sollen die Spalten flexibel werden, müssen die Pixelwerte in Prozent umgerechnet werden. Dazu gibt es folgende Berechnungsformel, die im ersten Moment schlimmer aussieht, als sie eigentlich ist: Zielgröße ÷ Kontext × 100 = gesuchter Prozentwert

In unserem Fall des Inhaltscontainers ist die Zielgröße 800 Pixel, der Kontext ist die Gesamtbreite (also die 1.200 Pixel des Wrappers). Dann wird mit 100 multipliziert, um Prozentwerte zu bekommen. Das sieht dann folgendermaßen aus:

800 ÷ 1.200 × 100 = 66,666667 %

Abbildung 4.15    Beispiellayout mit zwei fixen Spalten

Meistens ergibt sich ein krummer Wert, der aber so in CSS übernommen werden kann. Ab- oder aufrunden ist hier nicht zu empfehlen, da so die Layouts sehr schnell nicht mehr passen. Würden wir z. B. 67 % definieren, bräuchte die Spalte mehr Platz und würde den folgenden sidebar-Container in die nächste Reihe verschieben, mit anderen Worten: Das Layout wäre zerschossen. Die gleiche Formel für den zweiten Container ergibt:

400 ÷ 1.200 × 100 = 33,333333 %

In CSS könnten wir also definieren:

#wrapper{ width: 1200px; }
#content{ width: 66,666667%; }
#sidebar{ width: 33,333333%; }

Listing 4.2    Flexible Rasterdefinition

Als Ergebnis ist im Browser kein Unterschied feststellbar. Logisch, wir haben die Pixelwerte in Prozentwerte umgerechnet, aber jegliche Flexibilität wird durch den wrapper mit einer festen Pixelbreite genommen. Bekommt dieser auch Prozentwerte, wird das komplette Layout flexibel und der Effekt der beiden Container sichtbar:

#wrapper { width: 90%; }

Listing 4.3    Definition eines flexiblen Rahmens

Abbildung 4.16    Ein flexibles Layout mit Prozentwerten

Eine Gesamtbreite des Layouts von 90 % sorgt bei sehr großen Auflösungen eben auch für sehr breite Container. Zeilenlängen werden so schnell unlesbar. Daher hat sich in der Praxis etabliert, den wrapper nach oben zu begrenzen:

#wrapper { max-width: 1200px; }

Listing 4.4    Definition einer Obergrenze der Layoutbreite

So breitet sich das Layout nur bis zu einer festen Breite aus, darunter ist das Layout flexibel.

Mit der Kontextformel lassen sich so alle Breiten und auch benötigte (Innen- und Außen)abstände berechnen. In Abschnitt 8.4, »Ein eigenes Raster anlegen«, wird ausführlich ein eigenes Raster in Photoshop angelegt und in HTML/CSS umgesetzt.

 

4.4.2    Media Queries 

Abbildung 4.17    Bei geringeren Auflösungen werden die einzelnen Spalten aber entsprechend sehr klein.

Das Layout ist recht einfach mit Prozentwerten flexibel geworden. Aber bei sehr kleinen Auflösungen sehen die Container nicht mehr gut aus (siehe Abbildung 4.17). Media Queries helfen, das Layout dort anzupassen, wo ein flexibles Raster an seine Grenzen stößt. Die Größenunterschiede heutiger Geräte sind so unterschiedlich, dass sich Layouts nicht ohne Ende ausdehnen oder stauchen lassen. Mithilfe von Media Queries (einer Neuerung in CSS3) werden sogenannte Breakpoints definiert, also feste Umbruchpunkte, an denen andere CSS-Zuweisungen erfolgen.

Es gibt zwei Anweisungen, eine maximale Breite und eine minimale Breite, die sich jeweils auf die Größe des Browserfensters beziehen.

@media only screen and (max-width: 600px){
/* CSS für Browserbreiten < 600 Pixel */
}

Listing 4.5    Media Queries für eine maximale Breite

Durch die Angabe @media only screen wird der folgende Quellcode nur von Bildschirmgeräten ausgeführt (eine andere Angabe ist print, siehe Kapitel 16, » Tipps, Tricks und Tools«). Innerhalb der geschweiften Klammern steht dann der CSS-Code, der nur bis zu einer Bildschirmbreite von 600 Pixeln ausgeführt werden soll.

In unserem Beispiel könnte man damit also bei kleineren Bildschirmen die Container über die volle Breite laufen lassen:

@media only screen and (max-width: 600px){
#content, #sidebar { width: 100%; }
}

Listing 4.6    Bei kleinen Auflösungen gehen die Container über die volle Breite (100 %).

CSS-Angaben, die bei einer Mindestbreite ausgeführt werden sollen, werden mit min-width umgesetzt. Diese Angabe wird bei der Mobile-first-Strategie eingesetzt. Immer wenn eine Mindestbreite erreicht ist, kommen neue CSS-Angaben dazu.

Abbildung 4.18    Lösung: Bei kleinen Auflösungen erstrecken sich die Spalten über die volle Breite.

Fixe vs. individuelle Breakpoints | Die Frage ist, bei welchen Werten die Breakpoints gesetzt werden. Gerne werden vordefinierte Breakpoints eingesetzt, die auch häufig in Tutorials zum Einsatz kommen. Vordefinierte Breakpoints sind dann hilfreich, wenn man allgemeingültige Layouts umsetzt, wie eben in Tutorials oder auch in Frameworks (siehe Abschnitt »Frameworks« in Abschnitt 7.3.2, »Design-Styleguide«).

Irgendwo müssen Breakpoints gesetzt werden. Häufig orientiert man sich dabei an bestimmten Geräteauflösungen. Typische Auflösungen gibt es leider nicht, da die Geräte und deren Auflösungen zu unterschiedlich sind. Meistens müssen daher das iPad und das iPhone herhalten als repräsentative Vertreter der Gerätetypen Smartphone und Tablet.

Abbildung 4.19    mydevice.io/devices liefert die Auflösungen von allerhand mobilen Geräten.

Das beliebte Framework Bootstrap (getbootstrap.com) setzt folgende Breakpoints ein:

@media (min-width:768px){
/* CSS für kleinere Bildschirme (Smartphones) */
}
@media (min-width:992px){
/* CSS für mittlere Bildschirme (Tablets, Desktop) */
}
@media (min-width:1200px){
/* CSS für größere Bildschirme */
}

Listing 4.7    Die Breakpoints des Frameworks Bootstrap

Verbreitete allgemeine Breakpoints sind:

• 320 Pixel – Smartphone Portrait

• 480 Pixel – Smartphone Landscape

• 786 Pixel – Tablet Portrait

• 1.024 Pixel – Tablet Landscape, Notebook, Desktop-Monitore

• 1.200 Pixel – große Bildschirme

Eine Orientierung an bestimmten Geräten mag nur in sehr seltenen Fällen hilfreich sein. Auch vordefinierte Breakpoints sind im konkreten Falle eher ungünstig. Besser ist es, individuell für das Projekt bzw. das Layout die Breakpoints festzulegen. Dazu wird überprüft, innerhalb welcher Breite ein Layout »funktioniert«, also gut aussieht.

Einhergehend mit dem Mobile-first-Ansatz wird zuerst die Layoutvariante per CSS für kleine Bildschirme (und »schwache« Browser) erstellt. Nach und nach werden dann Breakpoints gesetzt für größere Bildschirme. Die passenden Breakpoints lassen sich durch Austesten finden. Einfach das Browserfenster größer ziehen und schauen, ab wann das Layout nicht mehr gut aussieht bzw. die Inhalte nicht mehr gut lesbar sind und ab wann bestimmte Design-Elemente das Layout ergänzen können. Hier ist es dann Zeit für einen neuen Breakpoint. Dieses Verfahren wird dann bis zur größten Layoutvariante durchgeführt.

Dieses Vorgehen zusammen mit einem flexiblen Layout sichert, dass die Webseite jederzeit funktioniert. Während eine adaptive Webseite meist nur an den Breakpoints gut aussieht, sichert eine responsive Webseite auch das Aussehen zwischen den Breakpoints und funktioniert lückenlos einwandfrei.

Exemplarische Media Queries für einen Mobile-first-Ansatz könnten folgendermaßen aussehen:

/* CSS für kleine Bildschirme (Smartphone) */
@media only screen and (min-width: 480px) {
/* CSS für Smartphones (Landscape) und kleine Tablets */
}
@media only screen and (min-width: 768px) {
/* CSS für Tablets (Portrait) */
}
@media only screen and (min-width: 1024px) {
/* CSS für Tablets (Landscape), Laptops */
}
@media only screen and (min-width: 1260px) {
/* CSS für 15' Laptops und Desktop-Monitore */
}

Listing 4.8    Media Queries für Breakpoints nach dem Mobile-first-Ansatz

Zuerst werden allgemeine CSS-Definitionen getroffen, die dann nach und nach ergänzt werden. Die Breakpoints können auch weiter eingegrenzt werden, wenn beispielsweise CSS-Zuweisungen nur innerhalb eines bestimmten Bereichs gelten sollen, so wie es der CSS-Code auf der nächsten Seite zeigt.

@media only screen and (min-width: 768px) and (max-width: 1024px){
/* CSS nur für Browserbreiten zwischen 768 und 1024 Pixel */
}

Listing 4.9    Einschränkung der Breakpoints

Mit den Media Queries lassen sich unterschiedliche Eigenschaften abfragen. Zu den wichtigsten gehören folgende:

@media (min-width: 30em) {
/* Breite beträgt mindestens 30em */
}

@media (max-height: 600px) {
/* Höhe beträgt höchstens 600 Pixel */
}

@media (device-width: 800px) {
/* Breite entspricht genau 800 Pixel */
}

@media (min-device-height: 800px) {
/* Höhe beträgt mindestens 800 Pixel */
}

@media (orientation: portrait) {
/* Formate für hochformatige Ausgabemedien (z. B. Tablets im Hochformat gehalten) */
}

Tabelle 4.1    Eigenschaften, die von Media Queries abgefragt werden können

Mehr zu den Media Queries und der Abfrage der Bildschirmauflösungen gibt es in Abschnitt 11.11.4, »Retina-Displays«.

SCHRITT FÜR SCHRITT

Eine kleine Mobile-first-Webseite

Ausgehend von den oberen Quellcodes setzen wir eine kleine Mobile-first-Webseite um. Die Seite wird also zuerst für die kleine Ansicht (Smartphone) optimiert und dann nach und nach für größere Bildschirmauflösungen.

1 Inhaltsanordnung skizzieren

Die Inhaltsbereiche bzw. deren Anordnung sollten vorher kurz skizziert werden, damit klar ist, welche Container/Elemente benötigt werden und in welcher Reihenfolge sie erscheinen sollen. Es soll ein übliches dreispaltiges Raster werden mit einer linken Subnavigationsleiste, dem großen Inhaltsbereich und einer rechten Seitenleiste.

Abbildung 4.20    Layoutanordnungen, ausgehend von Mobile first

Dank dieser Übersicht fallen die HTML-Struktur und später auch die CSS-Gestaltung der Elemente leicht.

2 HTML-Struktur anlegen

Zuerst wird die HTML-Struktur erzeugt. Eine Besonderheit ist hier, dass die drei mittleren Spalten (siehe Desktop-Ansicht) nicht in der Reihenfolge angelegt werden wie auf dem Desktop ersichtlich (also Subnavigation, Inhalt, Seitenleiste), sondern in der Reihenfolge wie auf dem Smartphone (also Inhalt, Seitenleiste, Subnavigation). Der Hintergrund steht für die Bedeutung der Inhalte. Wer auf dem Smartphone die Webseite besucht, soll nicht gleich mit der Subnavigation konfrontiert werden, sondern zuerst die Inhalte lesen können. Die Subnavigation ist die unbedeutendste der drei Spalten, daher wird sie am Ende angezeigt. Bei der Desktop-Ansicht steht sie aber links, auch weil die Anwender diese Anordnung von drei Spalten von vielen anderen Seiten her gewöhnt sind. Der HTML-Code ist so aufgebaut, wie es Listing 4.10 zeigt.

<div id="wrapper">
<div id="header">Header</div>
<div id="content">Inhalt</div>
<div id="sidebar">Seitenleiste</div>
<div id="subnavigation">Sub-<br>navigation</div>
</div>

Listing 4.10    HTML-Struktur der Mobile-first-Webseite

Das HTML umfasst einen umschließenden Container (#wrapper) und die vier Inhaltsblöcke.

3 CSS-Struktur anlegen

In CSS werden dann die Anordnung und das Aussehen gestaltet:

#wrapper {
margin: 0 auto; /* Zentriert das Layout */
width: 100%; /* Definiert die maximale Gesamtbreite des Layouts */
}
#header{
background: #222;
height: 100px; /* Nur zur Sichtbarkeit im Browser, 
solange kein Inhalt vorhanden ist */
float: left;
width: 100%;
margin-bottom: 50px;
}
#subnavigation{
background: #999;
height: 250px;
float: left;
width: 100%;
}
#content{
background: #00a0db;
height: 500px;
float: left;
width: 100%;
margin-bottom: 50px;
}
#sidebar{
background: #00374f;
height: 250px; /* Nur zur Sichtbarkeit im Browser, 
solange kein Inhalt vorhanden ist */
float: right;
width: 100%;
margin-bottom: 50px;
}

Listing 4.11    CSS-Code für Mobile first

Hier sind vor allem die Angaben zur Breite (100 %) relevant. Alle Inhaltsbereiche stehen somit untereinander über die volle Browserbreite. Ansonsten folgen noch Angaben zur Höhe, Hintergrundfarbe und Abstände, die die Container besser unterscheidbar machen.

4 CSS-Code für Tablets

Bei der Tablet-Ansicht soll die Seitenleiste neben den Inhaltsbereich rutschen. Da die Gesamtbreite immer noch begrenzt ist, bleibt die Subnavigation unterhalb stehen.

Ergänzt wird also im CSS-Code eine Abfrage, ob der Viewport eine bestimmte Breite erreicht hat. Ist dies der Fall, sollen weitere CSS-Angaben ausgeführt werden:

@media only screen and (min-width: 768px) {
#content{
width: 75%;
}
#sidebar{
height: 500px;
width: 20%;
}
}

Listing 4.12    CSS-Code-Erweiterung

Bei einer Mindestbreite von 768 Pixeln rutscht die Seitenleiste also nach oben neben den Inhaltsbereich. Die Breiten der beiden Bereiche werden entsprechend angepasst.

5 CSS-Code für Desktop-Ansicht

Bei einem größeren Viewport sollen die drei Spalten nebeneinanderstehen. In HTML ist es so angelegt, dass zuerst der Inhaltsbereich erscheint, gefolgt von der Seitenleiste und der Subnavigation. Dies möchten wir ändern, was sich mit margin erreichen lässt:

@media only screen and (min-width: 1024px) {
#wrapper {
max-width: 1200px;
}
#subnavigation{
height: 500px;
width: 20%;
margin-left: -75%;
}

#content{
height: 500px;
width: 50%;
margin-left: 25%;
}
#sidebar{
height: 500px;
width: 20%;
}
}

Listing 4.13    CSS-Code für die Desktop-Ansicht

Die einzelnen Spalten haben eine entsprechende Breite bekommen, und per margin wird die Anordnung angepasst. Die Subnavigation bekommt einen Minuswert bei margin-left. Dadurch wird sie um die Breite des Inhaltsbereichs und der Seitenleiste (50 % Breite Inhalt + 20 % Breite Seitenleiste + 5 % Abstand = 75 %) nach links verschoben. Der Inhaltsbereich dagegen wird um die Breite der Subnavigation plus Abstand (20 % Breite + 5 % Abstand = 25 %) nach rechts geschoben. So passen die Elemente nebeneinander, und die Anordnung ist angepasst.

Fertig ist eine kleine Seite samt Dreispalter nach dem Mobile-first-Ansatz.

 

4.4.3    Flexible Bilder, Typografie und Weiteres 

Nicht nur das Raster sollte bei einer responsiven Webseite flexibel gehalten sein, sondern auch die weiteren Inhaltselemente.

Flexible Bilder und Videos | Bilder müssen in einem Bildbearbeitungsprogramm in einer festen Pixelbreite abgespeichert werden. Dies kann dann problematisch werden, wenn die Inhaltsspalte, in der das Bild liegt, kleiner als die Bildbreite werden soll. Das Bild ragt dann über den Container hinaus. Um das zu verhindern, wird den Bildern per CSS eine maximale Weite mitgegeben:

img{
max-width:100%;
}

Listing 4.14    CSS-Definition flexibler Bilder

Damit erstreckt sich das Bild maximal bis zur Weite des Containers, in dem es liegt. Mehr zu responsiven Bildern finden Sie in Abschnitt 11.11.3, »Responsive Bilder«.

Auch für andere Medien, etwa Videos, lässt sich dieser »Trick« anwenden:

embed, object, video{
max-width:100%;
}

Listing 4.15    CSS-Definition flexibler Medien

Dies funktioniert, solange Videos selbst gehostet und per HTML5-Videoelement eingebunden werden. Videos von Drittanbietern wie Vimeo oder YouTube setzen allerdings auf einen iFrame, und dieser passt sich nicht mehr an. Die Lösung ist ein jQuery-Plug-in namens FitVids.js. Das Download-Skript findet sich auf der Plug-in-Webseite fitvidsjs.com. Mehr zum Einsatz von Videos und responsiven Videos lesen Sie in Kapitel 14, »Animationen«.

Responsive Typografie | Um auch die Texte responsiv zu machen, sollte man hier, genau wie bei den Rasterbreiten, keine Pixelwerte mehr einsetzen, sondern relative Einheiten wie em, rem oder auch Prozentwerte.

Statt font-size: 16px wird dann beispielsweise font-size: 1rem eingesetzt. Mehr zur responsiven Typografie erfahren Sie später im Abschnitt »Responsive Schriftgrößen« in Abschnitt 10.5.3, »Schriftgröße«.

Mobiler Viewport | Ein kurzer Blick in die mobilen Anfänge: Als das erste Smartphone (iPhone) auf den Markt kam, gab es dafür quasi keine optimierten Webseiten. Die mobilen Browser zeigten Webseiten vollständig an, quetschten sie dafür aber in einen kleinen Bildschirm (siehe Abbildung 4.21).

Abbildung 4.21    Da kann ja keiner mehr etwas lesen! Webseiten in voller Pracht bei kleinen Auflösungen

So hat Mobile Safari einen Viewport von 980 Pixeln. Auf diese Größe werden Webseiten gerendert und anschließend auf die 320 Pixel Bildschirmbreite verkleinert.

Um dieses Verhalten bei responsiven Webseiten zu verhindern, muss den Browsern mitgeteilt werden, dass sie die Webseiten nicht größer als die zur Verfügung stehende Bildschirmbreite rendern sollen und so die Media Queries greifen können. Dazu gibt es eine Meta-Eigenschaft namens viewport. Mit ihr kann der Viewport auf die Größe des Bildschirms eingestellt werden:

<meta name="viewport" content="width=device-width">

Listing 4.16    Viewport-Angabe für responsive Webseiten

Einst von Apple eingeführt, wird die viewport-Zusatzinformation mittlerweile auch von den anderen Herstellern unterstützt und kann als Quasistandard angesehen werden. Die viewport-Angabe sollte im head-Bereich des HTML-Dokuments stehen.

<meta name="viewport" content="width=device-width, user-scalable="no">

Und sonst? | Es gibt noch einige andere Techniken, die für responsive Webseiten interessant sind, z. B. die Icon-Fonts, die sich beliebig skalieren lassen und das Einbinden von Bildern überflüssig machen (also zumindest für entsprechende Icons). Mehr dazu finden Sie in Abschnitt 11.7, »Icon-Fonts«.

Oder auch der Einsatz von SVG-Grafiken ist interessant. Mit ihnen lassen sich Vektorgrafiken darstellen, die sich im Gegensatz zu Pixelgrafiken beliebig skalieren lassen und die daher für illustrative Bildelemente gut geeignet sind. Mehr zu SVG-Grafiken lesen Sie in Abschnitt »SVG« in Abschnitt 11.10.3, »Die Auswahl des richtigen Bildformats«.

Und ein nicht zu unterschätzender Punkt ist die Navigation. Auch diese muss sich kleineren Auflösungen anpassen. Oft wird sie hinter einem Icon »versteckt«. Die verschiedenen Möglichkeiten der Umsetzung stehen in Abschnitt 12.5, »Navigation auf mobilen Endgeräten – responsive Navigation«.