link

Td

Mobile First und Responsive Design

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.

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:

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

Wie eine Webseite entsteht