Bildschirmkonfigurationen

Responsives Webdesign war in vielerlei Hinsicht eine Reaktion auf Mobiltelefone. Bevor Smartphones auf den Markt kamen, überlegten nur sehr wenige Menschen, wie Websites auf Handheld-Geräten aussehen und funktionieren sollten. Das änderte sich mit dem rasanten Aufstieg der Mobiltelefone mit integrierten Webbrowsern.

Responsives Webdesign förderte eine Denkweise, die die Annahmen infrage stellte. Früher ging man davon aus, dass eine Website nur auf einem Desktop-Computer angezeigt werden würde. Heute ist es jedoch üblich, dieselbe Website auch für Smartphones und Tablets zu entwerfen. Tatsächlich ist die Nutzung von Mobilgeräten im Vergleich zu Computern im Web höher.

Diese reaktionsschnelle Herangehensweise wird Ihnen in der Zukunft von Nutzen sein. Es ist durchaus möglich, dass Ihre Websites auf Geräten und Bildschirmen angezeigt werden, die wir uns heute noch nicht einmal vorstellen können. Diese Herangehensweise geht über Bildschirme hinaus. Auch heute werden Inhalte über Geräte ohne Bildschirm aufgerufen. Sprachassistenten können Ihre Websites verwenden, wenn Sie mit einer soliden Grundlage semantischen HTML-Codes arbeiten.

In der Welt der Bildschirme wird auch experimentiert. Heutzutage sind Geräte mit faltbaren Displays auf dem Markt. Das bringt einige Herausforderungen für Ihre Designs mit sich.

Dual Screen

Nutzer faltbarer Geräte können auswählen, ob ihr Webbrowser nur einen der Bildschirme einnehmen oder sich über beide Displays erstrecken soll. Wenn der Browser beide Bildschirme umfasst, wird die angezeigte Website durch das Scharnier zwischen den beiden Bildschirmen getrennt. Das sieht nicht so toll aus.

Segmente im Darstellungsbereich

Es gibt eine experimentelle Medienfunktion, die ermittelt, ob Ihre Website auf einem Dual Screen-Gerät angezeigt wird. Der vorgeschlagene Name des Medienelements lautet viewport-segments. Es gibt zwei Varianten: horizontal-viewport-segments und vertical-viewport-segments.

Wenn die Medienfunktion „horizontal-viewport-segments“ den Wert 2 und vertical-viewport-segments den Wert 1 meldet, verläuft das Scharnier am Gerät von oben nach unten und unterteilt deine Inhalte in zwei nebeneinanderliegende Bereiche.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Wenn die Medienfunktion „vertical-viewport-segments“ den Wert 2 und horizontal-viewport-segments den Wert 1 gibt, verläuft das Scharnier von einer Seite zur anderen und unterteilt den Inhalt in zwei übereinander liegende Bereiche.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Wenn sowohl vertical-viewport-segments als auch horizontal-viewport-segments den Wert 1 melden, wird die Website nur auf einem Bildschirm angezeigt, auch wenn das Gerät mehrere Bildschirme hat. Dies entspricht der Verwendung einer Medienabfrage.

Umgebungsvariablen

Die Medienfunktion „viewport-segments“ alleine hilft dir nicht, bei der Entwicklung ein lästiges Scharnier zu verwenden. Sie müssen die Größe des Scharniers kennen. Hier können Umgebungsvariablen hilfreich sein.

Mit Umgebungsvariablen in CSS können Sie ungünstige Geräteangriffe in Ihre Stile einbeziehen. Sie können beispielsweise ein Design um die „Notch“ auf dem iPhone X mithilfe der Umgebungswerte safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom und safe-area-inset-left. Diese Keywords sind in eine env()-Funktion eingebunden.

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Umgebungsvariablen funktionieren wie benutzerdefinierte Attribute. Das bedeutet, dass Sie eine Fallback-Option übergeben können, falls die Umgebungsvariable nicht vorhanden ist.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Damit diese Umgebungsvariablen auf dem iPhone X funktionieren, aktualisieren Sie das meta-Element, das viewport-Informationen angibt:

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

Jetzt nimmt Ihr Seitenlayout den gesamten Darstellungsbereich ein und füllt das Dokument sicher mit von den Geräten bereitgestellten eingefügten Werten.

Für faltbare Bildschirme werden sechs neue Umgebungsvariablen vorgeschlagen: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Hier ist ein Beispiel für ein Layout mit zwei Spalten, eine breiter als die andere.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Bei zwei Bildschirmen mit vertikalem Scharnier legen Sie für die erste Spalte die Breite des ersten Bildschirms und für die zweite Spalte die Breite des zweiten Bildschirms fest.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Duale Bildschirme als Chance betrachten Vielleicht kann ein Bildschirm verwendet werden, um scrollbaren Textinhalt anzuzeigen, während der andere ein festes Element wie ein Bild oder eine Karte anzeigt.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Die Zukunft

Werden faltbare Displays die nächste große Dynamik entwickeln? Wer weiß. Niemand hätte vorhersehen können, wie beliebt Mobilgeräte werden würden. Es lohnt sich also, offen für zukünftige Formfaktoren zu sein.

Vor allem sollten Sie sicherstellen, dass Ihre Websites auf zukünftige Änderungen reagieren können. Responsives Design bietet Ihnen nicht nur eine Reihe praktischer Techniken, sondern eine Denkweise, die Ihnen beim Aufbau des Webs von morgen von Nutzen ist.

Wissen testen

Testen Sie Ihr Wissen über Bildschirmkonfigurationen