link

td

Mobile First und Responsive Design

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

Responsive Webdesign

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 angegebenen Viewport 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.
    }

Im Gegensatz zum sogenannten adaptive Webdesign optimiert man eine responsive Webseite nicht für bestimmte Gerätetypen. Stattdessen richten sich die sogenannten Breakpoints, also die Punkte, bei denen sich der Style ändert, allein nach den Erfordernissen des Designs. Bei der Gestaltung der einzelnen Elemente wird mit relativen Größenangaben wie Prozent gearbeitet. So soll die Webseite unabhängig von dem jeweiligen Geräte immer optimal an jede Größe angepasst sein. Beim adaptive Websdesign würde man die Breakpoints stattdessen an bestimmte Bildschirmgrößen ausrichten und die Seite stärker mit festen Pixelgrößen gestalten. Dieser Ansatz ist heute allerdings kaum noch relevant.

Mobile First

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, bzw. die Angaben, die für alle Größen gleich sind. Je größer der Bildschirm wird, desto mehr CSS-Styles kommen hinzu. Die Größenangabe (min-width: 600px) gilt zum Beispiel für alle Geräte, die breiter sind als 600px. Mit den darin enthaltenen CSS-Angaben kann man die ursprünglichen 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: 500px) {
        Hier kommt zusätzlicher Code für Geräte rein, die breiter als 500px sind. 
        (z.B. Smartphones quer, kleine Tablets) 
    }
    @media only screen and (min-width: 1000px) {
        Hier kommt zusätzlicher Code für Geräte rein, die breiter als 1000px sind.
    }
    @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 überschreiben, bis man beim Smartphone angelangt ist. In der Praxis kam diese Technik häufig vor, wenn eine ursprünglich nicht responsive Webseite nachträglich responsiviert werden sollte. Bei neuen Webseiten macht diese Vorgehensweise aber aus mehreren Gründen keinen Sinn:

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 eines älteren Designs der Trendschau kann man die Unterschiede noch einmal deutlich machen:

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

Mehr lesen zum Thema Anwendungen.

Trendschau Digital

Single-Source-Publishing für KMUs

Das schlanke Open Source CMS Typemill eignet sich ideal für Dokumentationen, Jahresberichte, Handbücher oder Schulungsmaterialien. Erstellen Sie einfach Webseiten, PDF-Bücher und ePubs aus einer Quelle. Das System, bekannt aus Publikationen wie Heise, ist bei kleinen Unternehmen, Stiftungen, Organisationen und in akademischen Kreisen im Einsatz. Trendschau Digital unterstützt Sie bei Ihrem Typemill-Projekt.

Leistungen Lösungen Demo

Anwendungsbeispiele

Typemill eignet sich für Web-Projekte, bei denen Informationen und Texte im Vordergrund stehen und bei denen eine Ausgabe als professionelle PDF-Publikation geplant ist. Zu den klassischen Einsatzfeldern zählen neben informations-orientierten Webseiten vor allem Dokumentationen, Handbücher, Berichte und Schulungsmaterialien.

  • Bedienungsanleitungen

    Bedienungsanleitungen gehören zu den klassischen Publikationen von produzierenden Unternehmen. Typemill bietet sich mit seiner schlanken Architektur als online-basierte Lösung für sehr kleine Unternehme an.

    Mehr Infos

  • Mitarbeiterhandbuch

    Ein Mitarbeiterhandbuch lässt sich mit moderner Open Source Software problemlos als PDF und als Webseite erstellen. So vermeiden Sie unnötige Medienbrüche und digitalisieren Ihre HR-Kommunikation.

    Mehr Infos

  • Schulungsunterlagen

    Mit der schlanken Open Source Software Typemill lassen sich schnell und einfach Schulungsunterlagen erstellen, und zwar als Webseite und als PDF. Wir zeigen in fünf Schritten, wie es geht.

    Mehr Infos

  • Corporate Publishing

    Corporate Publishing umfasst nicht nur Kunden-Magazine, sondern auch Schriftenreihen, Handbücher, Berichte und mehr. Mit Typemill lassen sich solche Publikationen automatisch generieren.

    Mehr Infos

  • eBooks

    Nahtlos von der Webseite zur Publikation: Mit dem eBook Plugin lassen sich aus einer Typemill Webseite hochwertige Publikationen im PDF- und ePUB-Format erstellen. Das kann sowohl für Autoren und Micropublisher interessant sein, als auch für Unternehmen im Rahmen des Corporate Publishing.

    Mehr Infos

  • Knowledge Base

    Mit dem kostenfreien Typemill-Theme "Knowledge" können Unternehmen mit wenigen Handgriffen eine eigene Knowlege-Base oder Online-Hilfe veröffentlichen.

    Mehr Infos

  • Stiftungswebseiten

    Mit dem richtigen System können kleine Stiftungen nicht nur ihre Website betreiben, sondern auch den Tätigkeitsbericht erstellen.

    Mehr Infos