Worauf es beim Webdesign für große Displaygrößen wirklich ankommt

Large-Screen-Displays: (k)eine Herausforderung für Webdesigner?
Kommentare

Ohne Responsive Webdesign geht heutzutage im Bereich Webdesign meist gar nichts. Doch während meist von der Skalierung für die kleinen Displays von Smartphones und Tablets gesprochen wird, gibt es auch das Gegenteil davon: die übergroßen High-Definition-Screens von Smart-TVs und Co. Problem an der Sache: nur selten sind Websites für die Darstellung auf solchen Displays optimiert.

Dabei sind die Tools, die für das Responsive Webdesign sowieso zum Einsatz kommen, meist schon ausreichend, um beim User auch auf großen Displays für eine gute User Experience zu sorgen. Die Rede ist unter anderem von Media-Queries, Container-Elementen und HTML-Spezifikationen, mit denen insbesondere Bilder für die Darstellung auf den unterschiedlichsten Displaygrößen optimiert werden können.

Trotzdem sind es vor allem die sogenannten Large-Screen-Displays, die bei der Gestaltung von Websites für eine Herausforderung sorgen. Jon Yablonski hat einige der größten Stolpersteine und passende Optimierungstechniken zusammengefasst.

Was ist überhaupt ein „Large-Screen-Display“?

Um eins vorweg zu nehmen: Es gibt unterschiedliche Ansätze, mit denen man sich an die Optimierung des eigenen Contents für große Bildschirme machen kann. Doch egal, auf welche Praktiken man letztendlich setzt, ist es wichtig, zu verstehen, ab wann ein großer Bildschirm tatsächlich in die Kategorie „Large-Screen“ fällt.

Die typische Auflösung größerer Bildschirme beträgt laut des W3Counters 1366×768 Pixel; ebenfalls gängig ist eine Auflösung von 1920x1080px. Die meisten Desktop-Monitore fallen in eine dieser Kategorien und mit richtig angewandtem Responsive Webdesign dürften sich die meisten Websites diesen Bildschirmgrößen problemlos anpassen.

Richtig interessant wird es darum erst bei der nächstgrößeren Bildschirmgröße – 2560x1600px –, die bei HD-Desktop-Bildschirmen ab 27’’ zum Tragen kommt. Genau hier fangen bei den meisten Websites nämlich die Darstellungsprobleme auf großen Bildschirmen an; es kommt zu übermäßig viel Whitespace, kaum lesbarer Winzschrift und völlig verpixelten Bildern:

Probleme im Design auf Large-Screen-Displays

Probleme im Design auf Large-Screen-Displays, Quelle: https://css-tricks.com/optimizing-large-scale-displays/

Von Lesbarkeit und guter User Experience kann da kaum die Rede sein. Doch die User Experience ist auf Large-Screen-Displays mindestens ebenso wichtig wie auf Mobile Devices – insbesondere, weil immer mehr Nutzer mithilfe solcher Bildschirme auf das Web zugreifen.

Da stellt sich zurecht die Frage, warum Webdesigner sich nicht mehr Mühe geben, Webseiten auch für große Bildschirme zu optimieren – immerhin wird seit Jahren von Mobile-First und besserer UX auf Mobile Devices gesprochen. Warum also nicht auch den Displaygiganten ähnlich viel Aufmerksamkeit widmen?

Large-Screen-Displays: Voller technischer Herausforderungen

Optimierungen für große Displaygrößen sind allerdings voller technischer Herausforderungen, die Entwickler und Webdesigner bei der Gestaltung im Hinterkopf behalten müssen. Dazu gehört zum einen die Content-Choreografie – also die Art und Weise wie Content proportional zur Bildschirmgröße adaptiert wird und für jede Viewport-Breite das bestmögliche Ergebnis ausspielt. Je größer der Bildschirm wird, desto weniger proportional wirkt der Content, was gerade auf Large-Screen-Displays zu einem großen Problem wird. Dazu erklärt Yablonski:

If you avoid adapting your content to the excess space made available on large-screen displays, your content will most likely seem dwarfed in comparison to the negative space that surrounds it.

Doch auch das Auffüllen des zur Verfügung stehenden Whitespaces mit mehr Content ist nicht ideal; der User verliert dann schnell den Fokus, weil zu viel Content zur Verfügung steht.

Auch Bilder sind – wie so oft im Responsive Webdesign – ein Stolperstein bei der Optimierung für Large-Screen-Displays. Hier ist vor allem die Auflösung problematisch: die meisten großen Bildschirme haben eine deutlich größere Auflösung, sodass weitere Bildervariationen nötig werden; außerdem muss auf die richtige Skalierung der Bilder geachtet werden.

Optimierungstechniken für große Bildschirme

Wie eingangs bereits erwähnt, gibt es verschiedene Möglichkeiten zur Optimierung von Websites für große Bildschirme. Welche davon am besten genutzt wird, ist allerdings abhängig vom Content der Seite; nicht alle Methoden funktionieren für jede Art von Content.

Zur Auswahl stehen zum Beispiel die folgenden Ansätze zur Optimierung:

  1. das Layout so anpassen, dass der Content auf eine Art und Weise präsentiert wird, die den zusätzlichen Displayplatz zu ihrem Vorteil ausnutzt
  2. den Content responsiv hochskalieren, sodass er proportional an den Platz angepasst wird
  3. eine Kombination aus Nummer 1 und Nummer 2

Allerdings gibt es noch einige andere Dinge, auf die man bei der Optimierung von Webseiten für Large-Screen-Displays achten sollte.

1.
Frühzeitige Planung


Um eins kommt man in jedem Fall nicht herum: die frühzeitige Planung des Layouts. Damit stellt man vor allem sicher, dass es später keine bösen Überraschungen gibt, die sich negativ auf die User Experience des Nutzers auswirken könnten. Wird etwa in einer Design-Applikation gearbeitet, kann neben den traditionell großen Canvases eine eigene Canvasgröße angelegt werden, die einem Large-Screen-Display entspricht. Und auch, wenn direkt im Browser designt wird, ist es ratsam, alle Layout-Ideen für verschiedene Displaygrößen durchzuspielen und gründlich vorab zu skizzieren.

2.
Mit relativen Einheiten arbeiten


Essentiell für die Arbeit mit Responsive Webdesign ist die Nutzung relativer Einheiten, die es Webdesignern erlauben, auf einer flexiblen Basis aufzubauen. Besonders wichtig – egal ob bei der Arbeit für Mobile- oder Large-Screen-Displays ist allerdings, dass alle Maßangaben proportional bleiben – und zwar egal, welche Schriftgröße der User eingestellt hat. Überhaupt ist die Schriftgröße ein gutes Stichwort: sie kann global kontrolliert werden, indem das font-size-Property im <body>-Element angepasst wird. Auf Large-Screen-Displays ermöglicht das das proportionale Hochskalieren des Texts, sodass er im Vergleich zum Rest des Contents auf den großen Bildschirmen nicht zu klein ausfällt.

3.
Container-Element nutzen


Eigentlich hat das Container-Element nur eine Aufgabe: die Kontrolle der maximalen Breite, die der Content einer Website einnehmen darf. Allerdings, so erklärt Yablonski, ist max-width bei Large-Screen-Displays zu abhängig von einer bestimmten Breite, als dass es problemlos auf den großen Bildschirmen funktionieren würde. Stattdessen rät er dazu, den rechten und linken Margin mit relativen Einheiten zu definieren und diese Werte stufenweise anzupassen – eben proportional zur Bildschirmgröße.

4.
Bilder


Bilder sind im Responsive Webdesign ein großer Stolperstein – egal, ob mit einem Mobile-First-Ansatz gearbeitet oder sich auf große Bildschirm konzentriert wird. Auch hier kommt es ganz auf das Projekt an, wie am besten mit Bildern umgegangen wird. In den meisten Fällen werden hochauflösendere Varianten der Bilder benötigt, damit sie nicht zu klein und zu verpixelt auf der Website erscheinen. Je nachdem, ob ein Bild als Hintergrund gebraucht oder inline eingefügt wird, gibt es Unterschiede in der Vorgehensweise. Für Inline-Bilder steht etwa eine neue HTML-Spezifikation zur Verfügung, mit deren Hilfe img- und source-Elemente um weitere Bildvarianten erweitert werden können, sodass der Browser leichter aus den verschiedenen Bildauflösungen wählen kann.

All diese Tipps verdeutlicht Yablonski in seinem Artikel auch anhand eines Beispiels; es stehen dort auch einige Code-Beispiele zur Verfügung.

Keine Angst vor Large-Screen-Displays

Large-Screen-Displays werden beim Designen einer Website oft vernachlässigt und sich stattdessen auf die Darstellung auf Mobile-Devices und Tablets konzentriert. Allerdings nimmt die Nutzung solch großer Bildschirme dank Smart-TV und Co. immer mehr zu. Grund genug also, auch Large-Screen-Displays entsprechend Aufmerksamkeit beim Website-Design zukommen zu lassen. Das sollte mit der richtigen Planung auch kein Problem sein – immerhin, so glaubt Yablonski, sind die benötigten Tools ja bereits in Reichweite:

With the proper planning, we can leverage the tools already available to us when building responsive websites to scale up and adapt our content for large-scale displays.

Aufmacherbild: Table with laptop and large screen on the wall von Shutterstock / Urheberrecht: Kostsov

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -