Wie eine Webseite entsteht (5): Mobile First und Responsive Layout

21.01.2015 | Code

Mobile First und Responsive Webdesign sind heute Standard in der Webentwicklung. Ein kurzer Einstieg in die Grundlagen.

Nachdem wir im letzten Teil der Serie ein neues Design für diese Webseite entwickelt haben, geht es in diesem Teil endlich an die Umsetzung. Genauer gesagt um die Frontend-Umsetzung, also die Entwicklung von HTML, CSS und JavaScript.

Während es früher bei der Frontend-Entwicklung vor allem um Tricks und Hacks ging, wie man das Erscheinungsbild in den unterschiedlichsten Browsern vereinheitlichen kann, ist dieses Problem durch die neuen Browserversionen etwas in den Hintergrund getreten. Stattdessen wird man mit neuen Anforderungen und Begriffen konfrontiert, allen voran mit Mobile First und Responsive Webdesign, aber auch mit Adaptive Webdesign, Progressive Enhancement, Graceful Degradation oder mit Frontend-Frameworks, Grid-Systeme, LESS, Sass und objektorientiertem CSS.

Buzzwords

Man muss diese ganzen Begriffe nicht kennen, um eine Webseite zu entwickeln, und natürlich könnte man die Liste auch noch beliebig verlängern. Da einige dieser kompliziert klingenden Fachbegriffe jedoch einen recht einfachen Hintergrund haben, gibt es ein paar kurze Erläuterungen, mit denen man im nächsten Gespräch vielleicht etwas mehr vom Bahnhof versteht.

  • Graceful Degradation: Dieses Prinzip der Entwicklung entspricht wohl am ehesten unserer Intuition: Man beginnt mit dem stärksten System, also z.B. dem modernen Laptop, einem guten W-LAN und den neuesten Browsern. Damit entwickelt man seine Webseite und buttert ordentlich Technik rein. Aufwändige Parallax-Effekte dürfen dabei nicht fehlen. Anschließend zeigt man die Seite seinen Eltern, die irgendwo auf dem Dorf den IE7 mit einem alten PC nutzen. Das Laden dauert ewig und die Seite fällt natürlich auseinander. Daher optimiert man die Seite im Nachhinein notdürftig, was das Vergnügen bei nicht vorhandener Bandbreite allerings auch nicht sonderlich erhöht.

  • Progressive Enhancement: Nach diesem Prinzip beginnt man mit dem schwächsten System, fährt also zu den Eltern und entwickelt erst einmal für den IE7 und einer minimalen Bandbreite, also ohne tolle JavaScript-Bibliotheken und nur mit dem einfachsten Design. Anschließend arbeitet man sich zu den modernen Systemen hoch und macht die Webseite immer komplexer. Dazu muss man natürlich wissen, mit welchen Browsern der Nutzer auf die Seite zugreift. Und dafür wiederum gibt es Javascript-Bibliotheken wie den Modernizr. Je mehr Features der Browser hat, desto mehr Funktionen kann man der Webseite über den Modernizr hinzufügen. Surft jemand ohne JavaScript durchs Web (was nur noch sehr sehr wenige machen), dann wird ohne den Modernizr die einfachste Version der Webseite dargestellt.

  • Mobile-First: Bei dem Mobile-First-Prinzip entwickelt man zuerst für Mobile-Geräte und steigert sich dann bis zur Desktop-Variante. Das ergänzt sich natürlich prima mit dem Progessive Enhancement, allerdings sind die Ansätze nicht zwangsläufig miteinander verbunden. Man kann beispielsweise eine aufwändige Mobile-Seite erstellen, die dann auf alten Mobile-Geräten nicht richtig funktioniert (z.B. der Sticky Header bei alten Android-Versionen). Das wäre dann zwar Mobile-First, aber eben nicht Progressive Enhancement.

  • Responsive Webdesign: Das Responsive Layout ist eine Technik, bei der sich die Webseite flexibel an jede erdenkliche Bildschirmgröße anpasst. Die sogenannten Breakpoints, bei denen sich zum Beispiel ein einspaltiges Layout in ein zweispaltiges Layout ändert, richten sich allein nach dem Design. So ein Breakpoint kann also auch bei einer Breite von 714px gesetzt werden, wenn es gut aussieht. Typisch für so ein Layout sind zum Beispiel flexible Breitenangaben in Prozent. Der Vorteil ist natürlich, dass man nicht für jede neue Geräteklasse die Webseite wieder umbauen muss, da sie schlicht und ergreifend in jeder Größe gut aussieht.

  • Adaptive Webdesign: Die Technik des Adaptive Layout wird heute soweit ich sehe eher selten eingesetzt. Dabei optimiert man die Seiten mit einem eher starren Layout für bestimmte Bildschirmgrößen. Um ein ganz einfaches Beispiel zu nehmen: Man entwickelt eine Mobile-Variante mit der festen Breite von 320px und eine Desktop-Variante mit einer festen Breite von 1.200px. Die Tablet-Nutzer mit 900px würden dann entweder die sehr kleine Mobile-Variante oder die zu große Desktop-Variante sehen. Also eher suboptimal, aber auch recht leicht zu coden.

  • Grid-Systeme: Grid-Systeme sind eine ebenfalls weit verbreitete Technik, bei der die Webseite mit Hilfe von Div-Kästen in ein Raster gegliedert wird, ähnlich wie bei einer Tabelle. Solche Grid-Systeme erleichtern die Positionierung von Elementen und haben vor allem durch die Popularität von Frontend-Frameworks Karriere gemacht. Ich hab selber auch mal einen sehr simplen Grid-Builder gebaut, arbeite aber so gut wie nicht mehr mit sowas.

  • LESS und Sass wiederum sind Preprozessoren für CSS, mit denen man Programmier-Logiken in die ansonsten starre Auszeichnungssprache CSS einbauen kann bzw. das CSS mit Hilfe von Programmierlogiken generiert. Damit habe ich mich ehrlich gesagt noch nie genauer beschäftigt, weil meine Designs eigentlich immer sehr einfach gehalten sind und ich dafür nicht gerne unnötig komplexe Techniken einsetze.

  • OOCSS oder objektorientiertes CSS wiederum lehnt sich an die Objektorientierung bei Programmiersprachen an. Bei dieser Technik werden Design-Eigenschaften möglichst abstrakt im CSS definiert. Im HTML-Code kann man dann über mehrere CSS-Klassen die verschiedenen Eigenschaften kombinieren. Beispielsweise kann man einen einheitlichen Schatten in der CSS-Klasse "shaddow" definieren und dann allen Elementen diese Klasse zuteilen, die einen Schatten haben sollen. Ich stehe dem eher skeptisch gegenüber: Es mag zwar hier und da Sinn machen, allerdings besteht immer die Gefahr, dass man das HTML mit dutzenden Klassen verschmutzt und die klare Trennung von Inhalt (HTML) und Gestaltung (CSS) zunehmend aufhebt.

Ein echter Frontend-Profi würde vermutlich nach dem Progressive-Enhancement-Prinzip und dem Mobile-First-Ansatz vorgehen und mit Hilfe eines modernen HTML5- und CSS3-Frontend-Frameworks und eines Grid-Systems mit einem Sass-Preprocessor ein Responsive Webdesign erstellen. Das muss man aber nicht so machen, sondern man kann als Hobby-Coder auch eine durchaus saubere und schlichte Seite mit einfachen Mitteln erstellen. Was man heute allerdings immer beachten sollte, ist der Mobile-First-Ansatz und ein Responsive Webdesign, da angesichts der hohen Verbreitung von Mobile-Geräten eigentlich alle neuen Seiten responsive sind (sein sollten). Das ist also schlicht Standard-Werkzeug in der Webseiten-Entwicklung.

Mobile First und Responsive Webdesign

Nach dieser langen Vorrede kommen wir endlich zum Thema. Den Mobile-First-Ansatz haben wir ja schon bei der Entwicklung des Designs für die Webseite verfolgt. Bei der Umsetzung hilft uns jetzt das Responsive Webdesign. Und keine Sorge: Das ist viel einfacher, als man denkt.

Beim Responsive Webdesign arbeitet man mit Media-Queries, die mit CSS3 eingeführt wurden. Mit Hilfe der Media-Queries werden nicht alle CSS-Eigenschaften vom Browser verwendet, sondern nur die CSS-Angaben, die für die Bildschirmgröße bzw. für den Viewport des entsprechenden Gerätes im CSS festgelegt wurden. Wenn man sich eine Media-Query für eine Bildschirmgrößen anschaut, wird es sofort klar:

@media only screen and ( Größenangabe ) { 
    Hier kommen CSS-Angaben für die oben genannte Bildschirmgröße rein.
}

Beim Mobile-First-Ansatz schreibt man in den oberen Teil des CSS ohne Media-Query erst einmal nur das CSS für die kleinste Mobile-Version rein, also für ein Smartphone. Je größer der Bildschirm wird, desto mehr CSS-Styles kommen hinzu. Die Größenangabe (min-width: 321px) gilt zum Beispiel für alle Geräte, die breiter sind als 320px, also zum Beispiel große Smartphones, Tablets und Desktop-Versionen. Mit den darin enthaltenen CSS-Angaben kann man die ursprünglichen Smartphone-Styles erweitern oder überschreiben.

Das Grundgerüst für die CSS-Datei sieht so aus:

Am Beginn der Datei steht nur der CSS-Code für Smartphones

@media only screen and (min-width: 321px) {
    Hier kommt zusätzlicher Code für größere Geräte als Smartphones rein 
    (z.B. Smartphones quer, kleine Tablets) 
}

@media only screen and (min-width: 600px) {
    Hier kommt zusätzlicher Code z.B. für größere Tablets rein.
}

@media only screen and (min-width: 940px) {
    Hier kommen die zusätlichen Desktop-Styles rein.
}

@media print {
    Hier kommt der Print-Style rein.
}

Man kann natürlich auch anders herum vorgehen und erst den Desktop-Style in die Datei schreiben und mit den Media-Queries die Styles dann überschreiben, bis man beim Smartphone angelangt ist. Das macht aber aus mehreren Gründen nur wenig Sinn:

  • Die CSS-Datei wird aufgebläht und lang, da man viel Desktop-Code bei den Mobile-Versionen überschreiben muss.
  • Smartphones, die häufig langsamer sind und geringere Bandbreiten haben, müssen den gesamten übergeordneten Desktop-Code erst einmal verarbeiten, das ist auch aus Performance-Sicht nicht schön.
  • Wenn man erst mit der Desktop-Variante anfängt, sieht am Ende die Mobile-Variante oft aus wie das ungeliebte Kind, das man irgendwo hinten dranhängt.

Auch wenn die Umstellung beim ersten responsiven Web-Projekt etwas Geduld erfordert, sollte man sich diese Vorgehensweise am besten sofort angewöhnen.

Neben der grundsätzlichen CSS-Struktur braucht man für ein Responsive Webdesign auch noch folgende Meta-Angabe im HTML-Header:

<meta name="viewport" content="width=device-width, initial-scale=1">

Der Sinn: Wenn man sich eine nicht-responsive Webseite auf dem Smartphone anschaut, dann wird die Seite so runterskalliert, dass sie komplett auf den Bildschirm des Gerätes passt. Mit dem Meta-Tag oben setzt man den Viewport auf die gleiche Breite, wie den Gerätebildschirm (viewport width = device-width). Damit passt sich der Viewport nicht der Breite der Webseite an, sondern die (responsive) Webseite passt sich an die Breite des Viewports und damit der Breite des Bildschirms an. Am Beispiel des heutigen Designs der Trendschau kann man die Unterschiede noch einmal deutlich machen:

Drei Mobile-Ansichten mit verschiedenen Kombinationen von Meta-Angaben und Media-Queries

  • Erstes Bild: Meta-Tag im Header, Media-Queries im CSS. Eine korrekte responsive Darstellung. Der Viewport ist so breit wie der Gerätebildschirm, das Design passt sich flexibel an die Größe an.
  • Zweites Bild: kein Meta-Tag im Header, jedoch Media-Queries im CSS. Der Viewport ist so breit wie die normale Version der Webseite. Dann wird er runterskalliert, bis er auf den Bildschirm des Smartphones passt. Die Seite verhält sich also wie eine normale Desktop-Seite und man muss manuell reinzoomen, um etwas lesen zu können.
  • Drittes Bild: Meta-Tag im Header, keine Media-Queries im CSS. Der Viewport ist wieder so breit wie der Gerätebildschirm. Da die Seite jedoch keine Media-Queries hat und das Design mit 1020px deutlich breiter als der Bildschirm ist, sieht man nur einen Ausschnitt und muss manuell nach rechts scrollen.

Vorschau auf den nächsten Teil

Ok, die Grundprinzipien von Mobile First und Responsive Webdesign sind jetzt klar und die Grundstruktur der CSS-Datei ist fertig. Dann kann es im nächsten Teil der Serie mit dem HTML- und CSS-Coden richtig losgehen. Wir werden das Grundgerüst der Seite in drei Variationen (in etwa Smartphones, Tablets, Desktop) erstellen. Natürlich nicht mit allen Design-Details, sondern nur das grobe Layout, damit das Grundprinzip klar wird. Bis dahin …

Dieser Beitrag gehört zu der Serie "Webseite". Das sind alle Artikel der Serie:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus