Eine responsive Webseite in 3 Schritten erstellen

Webseiten sind heutzutage überall verfügbar. Wichtigster Grund dafür sind moderne Endgeräte wie Smartphones und Tablet-Computer. Die digitalen Begleiter sind aus unserem Alltag kaum mehr wegzudenken. Doch Webseiten sehen nicht auf jedem Endgerät gleich aus: ihre Responsivität ermöglicht es, dass auf dem Smartphone Inhalte anders dargestellt werden als beispielsweise auf dem Desktop-Computer. In diesem Tutorial werden wir daher eine einfache Webseite responsiv umsetzen, so dass sie den vorhandenen Platz sowohl auf dem Smartphone als auch auf dem Desktop-PC sinnvoll ausnutzt.

Notwendige Vorkenntnisse zum Durchführen dieses Tutorials:

• Grundkenntnisse in HTML5 und CSS3
• Kenntnisse zur Nutzung des CSS Grid Layouts

Schritt 1: Mobile First und CSS Grid

In diesem Schritt möchten wir das unten abgebildete, beispielhafte Layout für eine Onepager-Webseite mittels CSS-Grid erstellen. Wir beginnen gemäß des „Mobile First“-Paradigmas mit einer Version für Smartphones und fügen in den darauf folgenden Schritten Content und Responsivität hinzu.

Hinweise zu Beginn:

• Verwandtschaftsbeziehungen können in CSS-Selektoren genutzt werden. Wenn Sie beispielsweise alle div-Elemente auswählen möchten, die sich in einem Artikel befinden, können Sie den Nachfahrenselektor wählen: article div {…}
  Das Leerzeichen zwischen zwei Elementen bedeutet also eine Nachfahrenbeziehung.
• Wenn Sie nur die direkten Kinder eines Elements wählen möchten, können Sie den Kindselektor wählen: article > div {…}
  Das „Größer-Zeichen“ zwischen zwei Elementen bedeutet also eine Kindbeziehung.

Gehen Sie nun wie folgt vor:

• Speichern Sie die zum Download bereitgestellte HTML-Datei lokal ab und öffnen Sie diese mit dem Editor Ihrer Wahl, z.B. Visual Studio Code (VSC).
• Entscheiden Sie sich für eine übliche Smartphone-Bildschirmgröße und stellen Sie diese mittels der Entwicklerkonsole Ihres Browsers zur Ansicht ein oder skalieren Sie Ihr Browserfenster entsprechend.
• Erstellen Sie eine CSS-Datei und coden Sie entsprechend, so dass Ihre Webseite aussieht wie oben abgebildet. Prinzipiell ließe sich die simple Webseite auch ohne CSS-Grid umsetzen. Im Sinne der späteren Responsivität ist eine Nutzung hier jedoch sinnvoll.
  Für das Beispiel waren lediglich folgende CSS-Eigenschaften notwendig:
  • CSS-Grid: display, grid-template-areas, grid-area, height, gap
  • Boxen: padding, margin, border-radius
  • sonstige Gestaltung: font-family, color, background-color

Achten Sie bei der Gestaltung darauf, dass Ihre CSS-Datei möglichst nach Selektorentyp (Elementselektoren, Klassenselektoren, ggf. ID-Selektoren) geordnet ist, so dass Sie immer den Überblick behalten, wo sich welche Regeln befinden.

Gelingt es Ihnen, dass der Abstand zwischen allen Elementen pixelgenau identisch ist?

Den fertigen Quellcode können Sie hier herunterladen:

Schritt 2: Content hinzufügen

Verfeinern Sie in diesem Schritt Ihre mobile Webseite mit beliebigem Inhalt, so dass diese ähnlich der beigefügten Abbildung aussieht.

Gehen Sie dafür wie folgt vor:

• Falls noch nicht geschehen, wählen Sie eine ansprechende Schriftart, z.B. von https://fonts.google.com/ und binden Sie diese ein
• Füllen Sie Ihre Artikel mit Bildern und Fließtext:
  • Damit in Ihrem Editor der Fließtext vollständig angezeigt wird, ohne dass Sie horizontal scrollen müssen, wählen Sie „Anzeigen -> Zeilenumbruch“ in VSC.
  • Damit Bilder nicht über die Gridzelle hinausragen, setzen Sie deren Breite auf 100%.
  • Damit Texte nicht über die Gridzelle hinausragen, nutzen Sie overflow: hidden
  • Die Bilder in den Artikeln besitzen übrigens keinen Padding, die Texte innerhalb eines separaten div-Elements schon.
• Legen Sie ein Hintergrundbild für Ihre Top-Story mittels background-image fest. Damit das Bild die Zelle angemessen ausfüllt, müssen Sie die background-size auf 100% setzen. Um die Überschrift der Top Story zu platzieren, verwenden Sie position: relative und die weiteren dafür notwendigen CSS-Eigenschaften.

Optional: Setzen Sie einen Hover-Effekt um. Wenn sich die Maus über einen Artikel oder die Top Story bewegt, wird diese leicht skaliert. Dazu benötigen Sie den :hover-Selektor sowie die CSS-Eigenschaften scale/transition.

Das Ergebnis dieses Schrittes können Sie hier herunterladen:

Schritt 3: Responsivität hinzufügen

Nun geht es daran, Ihrer Website ein simples responsives Verhalten hinzuzufügen. Wenn Sie im Entwicklermodus Ihres Browsers die Smartphone-Einstellung entfernen, sieht Ihre Webseite womöglich ähnlich unbrauchbar wie abgebildet aus.

Um dies anzupassen, gehen Sie nun wie folgt vor:

• Binden Sie in Ihrer HTML-Seite eine weitere CSS-Datei ein, die nur geladen wird, wenn die minimale Bildschirmbreite 768px beträgt:

<link rel="stylesheet"
   href="stylesMediumLarge.css"
   media="screen and (min-width: 768px)">

Wichtig ist, dass diese Datei nach der ersten CSS-Datei geladen wird. Sie soll nur solche Styles enthalten, die für die Responsivität mittlerer und größerer Devices wichtig sind. Bestehende Styles werden dafür in Teilen überschrieben.

• Begrenzen Sie die maximale Breite Ihres main-Elements auf z.B. 1200px mittels max-width. Wenn Sie margin: auto festlegen, wird das main-Element zentriert.
• Vergrößern Sie die height Ihrer Top-Story und zentrieren Sie vertikal das Hintergrundbild mittels background-position.
• Passen Sie das Grid für mittlere und größere Bildschirme an, in dem Sie drei Beiträge nebeneinander in der zweiten Zeile anzeigen. Sie müssen dafür die CSS-Eigenschaften für den grid-container anpassen.
• Wenn Sie möchten, vergrößern Sie die Schriftgröße der Top-Story mittels der relativen Eigenschaft rem.

Die responsive Seite könnte bei 1400 Pixeln Breite in etwa so aussehen:

Wenn Sie wieder auf die Breite Ihres Smartphones wechseln, sollten Sie wieder die vorherige Ansicht sehen. Vielleicht fällt Ihnen auch auf, dass für mittlere Breiten eine weitere Anpassung des Grids auf z.B. zwei Beiträge in der zweiten Zeile sinnvoll wäre.

Herzlichen Glückwunsch, Sie haben in drei Schritten eine einfache responsive Webseite erstellt! Hier erhalten Sie bei Bedarf noch den fertigen Quellcode: