Responsive Webdesign mit HTML & CSS

Responsive Webdesign stellt sicher, dass Deine Webseite auf verschiedenen Geräten und Bildschirmgrößen benutzerfreundlich bleibt. In diesem Artikel erfährst Du alles über die Grundlagen des Responsive Webdesigns, verschiedene Ansätze und Techniken zur Umsetzung sowie die Optimierung von Bildern.

Grundlagen des Responsive Webdesigns Responsive Webdesign (RWD) ist ein Designansatz, bei dem das Layout und die Darstellung einer Webseite an die Bildschirmgröße und -auflösung des Betrachtungsgeräts angepasst werden. Durch die Verwendung von fluiden Rastern, flexiblen Bildern und CSS Media Queries wird eine optimale Benutzererfahrung auf verschiedenen Geräten und Bildschirmgrößen erreicht. Das Ziel von RWD ist es, eine einheitliche Benutzererfahrung zu bieten, unabhängig davon, ob jemand Deine Webseite auf einem Smartphone, Tablet oder Desktop-Computer betrachtet. Wenn du nun HTML gelernt hast und CSS Grundlagen beherrschst, kannst du dich ans responsive Design wagen.

CSS Media Queries und Breakpoints

Media Queries sind CSS-Anweisungen, die es ermöglichen, das Aussehen einer Webseite basierend auf den Eigenschaften des Betrachtungsgeräts anzupassen. Mit Media Queries können unterschiedliche Stile für verschiedene Bildschirmgrößen oder -auflösungen definiert werden. Breakpoints sind die Punkte, an denen das Layout einer Webseite aufgrund der Bildschirmgröße umbricht und sich anpasst.

Beispiel für eine Media Query:

@media screen and (max-width: 768px) {
  /* CSS-Regeln für Bildschirme mit einer maximalen Breite von 768 Pixeln */
  .container {
    width: 100%;
  }
}

In diesem Beispiel wird die Breite des Containers auf 100% gesetzt, wenn die Bildschirmbreite 768 Pixel oder weniger beträgt. Dadurch wird sichergestellt, dass der Container den gesamten verfügbaren Platz auf kleineren Bildschirmen einnimmt.

CSS-Media Queries Beispiele

Ändern der Schriftgröße basierend auf der Bildschirmbreite:

In diesem Beispiel wird die Schriftgröße der Webseite basierend auf der Bildschirmbreite geändert. Bei Bildschirmbreiten von 600 Pixeln oder weniger beträgt die Schriftgröße 14 Pixel, bei Bildschirmbreiten zwischen 601 und 1024 Pixeln beträgt sie 16 Pixel und bei Bildschirmbreiten von 1025 Pixeln oder mehr beträgt sie 18 Pixel.

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

Anpassung des Layouts für unterschiedliche Geräteorientierungen:

Dieses Beispiel zeigt, wie das Layout einer Webseite basierend auf der Geräteorientierung angepasst werden kann. Im Landscape-Modus (quer) hat der Container eine Breite von 80%, während im Portrait-Modus (hochkant) eine Breite von 95% verwendet wird.

/* Landscape-Modus */
@media screen and (orientation: landscape) {
  .container {
    width: 80%;
  }
}
/* Portrait-Modus */
@media screen and (orientation: portrait) {
  .container {
    width: 95%;
  }
}

Wenn dir das alles zu umständig wird, nutze ein CSS Framework wie Bootstrap oder ein CMS oder ein Homepage Baukasten.

Unterschiedliche Stile für Druck und Bildschirmanzeige:

In diesem Beispiel werden verschiedene Stile für die Bildschirmanzeige und den Druck festgelegt. Für die Bildschirmanzeige wird die Schriftart Arial mit einer Textfarbe von #333 verwendet, während für den Druck die Schriftart Times und eine Textfarbe von #000 (Schwarz) verwendet werden.

/* Stile für die Bildschirmanzeige */
@media screen {
  body {
    font-family: Arial, sans-serif;
    color: #333;
  }
}
/* Stile für den Druck */
@media print {
  body {
    font-family: Times, serif;
    color: #000;
  }
}

Anpassung der Spaltenanzahl basierend auf der Bildschirmbreite:

In diesem Beispiel wird die Spaltenanzahl einer Webseite basierend auf der Bildschirmbreite angepasst. Auf kleinen Bildschirmen (unter 768 Pixeln) wird eine Spalte verwendet, auf mittleren Bildschirmen (zwischen 768 und 1199 Pixeln) zwei Spalten und auf großen Bildschirmen (1200 Pixel und darüber) drei Spalten.

.column {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .column {
    width: 50%;
    float: left;
  }
}
@media screen and (min-width: 1200px) {
  .column {
    width: 33.33%;
  }
}

Optimierung von Bildern für Responsive Webdesign

Bilder spielen eine wichtige Rolle beim Responsive Webdesign. Um sicherzustellen, dass Deine Webseite auf allen Geräten und Bildschirmgrößen optimal aussieht, ist es wichtig, Bilder so zu optimieren, dass sie schnell laden und für verschiedene Bildschirmauflösungen geeignet sind.

  • Skalierbare Vektorgrafiken (SVG): SVGs sind ideal für Icons und Logos, da sie unabhängig von der Bildschirmauflösung scharf bleiben. SVGs sind Vektorgrafiken und können daher ohne Qualitätsverlust skaliert werden.
  • Responsive Bilder: Verwende das HTML5-Element <picture> oder das Attribut srcset, um verschiedene Versionen eines Bildes für unterschiedliche Bildschirmauflösungen bereitzustellen. Dadurch wird sichergestellt, dass das richtige Bild für die jeweilige Bildschirmgröße geladen wird.

Beispiel für ein responsive Bild mit dem <picture>-Element:

<picture>
  <source media="(min-width: 1200px)" srcset="large-image.jpg">
  <source media="(min-width: 768px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Beispielbild">
</picture>

In diesem Beispiel werden drei verschiedene Bildversionen für unterschiedliche Bildschirmbreiten bereitgestellt. Das entsprechende Bild wird basierend auf der Bildschirmgröße des Betrachtungsgeräts geladen.

Mobile-first vs. Desktop-first Ansätze

Es gibt zwei Hauptansätze beim Responsive Webdesign: Mobile-first und Desktop-first.

  • Mobile-first: Beim Mobile-first-Ansatz wird das Design zunächst für mobile Geräte erstellt und anschließend an größere Bildschirme angepasst. Dieser Ansatz eignet sich besonders gut für Webseiten, bei denen der Großteil der Besucher über mobile Geräte kommt. Der Vorteil dieses Ansatzes ist, dass er dazu beiträgt, die Performance und Benutzerfreundlichkeit auf mobilen Geräten zu optimieren.
  • Desktop-first: Beim Desktop-first-Ansatz wird das Design zunächst für Desktop-Geräte erstellt und dann an kleinere Bildschirmgrößen angepasst. Dieser Ansatz eignet sich für Webseiten, bei denen der Großteil der Besucher über Desktop-Computer kommt. Der Nachteil dieses Ansatzes ist, dass er möglicherweise zu einer suboptimalen Performance auf mobilen Geräten führt, da die Anpassungen für kleinere Bildschirme nachträglich vorgenommen werden.

Responsive Design mit CSS Grid und Flexbox

CSS Grid und Flexbox sind zwei moderne Layoutmodule, die die Erstellung von Responsive Webdesigns erleichtern.

  • CSS Grid: CSS Grid ist ein zweidimensionales Layoutmodul, das es ermöglicht, komplexe Layouts mit einfachen CSS-Regeln zu erstellen. Mit CSS Grid kannst Du ein Rastersystem definieren, das automatisch an die Bildschirmgröße angepasst wird. Dabei kannst Du sowohl Zeilen als auch Spalten flexibel gestalten.
  • Flexbox: Flexbox ist ein eindimensionales Layoutmodul, das die Anordnung von Elementen innerhalb eines Containers steuert. Mit Flexbox kannst Du Elemente sowohl horizontal als auch vertikal ausrichten und ihre Größe automatisch an den verfügbaren Raum anpassen.

Beide Layoutmodule können in Kombination verwendet werden, um komplexe und flexible Layouts für Responsive Webdesigns zu erstellen.

Responsive Webdesign ist ein essenzieller Bestandteil moderner Webentwicklung und sorgt dafür, dass Deine Webseite auf verschiedenen Geräten und Bildschirmgrößen optimal aussieht und funktioniert. Durch den Einsatz von Techniken wie CSS Grid, Flexbox und Media Queries sowie die Optimierung von Bildern kannst Du ein benutzerfreundliches und ansprechendes Design für alle Besucher Deiner Webseite gewährleisten.

Nach oben scrollen