Responsives Webdesign

Dieses Codelab ist Teil des Kurses „Progressive Web-Apps entwickeln“, der vom Google Developers Training-Team entwickelt wurde. Sie können den größten Nutzen aus diesem Kurs ziehen, wenn Sie die Codelabs der Reihe nach durcharbeiten.

Weitere Informationen zum Kurs

Einführung

In diesem Lab erfahren Sie, wie Sie Ihre Websiteinhalte so gestalten, dass sie responsiv sind.

Lerninhalte

  • Apps so gestalten, dass sie auf verschiedenen Formfaktoren gut funktionieren
  • Flexbox verwenden, um Inhalte ganz einfach in Spalten zu organisieren
  • Medienanfragen verwenden, um Inhalte basierend auf der Bildschirmgröße neu zu organisieren

Wichtige Informationen

  • Grundlagen von HTML und CSS

Voraussetzungen

  • Computer mit Terminal-/Shell-Zugriff
  • Internetverbindung
  • Texteditor

Laden Sie das Repository „pwa-training-labs“ von GitHub herunter oder klonen Sie es und installieren Sie bei Bedarf die LTS-Version von Node.js.

Wenn Sie keinen bevorzugten lokalen Entwicklungsserver haben, installieren Sie das Node.js-Paket http-server:

npm install http-server -g

Wechseln Sie zum Verzeichnis responsive-design-lab/app/ und starten Sie den Server:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Sie können den Server jederzeit mit Ctrl-c beenden.

Öffnen Sie Ihren Browser und rufen Sie localhost:8080/ auf.

Hinweis:Melden Sie alle Service Worker ab und löschen Sie alle Service Worker-Caches für localhost, damit sie das Lab nicht beeinträchtigen. In den Chrome-Entwicklertools können Sie dazu auf dem Tab Anwendung im Bereich Speicher löschen auf Websitedaten löschen klicken.

Wenn Sie einen Texteditor haben, mit dem Sie ein Projekt öffnen können, öffnen Sie den Ordner responsive-design-lab/app/. So behalten Sie leichter den Überblick. Öffnen Sie den Ordner andernfalls im Dateisystem Ihres Computers. Im Ordner app/ erstellen Sie das Lab.

Dieser Ordner enthält:

  • index.html ist die Haupt-HTML-Seite für unsere Beispielwebsite/-anwendung.
  • modernizr-custom.js ist ein Tool zur Funktionserkennung, das das Testen der Flexbox-Unterstützung vereinfacht.
  • styles/main.css ist das Cascading Style Sheet für die Beispielwebsite.

Kehren Sie zur App im Browser zurück. Verkleinern Sie die Fensterbreite auf unter 500 Pixel. Sie werden feststellen, dass der Inhalt nicht gut reagiert.

Öffnen Sie die Entwicklertools und aktivieren Sie den Gerätemodus in Ihrem Browser. In diesem Modus wird das Verhalten Ihrer App auf einem Mobilgerät simuliert. Die Seite ist verkleinert, damit die Inhalte mit fester Breite auf den Bildschirm passen. Das ist nicht optimal, da der Inhalt für die meisten Nutzer wahrscheinlich zu klein ist und sie zoomen und schwenken müssen.

Ersetzen Sie TODO 3 in index.html durch das folgende Tag: 

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

Speichern Sie die Datei. Aktualisieren Sie die Seite im Browser und rufen Sie sie im Gerätemodus auf. Die Seite ist nicht mehr verkleinert und die Skalierung der Inhalte entspricht der auf einem Computer. Wenn sich der Inhalt im Geräteemulator unerwartet verhält, schalten Sie den Gerätemodus aus und wieder ein, um ihn zurückzusetzen.

Hinweis:Die Geräteemulation gibt Ihnen eine gute Vorstellung davon, wie Ihre Website auf einem Mobilgerät aussehen wird. Um ein vollständiges Bild zu erhalten, sollten Sie Ihre Website jedoch immer auf echten Geräten testen. Chrome und Firefox

Erklärung

Mit einem Darstellungsbereich-Meta-Tag geben Sie dem Browser Anweisungen dazu, wie die Abmessungen und die Skalierung der Seite angepasst werden sollen. Mit dem Attribut width wird die Größe des Darstellungsbereichs festgelegt. Sie kann auf eine bestimmte Anzahl von Pixeln (z. B. width=500) oder auf den Sonderwert device-width, festgelegt werden. Das ist die Breite des Bildschirms in CSS-Pixeln bei einem Skalierungsfaktor von 100%. Es gibt entsprechende height- und device-height-Werte, die für Seiten mit Elementen nützlich sein können, deren Größe oder Position sich je nach Höhe des Darstellungsbereichs ändert.

Mit der Eigenschaft „initial-scale“ wird die Zoomstufe beim ersten Laden der Seite festgelegt. Durch das Festlegen des anfänglichen Maßstabs wird die Darstellung verbessert, aber die Inhalte ragen immer noch über den Bildschirmrand hinaus. Das beheben wir im nächsten Schritt.

Weitere Informationen

Ersetzen Sie TODO 4 in styles/main.css durch den folgenden Code:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Speichern Sie die Datei. Deaktivieren Sie den Gerätemodus im Browser und aktualisieren Sie die Seite. Verkleinern Sie die Fensterbreite. Beachten Sie, dass der Inhalt bei der angegebenen Breite in ein einspaltiges Layout wechselt. Aktivieren Sie den Gerätemodus wieder und prüfen Sie, ob die Inhalte an die Gerätebreite angepasst werden.

Erklärung

Damit der Text lesbar ist, verwenden wir eine Media-Query, wenn die Breite des Browsers 48 rem erreicht (768 Pixel bei der Standardschriftgröße des Browsers oder 48-mal die Standardschriftgröße im Browser des Nutzers). Unter When to use Em vs Rem finden Sie eine gute Erklärung dafür, warum „rem“ eine gute Wahl für relative Einheiten ist. Wenn die Media-Anfrage ausgelöst wird, ändern wir das Layout von drei Spalten in eine Spalte, indem wir die width der drei divs so ändern, dass sie die Seite ausfüllen.

Das Flexible Box Layout Module (Flexbox) ist ein nützliches und benutzerfreundliches Tool, mit dem Sie Ihre Inhalte responsiv gestalten können. Mit Flexbox können wir dasselbe Ergebnis wie in den vorherigen Schritten erzielen. Die Abstandsberechnungen werden jedoch für uns übernommen und es stehen eine Reihe von einsatzbereiten CSS-Eigenschaften zum Strukturieren von Inhalten zur Verfügung.

Vorhandene Regeln in CSS auskommentieren

Kommentieren Sie alle Regeln in styles/main.css aus, indem Sie sie in /* und */ einschließen. Diese Regeln werden als Fallback verwendet, wenn Flexbox nicht unterstützt wird.

Flexbox-Layout hinzufügen

Ersetzen Sie TODO 5.2 in styles/main.css durch den folgenden Code:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Speichern Sie den Code und aktualisieren Sie index.html in Ihrem Browser. Deaktivieren Sie den Gerätemodus im Browser und aktualisieren Sie die Seite. Wenn Sie das Browserfenster schmaler machen, werden die Spalten immer schmaler, bis nur noch eine sichtbar ist. Das beheben wir in der nächsten Übung mit Media-Queries.

Erklärung

In der ersten Regel wird container div als Flex-Container definiert. Dadurch wird ein Flex-Kontext für alle direkten untergeordneten Elemente aktiviert. Wir verwenden eine Mischung aus alter und neuer Syntax für Flexbox, um eine breitere Unterstützung zu erreichen (Weitere Informationen).

In der zweiten Regel wird die Klasse .col verwendet, um gleich breite untergeordnete Flex-Elemente zu erstellen. Wenn Sie das erste Argument der Eigenschaft flex für alle div-Elemente mit der Klasse col auf 1 festlegen, wird der verbleibende Platz gleichmäßig zwischen ihnen aufgeteilt. Das ist praktischer, als die relative Breite selbst zu berechnen und festzulegen.

Weitere Informationen

Optional: Unterschiedliche relative Breiten festlegen

Verwenden Sie die Pseudoklasse „nth-child“, um die relativen Breiten der ersten beiden Spalten auf 1 und die der dritten auf 1,5 festzulegen. Mit der Eigenschaft flex legen Sie die relativen Breiten für die einzelnen Spalten fest. Der Selektor für die erste Spalte würde beispielsweise so aussehen:

.container .col:nth-child(1)

Media Queries mit Flexbox verwenden

Ersetzen Sie TODO 5.4 in styles/main.css durch den folgenden Code:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Speichern Sie den Code und aktualisieren Sie index.html in Ihrem Browser. Wenn Sie die Browserbreite verringern, wird der Inhalt in einer Spalte neu angeordnet.

Erklärung

Wenn die Media-Anfrage ausgelöst wird, ändern wir das Layout von drei Spalten zu einer Spalte, indem wir die Eigenschaft flex-flow auf column festlegen. Damit wird dasselbe Ergebnis erzielt wie mit der Media-Anfrage, die wir in Schritt 5 hinzugefügt haben. Flexbox bietet viele weitere Eigenschaften wie flex-flow, mit denen Sie Ihre Inhalte ganz einfach strukturieren, neu anordnen und ausrichten können, damit sie in jedem Kontext gut reagieren.

Da Flexbox eine relativ neue Technologie ist, sollten wir Fallbacks in unser CSS einfügen.

Modernizr hinzufügen

Modernizr ist ein Tool zur Funktionserkennung, das das Testen der Flexbox-Unterstützung vereinfacht.

Ersetzen Sie TODO 6.1 in index.html durch den Code, mit dem der benutzerdefinierte Modernizr-Build eingebunden wird:

<script src="modernizr-custom.js"></script>

Erklärung

Wir haben oben in index.html einen Modernizr-Build eingefügt, der auf Flexbox-Unterstützung testet. Dadurch wird der Test beim Laden der Seite ausgeführt und die Klasse flexbox wird an das <html>-Element angehängt, wenn der Browser Flexbox unterstützt. Andernfalls wird dem <html>-Element die Klasse no-flexbox angehängt. Im nächsten Abschnitt fügen wir diese Klassen dem CSS hinzu.

Hinweis:Wenn wir die flex-wrap-Property von Flexbox verwenden würden, müssten wir einen separaten Modernizr-Detektor nur für diese Funktion hinzufügen. Ältere Versionen einiger Browser unterstützen Flexbox teilweise, aber nicht diese Funktion.

Flexbox progressiv verwenden

Wir verwenden die Klassen flexbox und no-flexbox im CSS, um Fallback-Regeln bereitzustellen, wenn Flexbox nicht unterstützt wird.

Fügen Sie nun in styles/main.css vor jeder auskommentierten Regel .no-flexbox ein:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Fügen Sie in derselben Datei .flexbox vor den restlichen Regeln ein:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Denken Sie daran, den Regeln für die einzelnen Spalten .flexbox hinzuzufügen, wenn Sie den optionalen Schritt 5.3 ausgeführt haben.

Speichern Sie den Code und aktualisieren Sie index.html im Browser. Die Seite sollte genauso aussehen wie zuvor, funktioniert jetzt aber in jedem Browser auf jedem Gerät. Wenn Sie einen Browser verwenden, der Flexbox nicht unterstützt, können Sie die Fallback-Regeln testen, indem Sie index.html in diesem Browser öffnen.

Weitere Informationen

Sie haben gelernt, wie Sie Ihre Inhalte so gestalten, dass sie responsiv sind. Mit Media-Queries können Sie das Layout Ihrer Inhalte an die Fenster- oder Bildschirmgröße des Geräts des Nutzers anpassen.

Behandelte Themen

  • Visuellen Darstellungsbereich festlegen
  • Flexbox
  • Medienabfragen

Ressourcen

Weitere Informationen zu den Grundlagen des responsiven Designs

Weitere Informationen zu Flexbox als Progressive Enhancement

Informationen zu Bibliotheken für responsives CSS

Weitere Informationen zur Verwendung von Media-Queries

Eine Liste aller Codelabs im PWA-Schulungskurs finden Sie im Willkommens-Codelab für den Kurs.