Responsive Webdesign - Layout
Das Nutzerverhalten beim Konsumieren von Webseiten hat sich in den letzten Jahren drastisch verändert. Ständig kommen neue, vor allem mobile, Endgeräte auf den Markt, welche internetfähig sind. Anwender benutzen oft mehrere Geräte für den Besuch einer Seite und erwarten auf jedem die gleichen Funktionen vorzufinden, aber optimiert auf das jeweilige Interaktionsmedium.
Will man also seine (mobilen) Nutzer nicht verlieren steht man unter Zugzwang: wie optimiere ich meine Webseite für all diese Geräte? Auch für Search Engine Optimization (SEO) spielt dies eine wichtige Rolle. Seit dem 21. April 2015 hat Google den „mobile friendly“ Tag aktiviert, welcher in das Pageranking mit eingeht.
Eine prominente Antwort auf diese Frage ist das responsive Layout. In diesem Blogeintrag möchte ich die Hintergründe etwas beleuchten und an Hand eines einfachen Beispiels ein
Responsive Layout auf die Beine stellen.
Abgrenzung
Doch wie unterscheidet sich ein responsive (reagierendes) Layout von anderen Methoden zum Darstellen von Webseiten auf mobilen Endgeräten?
Eine Variante ist die Erstellung einer separaten mobilen Webseite. Wenn der Webserver erkennt, dass ein mobiles Endgerät die Seite aufruft, wird es auf die mobile Version weitergeleitet. Der Nachteil an dieser Variante ist, das mindestens zwei Versionen derselben Webseite gepflegt werde müssen und der Seitenaufbau durch die Weiterleitung verlangsamt wird. Zudem ist die mobile Seite meistens nur für ein bestimmtes mobiles Endgerät optimiert und bietet nur eine stark vereinfachte Version der originalen Desktopansicht.
Eine weitere Variante ist das sogenannte adaptive Layout, bei dem über Breakpoints zwischen mehreren statischen Varianten gewechselt wird. Diese sind auf einzelne Viewports optimiert (meist Desktop-iPad-iPhone) und genau da liegt der Knackpunkt: In dem sich ständig wandelnden Urwald von mobilen Geräten dauert es nicht lange, bis der erste Nutzer mit einem Gerät daher kommt, für das die Seite nicht optimiert ist.
Zuletzt betrachten wir noch das liquid (flüssige) Layout. Hier wir der vorhandene Platz (Breite) immer proportional gleich belegt und keine Breakpoints genutzt. Dies klappt relativ, gut bis man sehr kleine Bildschirmgrößen erreicht, bei denen der Inhalt nicht mehr sinnvoll nebeneinander dargestellt werden kann.
Nun aber zurück zum responsive Layout. Im Grunde ist es eine Mischung der besten Eigenschaften aus adaptivem und liquid Layout. Es bedient sich - wie das adaptive Layout - sogenannter Media Queries um die Darstellung zu optimieren, orientiert sich dabei aber nicht an Endgeräten, sondern bricht nach den Bedürfnissen des Layouts um. Es wird also nicht auf das „mobile Menü“ umgeschaltet weil ein mobiles Endgerät erkannt wurde, sondern weil der Platz für das „normale Menü“ nicht mehr ausreicht. Im Gegensatz zum liquid Layout werden Inhalte je nach vorhandenem Platz auch umsortiert. Diese Vorzüge erkauft man sich allerdings durch eine komplexere Gestaltung, Umsetzung und Anpassung der Webseite. Auch der Aufwand in der Planungsphase mit Kunden erhöht sich, da meist keine Bilder mehr reichen, um die angestrebte Lösung zu vermitteln, sondern interaktive Prototypen benötigt werden. Doch der initiale Mehraufwand zahlt sich am Ende aus.
Umsetzung
Anhand eines einfachen Beispiels wollen wir nun die Umsetzung eines responsive Layout unter die Lupe nehmen. Wir orientieren uns dabei an der Startseite von www.exensio.de.
Als Erstes stellt sich die Frage, welche Herangehensweise gewählt werden soll: mobile first oder desktop first? Diese Begriffe sagen im Grunde nichts anderes als: „Fange ich mit der kleinsten Ansicht an und arbeite mich zur größten vor oder andersherum?“ Hier gibt es keine definitive Regel. Der Vorteil von mobile first ist, dass man sich zunächst auf die wichtigsten Inhalte konzentriert und das Skalieren auf mehr Platz meist einfacher ist als der gegenläufige Weg. Diese Entscheidung sollte aber primär von der Zielgruppe abhängen - wenn die meisten Nutzer (oder im Fall von Webshops der meiste Umsatz) von Desktops kommen macht es durchaus Sinn mit desktop first loszulegen.
Zurück zu unserem Beispiel. Wir wollen mit der mobilen Ansicht beginnen und überlegen uns deswegen, was die für uns wichtigen Elemente auf der Startseite sind:
- Logo
- Menü
- Bannergrafik
- Willkommenstext
- Links zu wichtigen Unterseiten
- Newsboxen
- Mitgliedschaften
- Footer
Nun können wir diese Elemente optimiert für kleine Screens anordnen und davon ausgehend ein Konzept für größere Wiedergabemedien erarbeiten. Wir orientieren uns dabei nicht an vorgegebenen Größen verschiedener Geräte, sondern treffen diese Entscheidungen ausschließlich aufgrund der Usability. Wird zum Beispiel ein Textblock so breit, dass die Zeilenlänge über 100 Zeichen anwächst, ist es eine gute Idee zwei Blöcke nebeneinander darzustellen.
Hier das Konzept:
Anhand dieser Mockups können wir nun sehen, wo unser Layout Breakpoints - sprich Umbrüche in der Aufteilung der Inhalte - besitzt. Um diese umzusetzen, benötigen wir Media Queries, welche in CSS3 eingeführt wurden. Innerhalb dieser Breakpoints ist das Layout bis zu einer Maximalbreite flüssig, das heißt, die Breite der Inhalte ist prozentual von der Breite des darstellenden Mediums abhängig. So verhindern wir, dass der Nutzer horizontal scrollen muss.
Fangen wir mit dem HTML an. Alle Bereiche sind vorhanden, beinhalten aber nur Platzhalter-Inhalt, da es uns in diesem Blogeintrag rein um das Layout geht.
<div class="page">
<header>
<div class="logo">Logo</div>
<nav class="main">Hauptnavigation</nav>
<div class="banner">Banner</div>
</header>
<main>
<div class="main-content">
<section class="welcome-text">
<h1>Willkommen</h1>
</section>
<article class="loesungen">
<h2>Lösungen</h2>
<div class="loesung-1">1</div>
<div class="loesung-2">2</div>
<div class="loesung-3">3</div>
<div class="loesung-4">4</div>
</article>
<article class="aktuelles">Aktuelles</article>
<article class="blog">Blog</article>
<article class="tweets">Tweets</article>
</div>
<aside>
<nav class="side">Sidenav</nav>
</aside>
<article class="mitgliedschaften">Mitgliedschaften</article>
<footer>Footer</footer>
</main>
</div>Das Ganze wollen wir nun mit CSS zum Leben erwecken. Getreu unserem Motto mobile first zunächst einmal das CSS für mobile Endgeräte:
/*
* Fonts
*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
* {
box-sizing: border-box;
}
/*
* Base styling.
*/
body {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #75042F;
text-align: center;
}
h1 {
font-size: 1em;
margin: 0;
}
h2 {
font-size: 1em;
margin: 0;
}
.page {
border-left: 5px solid #75042F;
max-width: 960px;
margin: 0 auto;
}
.logo,
nav.main,
.banner,
aside,
article.mitgliedschaften,
footer,
section.welcome-text,
.main-content article {
vertical-align: middle;
background-color: #8d8d8d;
border: 5px solid white;
border-top: none;
}Dies sieht noch alles recht langweilig aus. Im Grunde müssen wir für kleine Bildschirme, neben dem grundlegenden Styling, nichts machen. Alle Bereiche sind als Block-Elemente definiert, welche von selbst je eine eigene Zeile einnehmen und sich auf die gesamte Breite ausdehnen.
Soweit so gut. Nun müssen wir uns um unseren ersten Breakpoint kümmern. Nehmen wir an ab 650px Breite werden die kleineren Boxen zu sehr gezerrt und wir wollen diese umbrechen. Dazu bedienen wir uns der Media Query Anweisung @media (min-width: 650px). Alle Anweisungen innerhalb dieses Blocks treten erst ab einer Mindestbreite von 650px in Kraft und überschreiben die bisherige Anordnung des Inhalts.
Nun stellt sich die Frage, wie wir eigentlich bewerkstelligen wollen, dass mehrere Inhaltsblöcke nebeneinander dargestellt werden. Hier gibt es einige Kandidaten, jeder mit seinen eigenen Vor- und Nachteilen:
- Float
- Inline-Block
- Display table
- Flex
- Grid
Float
Zum Zeitpunkt des Blogeintrags der Quasi-Standard und wird in allen aktuell verwendeten Browsern unterstützt. Es existieren einige Bugs, welche jedoch gut dokumentiert sind. Nachteile sind unter anderem: der Zwang zum clearen (bei jedem Breakpoint), keine Möglichkeit des vertikalen Zentrierens, keine gleichen Höhen der Blöcke, Abhängigkeit von der Reihenfolge im Quellcode.
Inline-Block:
Diese brauchen nicht gecleart und können vertikal zentriert werden. Allerdings zerstört der Weißraum ggf. das Layout wenn kein Workaround genutzt wird.
Weitere Nachteile: keine gleichen Höhen der Blöcke, Abhängigkeit von der Reihenfolge im Quellcode.
Display Table:
Tabellen für Layouts?! Das geht doch nicht! Doch das geht mit display: table, so kann ein Block-Element das Verhalten einer Tabelle annehmen, ohne im Quellcode als solche definiert zu sein. Bei Bedarf kann einfach wieder zum ursprünglichen Verhalten display: block zurückgewechselt werden. Nützlich ist dies, wenn gleichzeitig vertikale Zentrierung und gleiche Höhen benötigt werden. Dies erkauft man sich durch etliche zusätzliche Wrapper-divs und einigen weiteren unangenehmen Nebeneffekten (z.B. überlaufende Zellen). Auch ist mir kein Weg bekannt mehrere Breakpoints mit display: table abzudecken (z.B. vierspaltig zu zweispaltig zu einspaltig).
Flex:
Das Allheilmittel? Nun nicht ganz, aber ein entscheidender Schritt in die richtige Richtung. Vertikale Zentrierung, gleiche Höhen, Quellcode unabhängige Platzierung und Füllen des vorhandenen Platzes ohne diesen genau zu kennen - um nur einige der Vorteile zu nennen. Die Syntax ist dafür leider nicht einsteigerfreundlich und es müssen noch diverse Vendorprefixes benutzt werden. Das größte Manko zur Zeit ist allerdings noch, dass flex erst ab IE10 unterstützt wird. Wenn dies kein Problem darstellt, vereinfacht diese Technik das Layouten im Web extrem.
Dennoch ist flex eigentlich nicht für Layouts komplexer Seiten gedacht. Da flex sich immer dem vorhandenen Platz anpasst, kann dies bei langsamen Verbindungen und entsprechen langen Seitenladezeiten zu unschönen Verzerrungen führen, wie in folgendem Artikel demonstriert.
Es ist gedacht für kleinere Bereiche auf großen Seiten - also dem Microlayout.
Grid
Grid hingegen ist das zukünftige Mittel für das Makrolayout. Einziges Problem: bisher wird es ausschließlich von IE 10 unterstütz. Dennoch, die Spezifikation ist vielversprechend und sobald die Browserunterstützung gewährleistet ist, stehen die Chancen sehr gut, dass Grid in Verbindung mit Flex der Layoutstandard im Web wird.
Auf jsfiddle ist ein Vergleich der Layoutmethoden zu finden.
Da wir leider nicht in die Zukunft reisen können begnügen wir uns in unserem Beispiel mit float, um unser Layout zu vervollständigen. Zunächst wollen wir ab 650px die Lösungs-Boxen in ein 2x2 Raster umbrechen, sowie Aktuelles und Blog nebeneinander positionieren.
/*
* Responsive Layout
*/
@media (min-width: 650px) {
.loesungen div,
.aktuelles,
.blog {
float: left;
width: 50%;
}
.loesung-3 {
clear: both;
}
.loesungen:after,
.blog:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
.tweets,
.aktueles {
clear: both;
}
}Zu guter Letzt noch unser zweiter Breakpoint ab 960px. Hier soll zusätzlich zu den Änderungen nach dem ersten Breakpoint das Seitenmenü neben den Inhalt gestellt werden und die Seite soll nicht weiter in die Breite wachsen. Stattdessen setzen wir die Seitenbreite fix und Zentrieren den Inhalt im Browserfenster.
/*
* Responsive Layout
*/
@media (min-width: 650px) {
//see above
}
@media (min-width: 960px) {
.main-content {
float: left;
width: 75%;
}
aside {
float: right;
width: 25%;
}
aside:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
.mitgliedschaften {
clear: both;
}
}Auf jsfiddle kann das interaktive Ergebnis sowie der Quellcode begutachtet werden.
Nun haben wir ein einfaches aber solides Grundgerüst, welches mit echten Inhalten gefüllt werden kann. Gegebenenfalls ist weitere Arbeit innerhalb eines Containers nötig - vor allem das Hauptmenü muss potenziell für Mobil und Desktop angepasst werden - aber das Layout steht.
Dies ist der erste Schritt, um eine Webseite optimiert auf allen Endgeräten darstellen zu können. Vor allem für mobile Geräte bedarf es aber noch weiterer Anpassungen im Bereich der Usability und User Experience. Dies würde aber den Rahmen dieses Blogeintrages sprengen. Ich hoffe dieser Einblick in Responsive Layouts hat Ihnen gefallen und der ein oder andere konnte noch etwas dabei lernen.