Bildschirmkonfigurationen

Responsives Webdesign war in vielerlei Hinsicht eine Reaktion auf Mobiltelefone. Bevor Smartphones auf den Markt kamen, haben sich nur sehr wenige darüber Gedanken darüber gemacht, wie Websites auf Handheld-Geräten aussehen und funktionieren sollten. Das änderte sich mit dem skurrilen Aufstieg von Mobiltelefonen mit integrierten Webbrowsern.

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

Diese reaktionsschnelle Denkweise wird Ihnen in Zukunft gut dienen. Es ist durchaus möglich, dass Ihre Websites auf Geräten und Bildschirmen angezeigt werden, die wir uns heute noch gar nicht vorstellen können. Und diese Denkweise geht über Bildschirme hinaus. Auch heute werden Geräte ohne Bildschirme verwendet, um auf Ihre Inhalte zuzugreifen. Sprachassistenten können Ihre Websites verwenden, wenn Sie eine solide Grundlage für semantisches HTML verwenden.

Auch in der Welt der Bildschirme gibt es Experimente. Heute sind Geräte mit faltbaren Displays auf dem Markt. Das bringt einige Herausforderungen für Ihre Designs mit sich.

Dual Screen

Nutzer von faltbaren Geräten können auswählen, ob ihr Webbrowser nur einen der Bildschirme oder beide Displays ausfüllen soll. Wenn sich der Browser über beide Bildschirme erstreckt, wird die angezeigte Website durch das Scharnier zwischen den beiden Bildschirmen aufgeteilt. Das sieht nicht gut aus.

Segmente im Darstellungsbereich

Es gibt eine experimentelle Medienfunktion, mit der festgestellt werden soll, ob Ihre Website auf einem Gerät mit zwei Bildschirmen 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 meldet und vertical-viewport-segments den Wert 1 meldet, verläuft das Scharnier am Gerät von oben nach unten, wodurch dein Inhalt in zwei nebeneinander angeordnete Steuerfelder aufgeteilt wird.

@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 meldet und horizontal-viewport-segments den Wert 1 meldet, läuft das Scharnier von einer Seite zur anderen. Dadurch wird der Inhalt in zwei Bereiche unterteilt, die sich übereinander befinden.

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

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 mehr als einen Bildschirm hat. Dies entspricht der Verwendung keiner Medienabfrage.

Umgebungsvariablen

Die Medienfunktion „viewport-segments“ allein hilft dir nicht, das lästige Scharnier bei der Entwicklung zu berücksichtigen. Sie müssen herausfinden, wie groß das Scharnier ist. Hier können Umgebungsvariablen helfen.

Mit Umgebungsvariablen in CSS können Sie unangenehme Geräteeinbrüche in Ihre Stile einfließen lassen. Sie können zum Beispiel die „Notch“ des iPhone X mit den Umgebungswerten safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom und safe-area-inset-left umgestalten. Diese Schlüsselwörter sind in einer env()-Funktion eingeschlossen.

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 Eigenschaften. 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, müssen Sie das meta-Element aktualisieren, das viewport-Informationen angibt:

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

Ihr Seitenlayout nimmt jetzt den gesamten Darstellungsbereich ein und füllt das Dokument sicher mit den vom Gerät bereitgestellten Werten auf.

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

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

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

Bei zwei Bildschirmen mit vertikalem Scharnier stellen Sie die erste Spalte auf die Breite des ersten Bildschirms und die zweite Spalte auf die Breite des zweiten Bildschirms ein.

@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;
  }
}

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

Die Zukunft

Werden faltbare Displays ein neuer Trend sein? Wer weiß. Niemand hätte vorhersehen können, wie beliebt Mobilgeräte werden. Daher sollten Sie sich Gedanken über zukünftige Formfaktoren machen.

Vor allem ist es wichtig, sicherzustellen, dass Ihre Websites auf zukünftige Entwicklungen reagieren können. Genau das bietet Ihnen responsives Webdesign: nicht nur eine Reihe praktischer Techniken, sondern auch eine Denkweise, die Ihnen beim Aufbau des Webs von morgen gut helfen wird.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Bildschirmkonfigurationen