Mit dem Aufkommen von ultrahochauflösenden Geräten, die das Surfen im Internet über Smart-TVs ermöglichen, wird das Internet zunehmend auf Bildschirmen aufgerufen und betrachtet, die herkömmliche Desktop-Displays in den Schatten stellen. Die meisten Websites sind nicht für diesen Maßstab optimiert. Wenn Sie jedoch „responsive Websites“ erstellen, sind die Tools, die Sie für die Skalierung Ihrer Inhalte benötigen, wahrscheinlich bereits vorhanden. In diesem Artikel werfen wir einen Blick auf die Herausforderungen und Techniken zur Optimierung Ihrer Website für Widescreens und Ultrawidescreens.
Die Herausforderungen bei Ultrawide Monitoren
Die Herausforderungen bei der Optimierung für großflächige Displays liegen in der Skalierung und Verwaltung von Inhalten. Aufgeschlüsselt in Kategorien sehen diese Herausforderungen wie folgt aus:
Die Choreografie von Inhalten bezieht sich darauf, wie Inhalte proportional zur Bildschirmgröße angepasst werden, um bei jeder Breite das bestmögliche Erlebnis zu bieten. Je größer der Bildschirm, desto unproportionaler erscheint der Inhalt. Dies ist aus mehreren Gründen ein Problem: der daraus resultierende unangenehme Raum ist ablenkend, der übermäßige Raum kann den Inhalt in den Schatten stellen, wodurch der Inhalt kleiner erscheint als er ist, und) die Lesbarkeit wird höchstwahrscheinlich unter der zu geringen Größe leiden.
Im Allgemeinen ist die Art und Weise, wie sich Inhalte an kleine Bildschirme anpassen, ziemlich einfach: Wir stapeln Inhalte innerhalb einer einzigen Spalte und passen die visuelle Reihenfolge an, wenn nötig. 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 es vermeiden, Ihren Inhalt an den überschüssigen Platz anzupassen, der auf großen Bildschirmen zur Verfügung steht, wird Ihr Inhalt im Vergleich zum negativen Raum, der ihn umgibt, höchstwahrscheinlich zwergenhaft wirken. Wenn Sie jedoch versuchen, den Raum mit Inhalt zu füllen, indem Sie mehr Spalten einführen, riskieren Sie, den Benutzer visuell zu überwältigen, indem Sie zu viel Inhalt in einem relativen Bereich des Bildschirms präsentieren.
Bilder stellen auf großen Bildschirmen eine Reihe von besonderen Herausforderungen dar. Da die meisten Widescreen Monitore auch eine höhere Auflösung haben, müssen wir zusätzliche Variationen jedes Bildes verwalten, um sicherzustellen, dass das richtige Bild angezeigt wird. Darüber hinaus müssen wir auch verwalten, wie sich die Bilder im Kontext des Layouts verhalten werden. Bilder, die nicht mit dem Bildschirm skaliert werden, können unangenehme Lücken zwischen ihnen und anderen Elementen hinterlassen. Im Gegensatz dazu können Bilder, die zu groß skaliert werden, von anderen Elementen ablenken und überwältigend wirken. Da es keine Einheitslösung für die Herausforderungen gibt, die Bilder mit sich bringen, müssen Sie sorgfältig abwägen, wie Sie sie basierend auf den einzigartigen Anforderungen Ihrer Inhalte verwalten wollen.
Techniken zur Optimierung
Nachdem wir nun die verschiedenen Herausforderungen identifiziert haben, die mit einem Widescreen Monitor einhergehen, lassen Sie uns einen Blick auf einige Ansätze zur Optimierung unserer Inhalte für diesen Maßstab werfen.
Die Methode, mit der Sie Ihre Inhalte für großflächige Displays optimieren, hängt von Ihrem Inhalt ab. Eine Möglichkeit ist die einfache Anpassung des Layouts, um Ihre Inhalte so darzustellen, dass der zusätzliche Bildschirmplatz ausgenutzt wird. Eine andere Methode ist, Ihre Inhalte hochzuskalieren, damit sie proportional in den Raum passen. Und natürlich können Sie auch eine Kombination aus beiden Methoden nutzen. In unserer Demo werden wir unsere Inhalte responsiv hochskalieren, um ein besseres Erlebnis für Benutzer auf großen Displays zu bieten.
Vorausschauend planen
Der erste Schritt bei der Optimierung für großflächige Bildschirme ist die Planung. Indem Sie im Voraus planen, minimieren Sie Überraschungen und stellen sicher, dass alles zusammenpasst, bevor Sie loslegen, denn dann ist es schwieriger, Änderungen vorzunehmen. Wenn Ihr Designprozess die Arbeit in einer Designanwendung beinhaltet, um zu visualisieren, wie sich der Inhalt verhalten soll, dann erstellen Sie eine Leinwandgröße, die einen extra großen Bildschirm repräsentiert, neben Ihren anderen Comps, die traditionellere Bildschirmgrößen darstellen. Wenn Sie es vorziehen, im Browser zu entwerfen, dann planen Sie, wie sich Ihr Inhalt auf großen Bildschirmen verhalten soll, indem Sie zunächst Ihre Ideen skizzieren.
Für unsere Demo habe ich mich dafür entschieden, mit der Skizzierung der allgemeinen Idee für das Layout und den Inhalt zu beginnen. Auf diese Weise bekam ich ein Gefühl dafür, wie ich die Seite in Abschnitte unterteilen sollte und wie die Seite als Ganzes strukturiert werden könnte, um diese Abschnitte unterzubringen. Als Nächstes erkundete ich die Designästhetik, indem ich ein High-Fidelity-Composite in Sketch erstellte, mit dem ich Designelemente wie Schriftarten, Farben und Proportionen identifizieren konnte. Der Schlüssel hier ist, locker zu bleiben und sich nicht um Pixelperfektion zu kümmern – die wichtigen Dinge wie Interaktion, Skalierung und sogar die Schriftgröße sollten im Browser entschieden werden.
Steuerung der Container
Wenn es um die Steuerung von Inhalten geht, gibt es nur wenige Werkzeuge im Werkzeugkasten des responsiven Webdesigns, die so nützlich sind wie der allgegenwärtige „Container“. Dieses Element hat einen Zweck, und zwar die Steuerung der maximalen Breite, auf die sich unser Inhalt ausdehnen kann. Dieser Ansatz funktioniert zwar, aber er skaliert nicht für große Bildschirme, da die maximale Breite zu sehr von einer bestimmten Breite abhängig ist. Selbst wenn der Wert für die maximale Breite auf etwas viel Größeres erhöht wurde, ist er nicht relativ zur Breite des Ansichtsfensters. Eine bessere Herangehensweise ist es, den linken und rechten Rand als relative Einheiten zu definieren und diese Werte schrittweise zu erhöhen, wenn die Bildschirmgröße größer wird. Dadurch wird der Inhalt im Verhältnis zur Bildschirmbreite eingegrenzt und fühlt sich besser an, wenn der Bildschirm besonders groß ist.
Verwalten von Bildern
Wie Sie Bilder auf extragroßen Bildschirmen verwalten, hängt ganz von Ihren Projektanforderungen ab, aber höchstwahrscheinlich müssen Sie höher aufgelöste Varianten jedes Bildes bereitstellen, um sicherzustellen, dass die Bilder nicht zu klein sind. Der Ansatz, den wir wählen, ist unterschiedlich, je nachdem, wie das Bild angewendet wird. Bei Hintergrundbildern ist das ganz einfach: Definieren Sie das Hintergrundbild auf dem entsprechenden Element, geben Sie dem Element Abmessungen und definieren Sie höher aufgelöste Quellen des Bildes innerhalb von Media Queries. Beachten Sie, dass wir die height-Eigenschaft auf 0 setzen, ein bottom padding vorsehen und die background-size-Eigenschaft auf cover setzen.
Für Inline-Bilder gibt es jetzt eine HTML-Spezifikation, die es erlaubt, die img- und source-Elemente so zu erweitern, dass sie eine Liste der verfügbaren Bildquellen und deren Größen bereitstellen. Dadurch können die Browser diese Informationen nutzen, um die beste Bildquelle auszuwählen. Das Bild unten zeigt, wie dies in unserer Demo implementiert ist, in der wir zusätzliche Bildquellen und deren Größen mit den Attributen srcset und sizes definieren. Dies ermöglicht es dem Browser, die Bildauflösung basierend auf der Bildschirmgröße und Pixeldichte umzuschalten und so das am besten geeignete Bild bereitzustellen.
Das bestmögliche Erlebnis auf jeder Bildschirmgröße zu bieten, ist zwingend erforderlich. Wenn es darum geht, unsere Inhalte für große Monitore zu optimieren, sollten wir nicht vor den üblichen Desktop-Auflösungen halt machen. Mit der richtigen Planung können wir die Tools nutzen, die uns bereits bei der Erstellung von responsiven Websites zur Verfügung stehen, um unsere Inhalte zu skalieren und für Widescreen und Ultrawide Monitoren anzupassen.
