Optimierung für großformatige Displays

Der folgende Beitrag ist ein Gastbeitrag von Jon Yablonski. Jon erzählte mir, dass er kürzlich an einem Projekt gearbeitet hat, bei dem sehr großer Wert auf **riesige** Bildschirme gelegt wurde. Jon wird uns zeigen, dass, genau wie bei jeder Art von RWD-Arbeit, Planung erforderlich ist. Zusätzliche Media Queries sind nützlich, um riesige Displays anzusprechen, und Typografie kann einen weit bringen.

Mit dem Aufkommen von Ultra-High-Definition-Displays und Geräten, die das Surfen im Web über Smart-TVs ermöglichen, wird das Internet zunehmend auf Bildschirmen genutzt und angezeigt, die herkömmliche Desktop-Displays in den Schatten stellen. Die meisten Websites sind nicht für diese Skalierung optimiert. Aber wenn Sie responsive Websites erstellen, sind die Werkzeuge, die Sie zum Skalieren Ihrer Inhalte benötigen, wahrscheinlich bereits vorhanden. In diesem Artikel werden wir uns die Herausforderungen und Techniken zur Optimierung Ihrer Website auf großformatigen Displays ansehen.

Identifizierung von großformatigen Displays

Zuerst wollen wir klären, was genau ein großformatiges Display ausmacht. Laut W3Counter sind Bildschirme mit einer Gerätebreite von 1366×768 Pixeln die gebräuchlichste große Geräteauflösung. Die nächsthäufigste große Auflösung ist 1920×1080 Pixel. Diese Werte stammen hauptsächlich von Desktop-Monitoren, und die meisten Websites passen sich problemlos an diese Bildschirme an.

Wenn wir weiter nach oben skalieren, liegt die nächsthäufigste Gerätebreite bei 2560 Pixeln. Diese Breite finden Sie bei den meisten hochauflösenden Desktop-Displays, die mit 27-Zoll-Monitoren beginnen. Hier beginnen die meisten Websites zu kämpfen, da zu viel Bildschirmplatz vorhanden ist.

Nehmen Sie zum Beispiel das obige Bild, das eine kleine Auswahl beliebter Websites zeigt, die jeweils mit einer Bildschirmgröße von 2560×1600 Pixeln aufgenommen wurden. Wie Sie sehen können, sind keine dieser Seiten für diese Skalierung optimiert: Text ist zu klein, die Menge an Inhalt, die in einem relativ kleinen Bereich untergebracht ist, macht es für das Auge schwierig zu erkennen, worauf es sich konzentrieren soll, und alles scheint vom umgebenden Leerraum überstrahlt zu werden. Jeder dieser Faktoren trägt zu einer verminderten Lesbarkeit und einer suboptimalen Benutzererfahrung bei.

Was hindert Designer und Entwickler also daran, für großformatige Displays zu optimieren? Die Antwort variiert je nach Team, aber es gibt definitiv ein paar technische Herausforderungen bei dieser Skalierung. Lassen Sie uns identifizieren, welche Herausforderungen das sind.

Die Herausforderungen von großformatigen Displays

Die Herausforderungen bei der Optimierung für großformatige Displays konzentrieren sich darauf, wie Inhalte skaliert und verwaltet werden. Unterteilt in Kategorien würden diese Herausforderungen wie folgt aussehen:

Content-Choreografie

Content-Choreografie bezieht sich darauf, wie Inhalte proportional zur Bildschirmgröße angepasst werden, um bei jeder Breite die bestmögliche Erfahrung zu bieten. Je größer der Bildschirm, desto weniger proportional erscheinen die Inhalte. Das ist aus mehreren Gründen ein Problem: 1) Der entstehende ungeschickte Raum ist ablenkend, 2) der übermäßige Raum kann den Inhalt überstrahlen, wodurch der Inhalt kleiner erscheint, als er ist, und 3) die Lesbarkeit leidet höchstwahrscheinlich darunter, zu klein zu sein.

Generell lässt sich sagen, dass die Art und Weise, wie sich Inhalte auf kleinen Bildschirmen anpassen, ziemlich einfach ist: Wir stapeln Inhalte in einer einzigen Spalte und passen bei Bedarf die visuelle Reihenfolge an. Auf der anderen Seite kann die Art und Weise, wie wir dies auf großen Geräten angehen, stark variieren, abhängig vom Inhalt und dem verfügbaren Platz. Wenn Sie vermeiden, Ihre Inhalte an den zusätzlichen Platz anzupassen, der auf großformatigen Displays zur Verfügung steht, erscheinen Ihre Inhalte im Vergleich zum negativen Raum, der sie umgibt, wahrscheinlich überstrahlt. Aber wenn Sie versuchen, den Raum mit Inhalten zu füllen, indem Sie mehr Spalten einführen, riskieren Sie, den Benutzer visuell zu überfordern, indem Sie zu viele Inhalte in einem relativen Bereich des Bildschirms präsentieren.

Bilder

Bilder stellen auf großformatigen Displays eine Reihe einzigartiger Herausforderungen dar. Da die meisten großen Bildschirme auch eine höhere Auflösung haben, müssen wir zusätzliche Variationen jedes Bildes verwalten, um sicherzustellen, dass das richtige Bild geliefert wird. Darüber hinaus müssen wir auch verwalten, wie sich die Bilder im Layout verhalten. Bilder, die sich nicht mit dem Bildschirm skalieren, können ungeschickte Lücken zwischen ihnen und anderen Elementen hinterlassen. Umgekehrt können Bilder, die zu groß skalieren, andere Elemente beeinträchtigen und überwältigend werden. Da es keine Einheitslösung für die Herausforderungen gibt, die Bilder mit sich bringen, müssen Sie sorgfältig überlegen, wie Sie sie basierend auf den spezifischen Bedürfnissen Ihres Inhalts verwalten möchten.

Optimierungstechniken

Nachdem wir nun die verschiedenen Herausforderungen bei großformatigen Displays identifiziert haben, sehen wir uns einige Ansätze zur Optimierung unserer Inhalte für diese Skalierung an.

Ich habe eine Website erstellt, um jede Technik zu demonstrieren, die wir zur Optimierung für großformatige Displays behandeln werden. Angesichts des Themas habe ich ein Thema gewählt, das im Kontext der Skalierbarkeit angemessen erscheint: den Todesstern II. Ich werde auf Teile des Codes aus dieser Demo verweisen, aber Sie können ihn vollständig hier auf CodePen einsehen.

Die Methode, die Sie zur Optimierung Ihrer Inhalte für großformatige Displays verwenden, variiert je nach Inhalt. Eine Option besteht darin, einfach das Layout anzupassen, um Ihre Inhalte so zu präsentieren, dass der zusätzliche Bildschirmplatz genutzt wird. Eine andere Methode ist die responsive Hochskalierung Ihrer Inhalte, damit sie proportional zum Platz passen. Und natürlich könnten Sie auch eine Kombination aus beiden Methoden nutzen. In unserer Demo werden wir unsere Inhalte responsiv hochskalieren, um Benutzern auf großformatigen Displays eine überlegene Erfahrung zu bieten.

Vorausschauende Planung

Der erste Schritt zur Optimierung für großformatige Displays ist die Planung dafür. Durch vorausschauende Planung minimieren Sie Überraschungen und stellen sicher, dass alles zusammenarbeitet, bevor Sie einsteigen, da es dann schwieriger ist, Änderungen vorzunehmen. Wenn Ihr Designprozess die Arbeit in einer Designanwendung beinhaltet, um zu visualisieren, wie Inhalte funktionieren sollen, dann tun Sie dies, indem Sie eine Canvas-Größe erstellen, die einen extra großen Bildschirm repräsentiert, neben Ihren anderen Kompositionen, die traditionellere Bildschirmgrößen darstellen. Wenn Sie es vorziehen, im Browser zu designen, dann planen Sie, wie Ihre Inhalte auf großen Bildschirmen funktionieren sollen, indem Sie zuerst Ihre Ideen skizzieren.

Für unsere Demo habe ich mich entschieden, mit der Skizzierung der allgemeinen Idee für das Layout und den Inhalt zu beginnen. Indem ich dies zuerst getan habe, bekam ich ein Gefühl dafür, wie ich die Website in Abschnitte unterteilen sollte und wie die Seite als Ganzes strukturiert werden könnte, um diese Abschnitte aufzunehmen. Als Nächstes habe ich das Design-Ästhetik ein wenig erkundet, indem ich eine High-Fidelity-Komposition in Sketch erstellt habe, die es mir ermöglichte, Designelemente wie Schriftarten, Farben und Proportionen zu identifizieren. Der Schlüssel hier ist, locker zu bleiben und sich keine Gedanken über Pixelperfektion zu machen – die wichtigen Dinge wie Interaktion, Skalierung und sogar Schriftgröße sollten im Browser entschieden werden.

Mit relativen Einheiten erstellen

Relative Einheiten wie Prozente, EMs und REMs sind für responsive Websites unerlässlich, da sie uns eine Möglichkeit bieten, auf einem flexiblen Fundament aufzubauen. Durch die durchgängige Verwendung relativer Einheiten stellen wir sicher, dass die Maße proportional bleiben, unabhängig von der vom Benutzer eingestellten Schriftgröße. Dies steht im direkten Gegensatz zu expliziten Pixelwerten, die sich nicht relativ zu den Benutzereinstellungen skalieren, und daher werden die Maße nicht proportional sein, wenn der Benutzer die Standardschriftgröße vergrößert oder verkleinert.

// Breakpoints
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px

// Media Queries
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

Nehmen Sie zum Beispiel die Media Queries, die für unsere Todesstern II Demo verwendet werden. Indem wir unsere Media Queries in EMs definieren, stellen wir sicher, dass das Design proportional skaliert, ohne unangenehme Scrollbalken im Browser zu aktivieren, wenn der Benutzer den Zoomfaktor anpasst.

Text skalieren

Zusätzlich zu Media Queries sind relative Einheiten auch für Text nützlich. Die Schriftgröße kann global gesteuert werden, indem die `font-size`-Eigenschaft für das `

Um dies in unserer Demo zu implementieren, haben wir zunächst einige Variablen definiert. Wie Sie unten sehen können, ist der erste Schritt die Definition des Basiswerts für Ihre Schriftgrößen. In unserem Fall ist er auf `1em` gesetzt, was bedeutet, dass wir standardmäßig die vom Browser festgelegte Standard-`font-size` verwenden. Dieser Basiswert kann im Browser leicht angepasst werden, liegt aber normalerweise bei `16px`. Es ist auch nützlich, die Basis-`line-height`-Werte hier in Verbindung mit der Schriftgröße zu definieren. Sie werden feststellen, dass wir die Einheit am Ende dieser `line-height`-Werte weglassen, auch bekannt als „einheitslose“ Werte. Indem wir die Zeilenhöhe auf diese Weise einstellen, stellen wir sicher, dass untergeordnete Elemente ihre Zeilenhöhen basierend auf ihrer berechneten Schriftgröße berechnen können, anstatt diesen Wert von ihrem übergeordneten Element zu erben.

// Font-Size
$base-font-size: 1em;

// Line-Height
$base-line-height: 1.5;
$header-line-height: 1.25;

Als Nächstes wenden wir diese Variablen auf unser ``-Element an und erhöhen sowohl die `font-size` als auch die `line-height` schrittweise, wenn der Bildschirm größer wird. Wie bereits erwähnt, wird dadurch die Textgröße überall skaliert, wenn Sie die Schriftgrößen in Ihrem Inhalt als relative Einheit wie EMs festgelegt haben.

body {
  font-size: $base-font-size;
  line-height: $base-line-height;

  @media #{$mq-medium} {
    font-size: $base-font-size*1.2;
    line-height: $base-line-height*1.2;
  }

  @media #{$mq-large} {
    font-size: $base-font-size*1.3;
  }

  @media #{$mq-xlarge} {
    font-size: $base-font-size*1.4;
  }

  @media #{$mq-xxlarge} {
    font-size: $base-font-size*1.6;
  }
}

Wie groß ist der Unterschied, wenn man den Text skaliert, um die Proportionen des Bildschirms auszufüllen? Es stellt sich heraus, ziemlich signifikant. Betrachten Sie das folgende Bild, das den Unterschied zwischen unserer Demo zeigt, wenn die `font-size` nicht global auf dem Body skaliert wird (links) und wenn die `font-size` global skaliert wird (rechts) bei 2560 Pixeln Breite. Nicht nur ist die hochskalierte Version besser lesbar, sondern alle Elemente auf der Seite wurden proportional hochskaliert, um den Platz auszunutzen.

Begrenzung

Wenn es um die Kontrolle von Inhalten geht, gibt es im Werkzeugkasten des Responsive Web Design nur wenige Werkzeuge, die so nützlich sind wie der allgegenwärtige „Container“. Dieses Element hat einen Zweck: die maximale Breite zu begrenzen, bis zu der sich unsere Inhalte erstrecken können. Nehmen Sie zum Beispiel das Folgende, das die gebräuchlichste Art ist, wie diese Elemente in CSS definiert werden:

.container {
  margin: 0 auto;
  max-width: 1024px;
}

Dieser Ansatz funktioniert, aber er skaliert nicht für große Bildschirme, da die maximale Breite zu sehr von einer bestimmten Breite abhängt. Selbst wenn der `max-width`-Wert auf etwas viel Größeres erhöht würde, ist er nicht relativ zur Viewport-Breite. Ein besserer Ansatz ist, die linken und rechten Ränder als relative Einheiten zu definieren und diese Werte schrittweise zu erhöhen, wenn die Bildschirmgröße zunimmt. Infolgedessen werden die Inhalte relativ zur Bildschirmbreite begrenzt und wirken auf einem extra großen Bildschirm heimischer.

.container {
  margin: 0 4%;

  @media #{$mq-medium} {
    margin: 0 8%;
  }

  @media #{$mq-large} {
    margin: 0 12%;
  }

  @media #{$mq-xlarge} {
    margin: 0 18%;
  }
}

Bilder verwalten

Wie Sie Bilder auf extra großen Bildschirmen verwalten, hängt vollständig von Ihren Projektanforderungen ab, aber Sie müssen höchstwahrscheinlich höher aufgelöste Variationen jedes Bildes bereitstellen, um sicherzustellen, dass die Bilder nicht zu klein sind. Unser Ansatz unterscheidet sich, je nachdem, wie das Bild angewendet wird.

.detail {
  height: 0;
  padding-bottom: 40%;
  margin: 0 0 $base-spacing*2;
  background-image: url(/Death-Star/detail_sml.jpg);
  background-position: center center;
  background-size: cover;

  @media #{$mq-xlarge} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_sml%402x.jpg);
  }

  @media #{$mq-medium} {
    background-image: url(Death-Star/detail_med.jpg);
  }

  @media #{$mq-medium} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_med%402x.jpg);
  }

  // Additional media queries

}

Für Hintergrundbilder ist dies ziemlich einfach: Definieren Sie das Hintergrundbild für das entsprechende Element, geben Sie dem Element Abmessungen und definieren Sie höher aufgelöste Quellen des Bildes innerhalb von Media Queries. Das obige Bild zeigt, wie dies in unserer Demo geschieht. Beachten Sie, dass wir die `height`-Eigenschaft auf `0` setzen, unten `padding` hinzufügen und die `background-size`-Eigenschaft auf `cover` setzen. Dies ist eine Technik, die als „Uncle Dave’s Ol’ Padded Box“ bekannt ist und es uns ermöglicht, ein Seitenverhältnis mit prozentualem Padding basierend auf der Breite des übergeordneten Elements beizubehalten.

Für Inline-Bilder haben wir nun eine HTML-Spezifikation, die es uns ermöglicht, die `img`- und `source`-Elemente zu erweitern, um eine Liste verfügbarer Bildquellen und ihrer Größen bereitzustellen. Dies ermöglicht es Browsern, diese Informationen zu verwenden, um die beste Bildquelle auszuwählen. Das folgende Bild zeigt, wie dies in unserer Demo implementiert wird, bei der wir zusätzliche Bildquellen und ihre Größen mit den Attributen `srcset` und `sizes` definieren. Dies ermöglicht es dem Browser, die Bildauflösung basierend auf Bildschirmgröße und Pixeldichte zu ändern und somit das am besten geeignete Bild zu liefern.

<header role="banner" class="header">
  <div class="header__img">
    <img  
      srcset="./death-star_sml%402x.jpg 400w,
      ./death-star_lrg.jpg 600w,
      ./death-star_sml%402x.jpg 800w,
      ./death-star_lrg%402x.jpg 1200w"
      sizes ="(min-width:1336px) 75vw, 50vw"
      alt="Death Star 02">
  </div>
</header>

Sie werden feststellen, dass wir kein `src`-Attribut für unser Inline-Bild angeben. Dies liegt daran, dass wir ein Polyfill verwenden müssen, um die Unterstützung für `srcset` und `sizes` in Browsern zu aktivieren, die diese noch nicht unterstützen. Browser ohne Unterstützung werden die `src` des Bildes vorab abrufen, wenn es angegeben ist, was oft zu einer verschwenderischen Überlastung führt. Um dies zu verhindern, empfiehlt der Autor des Polyfills, `src` wegzulassen und nur `srcset` zu verwenden.

Fazit

Die Bereitstellung der bestmöglichen Erfahrung bei jeder Bildschirmgröße ist unerlässlich. Wenn es darum geht, unsere Inhalte für großformatige Displays zu optimieren, sollten wir nicht bei gängigen Desktop-Auflösungen aufhören. Mit der richtigen Planung können wir die Werkzeuge nutzen, die uns bereits beim Erstellen responsiver Websites zur Verfügung stehen, um unsere Inhalte für großformatige Displays zu skalieren und anzupassen.

Weiterführende Lektüre/Werkzeuge

• Screensiz.es
• Surveying the Big Screen
• Responsive Images Community Group