Mit der zunehmenden Anzahl von Smartphone-Nutzern im Internet wird es für Webdesigner immer wichtiger, Inhalte so zu gestalten, dass sie für verschiedene Bildschirmgrößen gut geeignet sind. Responsives Webdesign, ursprünglich von Ethan Marcotte in A List Apart definiert, ist eine Designstrategie, die auf die Bedürfnisse der Nutzer und die Funktionen ihrer Geräte reagiert, indem das Layout einer Website an das verwendete Gerät angepasst wird. So kann eine responsive Website beispielsweise Inhalte auf einem Smartphone in einer einzelnen Spalte, auf einem Tablet in zwei Spalten und auf einem Computer in drei oder vier Spalten anzeigen.
Da internetfähige Geräte so viele mögliche Bildschirmgrößen haben, ist es wichtig, dass sich deine Website an die vorhandene oder zukünftige Bildschirmgröße anpasst. Modernes responsives Design berücksichtigt auch Interaktionsmodi wie Touchscreens. Das Ziel ist es, die Nutzung für alle zu optimieren.
Darstellungsbereich festlegen
Seiten, die für verschiedene Geräte optimiert sind, müssen im Header des Dokuments ein Meta-Darstellungsbereichs-Tag enthalten. Dieses Tag teilt dem Browser mit, wie die Größe und Skalierung der Seite gesteuert werden soll.
Um die beste Darstellung zu ermöglichen, rendern mobile Browser die Seite mit einer Desktop-Bildschirmbreite (in der Regel etwa 980px, variiert jedoch je nach Gerät). Anschließend wird versucht, die Darstellung zu verbessern, indem die Schriftgrößen erhöht und die Inhalte skaliert werden, damit sie auf den Bildschirm passen. Dies kann dazu führen, dass Schriftarten inkonsistent aussehen und Nutzer heranzoomen müssen, um die Inhalte zu sehen und mit ihnen zu interagieren.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Mit dem Meta-Viewport-Wert width=device-width wird die Seite so festgelegt, dass sie der Breite des Bildschirms in geräteunabhängigen Pixeln (DIP) entspricht. Dies ist eine standardmäßige visuelle Pixeleinheit, die auf einem Bildschirm mit hoher Pixeldichte aus vielen physischen Pixeln bestehen kann. So kann der Inhalt der Seite an verschiedene Bildschirmgrößen angepasst werden.
Einige Browser halten die Breite der Seite beim Drehen in den Querformatmodus konstant und zoomen heran, um den Bildschirm auszufüllen, anstatt die Inhalte neu zu formatieren. Wenn Sie den Wert initial-scale=1 hinzufügen, wird Browsern unabhängig von der Geräteausrichtung ein Verhältnis von 1:1 zwischen CSS-Pixeln und geräteunabhängigen Pixeln vorgegeben. So kann die Seite die volle Breite im Querformat nutzen.
Mit der Lighthouse-Prüfung Kein <meta name="viewport">-Tag mit width oder initial-scale können Sie den Prozess automatisieren, um sicherzustellen, dass in Ihren HTML-Dokumenten das Viewport-Meta-Tag richtig verwendet wird.
Größe von Inhalten an den Darstellungsbereich anpassen
Sowohl auf Computern als auch auf Mobilgeräten sind Nutzer daran gewöhnt, Websites vertikal, aber nicht horizontal zu scrollen. Wenn Nutzer horizontal scrollen oder herauszoomen müssen, um die gesamte Seite zu sehen, ist das nicht nutzerfreundlich.
Beim Entwickeln einer mobilen Website mit einem Meta-Viewport-Tag wird häufig versehentlich Seiteninhalt erstellt, der nicht ganz in den angegebenen Darstellungsbereich passt. Ein Bild, das breiter als der Darstellungsbereich ist, kann beispielsweise zu horizontalem Scrollen führen. Passen Sie Ihre Inhalte so an, dass sie in den Darstellungsbereich passen.
Mit der Lighthouse-Prüfung Größe des Inhalts wird nicht korrekt an den Darstellungsbereich angepasst können Sie das Erkennen von überlaufenden Inhalten automatisieren.
Bilder
Wenn ein Bild mit festen Abmessungen größer als der Darstellungsbereich ist, muss auf der Seite gescrollt werden. Wir empfehlen, allen Bildern eine max-width von 100% zuzuweisen. Dadurch werden die Bilder auf die Größe des verfügbaren Bereichs verkleinert und sie werden nicht über ihre ursprüngliche Größe hinaus gedehnt.
In den meisten Fällen können Sie dies tun, indem Sie Ihrem Stylesheet Folgendes hinzufügen:
img {
max-width: 100%;
display: block;
}
Fügen Sie die Abmessungen des Bildes dem img-Element hinzu.
Auch wenn Sie max-width: 100% festlegen, empfehlen wir Ihnen, Ihren <img>-Tags die Attribute width und height hinzuzufügen, damit der Browser Platz für Bilder reservieren kann, bevor sie geladen werden. So lassen sich Layoutverschiebungen vermeiden.
Layout
Da sich die Bildschirmabmessungen und die Breite in CSS-Pixeln zwischen den Geräten stark unterscheiden (z. B. zwischen Smartphones und Tablets und sogar zwischen verschiedenen Smartphones), sollten Inhalte nicht von einer bestimmten Darstellungsbereichsbreite abhängen, um gut gerendert zu werden.
Bisher mussten Layoutelemente in Prozent angegeben werden. Bei der Verwendung von Pixelmessungen muss der Nutzer auf kleinen Bildschirmen horizontal scrollen:
Wenn Sie stattdessen Prozentsätze verwenden, werden die Spalten auf kleineren Bildschirmen schmaler, da jede Spalte immer denselben Prozentsatz der Bildschirmbreite einnimmt:
Moderne CSS-Layouttechniken wie Flexbox, Grid Layout und Multicol erleichtern das Erstellen dieser flexiblen Raster erheblich.
Flexbox
Verwenden Sie Flexbox, wenn Sie mehrere Elemente unterschiedlicher Größe haben und diese bequem in einer oder mehreren Zeilen unterbringen möchten, wobei kleinere Elemente weniger Platz und größere Elemente mehr Platz benötigen.
.items {
display: flex;
justify-content: space-between;
}
Mit Flexbox können Sie Elemente in einer einzelnen Zeile oder in mehreren Zeilen anzeigen lassen, wenn der verfügbare Platz abnimmt.
Weitere Informationen zur Flexbox
CSS-Rasterlayout
Mit dem CSS-Rasterlayout lassen sich flexible Raster erstellen. Sie können das vorherige Beispiel für ein freiliegendes Element verbessern, indem Sie das Rasterlayout und die Einheit fr verwenden, die einen Teil des verfügbaren Platzes im Container darstellt.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Mit dem Rasterlayout können Sie auch regelmäßige Rasterlayouts mit so vielen Elementen erstellen, wie sie passen. Die Anzahl der verfügbaren Tracks reduziert sich mit zunehmender Bildschirmgröße. Die folgende Demo zeigt ein Raster mit so vielen Karten, wie in jede Zeile passen, mit einer Mindestgröße von 200px.
Weitere Informationen zum CSS-Rasterlayout
Mehrspaltiges Layout
Für einige Layouttypen können Sie das mehrspaltige Layout (Multicol) verwenden. Damit werden mit dem Attribut column-width responsive Spaltennummern erstellt.
In der folgenden Demo werden Spalten auf der Seite hinzugefügt, wenn Platz für eine weitere 200px-Spalte ist.
Weitere Informationen zu Multicol
CSS-Medienabfragen für Responsivität verwenden
Manchmal müssen Sie umfangreichere Änderungen an Ihrem Layout vornehmen, um bestimmte Bildschirmgrößen zu unterstützen, als mit den zuvor beschriebenen Techniken möglich ist. Hier kommen Medienabfragen ins Spiel.
Medienabfragen sind einfache Filter, die Sie auf CSS-Stile anwenden können, um diese Stile je nach Art des Geräts, auf dem die Inhalte gerendert werden, zu ändern. Außerdem kann das Styling je nach Gerätefunktionen wie Breite, Höhe, Ausrichtung und Verwendung als Touchscreen geändert werden.
Wenn Sie unterschiedliche Stile für den Druck bereitstellen möchten, können Sie einen Ausgabetyp anvisieren und ein Stylesheet für Druckstile einschließen:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Sie können auch eine Medienabfrage verwenden, um Druckstile in Ihr Haupt-Stylesheet aufzunehmen:
@media print {
/* print styles go here */
}
Bei responsivem Webdesign beziehen sich die häufigsten Abfragen auf Gerätefunktionen. Sie können Ihr Layout also für Touchscreens oder kleinere Bildschirme anpassen.
Medienabfragen basierend auf der Größe des Darstellungsbereichs
Mit Medienabfragen können Sie eine responsive Website erstellen, bei der bestimmte Stile auf bestimmte Bildschirmgrößen angewendet werden. Bei Abfragen nach der Bildschirmgröße können folgende Dinge getestet werden:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Alle diese Funktionen werden von den meisten Browsern unterstützt. Weitere Informationen, einschließlich Informationen zur Browserunterstützung, finden Sie auf der MDN unter width, height, orientation und aspect-ratio.
Medienabfragen nach Gerätefunktion
Angesichts der verfügbaren Gerätevielfalt können Entwickler nicht davon ausgehen, dass jedes große Gerät ein gewöhnlicher Desktop- oder Laptopcomputer ist oder dass jedes kleine Gerät einen Touchscreen hat. Mit einigen neueren Ergänzungen der Spezifikation für Medienabfragen können Sie nach Funktionen wie dem Zeigertyp testen, der für die Interaktion mit dem Gerät verwendet wird, und ob der Nutzer einen Zeiger über Elemente halten kann.
hoverpointerany-hoverany-pointer
Sehen Sie sich diese Demo auf verschiedenen Geräten an, z. B. auf einem normalen Computer und einem Smartphone oder Tablet.
Diese neueren Funktionen werden in allen modernen Browsern gut unterstützt. Weitere Informationen finden Sie auf den MDN-Seiten für Hover, Any-Mouseover, Pointer und Any-Pointer.
any-hover und any-pointer verwenden
Mit den Funktionen any-hover und any-pointer wird getestet, ob der Nutzer den Mauszeiger auf Elemente bewegen kann (häufig als Bewegen des Mauszeigers bezeichnet) oder überhaupt einen Mauszeiger verwenden kann, auch wenn dies nicht die primäre Art und Weise ist, wie er mit seinem Gerät interagiert. Seien Sie bei der Verwendung dieser Optionen vorsichtig, z. B. um Touchscreen-Nutzer nicht dazu zu zwingen, zu einer Maus zu wechseln.
any-hover und any-pointer können jedoch nützlich sein, wenn es wichtig ist, die Art des Geräts eines Nutzers zu ermitteln. Ein Laptop mit Touchscreen und Touchpad sollte beispielsweise neben der Möglichkeit zum Schweben auch grobe und feine Zeiger haben.
Unterbrechungen auswählen
Definieren Sie keine Unterbrechungen basierend auf Geräteklassen oder Produkten, Markennamen oder Betriebssystemen. Das erschwert die Wartung des Codes. Lassen Sie stattdessen die Inhalte bestimmen, wie sich das Layout an den Container anpasst.
Wählen Sie wichtige Markierungen aus, indem Sie klein anfangen und sich dann steigern.
Entwerfen Sie die Inhalte zuerst so, dass sie auf einem kleinen Bildschirm passen, und vergrößern Sie den Bildschirm dann so weit, bis ein Seitenwechsel erforderlich wird. So können Sie die Anzahl der Haltepunkte auf der Seite minimieren und basierend auf dem Inhalt optimieren.
Im folgenden Beispiel wird das Beispiel für das Wettervorhersage-Widget am Anfang dieser Seite veranschaulicht. Der erste Schritt besteht darin, die Prognose auf einem kleinen Bildschirm gut aussehen zu lassen:
Ändern Sie als Nächstes die Größe des Browsers, bis zwischen den Elementen zu viel Weißraum vorhanden ist, um das Widget ansprechend zu gestalten. Die Entscheidung ist subjektiv, aber mehr als 600px ist definitiv zu breit.
Wenn Sie einen Wendepunkt bei 600px einfügen möchten, erstellen Sie am Ende Ihres CSS für die Komponente zwei Medienabfragen: eine für den Fall, dass der Browser 600px oder schmaler ist, und eine für den Fall, dass er breiter als 600px ist.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Refaktorisieren Sie abschließend das CSS. Fügen Sie in der Medienabfrage für ein max-width von 600px das CSS hinzu, das nur für kleine Bildschirme vorgesehen ist. Fügen Sie in der Medienabfrage für ein min-width von 601px CSS für größere Bildschirme hinzu.
Wählen Sie bei Bedarf kleinere Markierungen aus.
Neben der Auswahl wichtiger Haltepunkte bei signifikanten Layoutänderungen ist es auch hilfreich, sich an kleinere Änderungen anzupassen. Zwischen den wichtigsten Haltepunkten kann es beispielsweise hilfreich sein, die Ränder oder die Abstände eines Elements anzupassen oder die Schriftgröße zu erhöhen, damit es im Layout natürlicher wirkt.
Dieses Beispiel folgt demselben Muster wie das vorherige und beginnt mit der Optimierung von Layouts für kleinere Bildschirme. Vergrößern Sie zuerst die Schrift, wenn die Breite des Darstellungsbereichs größer als 360px ist. Wenn danach genügend Platz vorhanden ist, können Sie die Höchst- und Tiefsttemperaturen so trennen, dass sie sich auf derselben Zeile befinden, und die Wettersymbole vergrößern.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Bei großen Bildschirmen empfehlen wir, die maximale Breite des Vorhersagebereichs so festzulegen, dass er nicht die gesamte Bildschirmbreite einnimmt.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Text für die Lesung optimieren
Die klassische Lesbarkeitstheorie legt nahe, dass eine ideale Spalte 70 bis 80 Zeichen pro Zeile enthalten sollte (etwa 8 bis 10 Wörter auf Englisch). Sie sollten jedes Mal einen Haltepunkt hinzufügen, wenn die Breite eines Textblocks mehr als zehn Wörter überschreitet.
In diesem Beispiel werden mit der Roboto-Schriftart bei 1em auf dem kleineren Bildschirm 10 Wörter pro Zeile angezeigt, auf größeren Bildschirmen ist jedoch ein Umbruch erforderlich. Wenn die Browserbreite in diesem Fall größer als 575px ist, beträgt die ideale Inhaltsbreite 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Inhalte nicht ausblenden (:#avoid-hiding-content)
Achten Sie darauf, welche Inhalte Sie je nach Bildschirmgröße ausblenden oder anzeigen lassen. Blenden Sie Inhalte nicht nur aus, weil sie nicht auf dem Bildschirm angezeigt werden können. Die Bildschirmgröße sagt nicht voraus, was ein Nutzer sehen möchte. Wenn Sie beispielsweise die Pollenbelastung aus der Wettervorhersage entfernen, kann das für Allergiker im Frühling ein ernstes Problem darstellen, da sie diese Informationen benötigen, um zu entscheiden, ob sie nach draußen gehen können.
Haltepunkte für Medienabfragen in den Chrome-Entwicklertools ansehen
Nachdem Sie die Media-Query-Bruchpunkte eingerichtet haben, sehen Sie sich an, wie sich diese auf das Erscheinungsbild Ihrer Website auswirken. Sie können die Größe Ihres Browserfensters ändern, um die Grenzwerte auszulösen. Die Chrome-Entwicklertools haben jedoch eine integrierte Funktion, mit der Sie sehen können, wie eine Seite bei verschiedenen Grenzwerten aussieht.
So rufen Sie Ihre Seite unter verschiedenen Seitenauflösungen auf:
- Öffnen Sie die Entwicklertools.
- Aktivieren Sie den Gerätemodus. Dieser wird standardmäßig im responsiven Modus geöffnet.
- Wenn Sie Ihre Medienabfragen sehen möchten, öffnen Sie das Menü „Gerätemodus“ und wählen Sie Medienabfragen anzeigen aus. Die Seitenaufteilung wird dann als farbige Balken über der Seite angezeigt.
- Klicken Sie auf eine der Balken, um die Seite aufzurufen, während diese Mediaabfrage aktiv ist. Klicken Sie mit der rechten Maustaste auf einen Balken, um zur Definition dieser Medienabfrage zu gelangen.