“Die Welt ändert sich sehr schnell. Es werden nicht mehr die Großen die Kleinen schlagen, sondern die Schnellen die Langsamen.”
Inhaltsverzeichnis:
Heutzutage ist die Äußerung von Rupert Murdoch relevant wie nie – denn gerade noch 4K in aller Munde, kommt Ende Oktober der erste 8K-Fernseher von Sharp (Model LV-85001) auf den Markt. Das 85 Zoll messende Display des weltersten 8K-Fernsehers bietet eine Auflösung von 7.680 mal 4.320 Pixeln, was insgesamt 33 Millionen Pixeln entspricht.
Kann man kaum glauben, oder? Denn vor gerade mal 3 Jahren wurden die ersten 4K Displays der Öffentlichkeit präsentiert, was zu viel Resonanz im Netz führte. Das Internet „explodierte“ mit zahlreichen Diskussionen zu Themen wie: “Lohnt es sich einen Haufen Geld zu investieren, wenn noch kein passendes Programm-Angebot vorhanden ist”.
Heute – 3 Jahre später – ist der Preis für 4K-Displays stark gesunken, so dass sie für den durchschnittlichen Benutzer erschwinglich sind. Von 430€ – 25.000€ ist für wirklich jeden etwas dabei. Doch das Angebot an 4K Material ist immer noch überschaubar, als Beispiel bietet sich hier ein tolles Youtube Video in 4K Qualität (bitte in 2160p genießen – sofern deine Leitung mitmacht 😉 ).
Was bedeuten nun aber diese Innovationen für die Webwelt heute? Welche neuen Anforderungen kommen auf uns zu? Worauf sollte man sich schon jetzt vorbereiten, um morgen noch Up-to-date zu sein? Die Vorstellung dass ein Kunde auf der winzigen, pixeligen Seite eines Unternehmens surft, ist ein Albtraum – für den Nutzer und das Unternehmen selbst.
Ohne Zweifel haben wir aktuell eine Übergangsphase für Webdesigner und Entwickler. Wir, die kreativen Köpfe sollten also anfangen, zukunftsfähige Webseiten geräteunabhängig zu entwickeln, damit am Ende ein insgesamt besseres Erlebnis für alle User gesichert wird.
Aktuelle Studien zeigen z.B., dass die Möglichkeiten von Smart-TV`s immer häufiger genutzt werden und somit auch der interne Browser zum surfen. Da auch hier die Entwicklung rasant zunimmt, die eingebauten Chips immer leistungsfähiger werden und die Bedienung der Browser dank neuer Steuerungsmöglichkeiten (Stichwort Sprachsteuerung, Gestensteuerung) immer leichter wird, sollte zukunftsfähiges Webdesign, daher solche Browser mit enorm hohen Auflösungen berücksichtigen.
Responsive vs. Adaptive Design
Um nun der Pixelexplosion Herr zu werden, bedarf es neuer Webtechnologien – ein Stichwort ist hier das sogenannte Responsive Webdesign (z. Dt. “Reaktionsfähiges” oder “Reaktives” Webdesign). Gemeint ist damit die selbständige Größen- bzw. Layoutanpassung der Website, an die umgebende Displaygröße. Den Begriff gibt es schon seit einigen Jahren – man sieht heute dennoch viele Unternehmen, die ihre Website noch nicht auf „Responsive“ umgestellt haben.
Ein Adaptive-Layout (z. Dt. “Anpassungsfähig”) ist hingegen ein für verschiedene Displaygrößen optimiertes Layout. In der Regel werden hier Media Queries verwendet, um die Seite für Smartphone, Tablet und Desktop zu optimieren. Meist entsteht bei der Webentwicklung eine Kombination aus beiden Techniken, um eine Website für möglichst viele Geräte optimal vorzubereiten.
Was ist SVG
SVG ist ein Bildformat für Vektorgrafiken – die Vektoren werden aus einer festen Form anstelle von Pixeln zusammengesetzt, somit lassen sie sich hervorragend manipulieren und bleiben dennoch scharf. Das erlaubt ihnen in der Größe beliebig zu skalieren, ohne ihre Form und Bildqualität zu verlieren. Solange auf SVG`s keine Filter angewendet werden, sind sie optimal für zukünftige Auflösungen geeignet.
CSS3 wird immer wichtiger
Lange Zeit hatten Webentwickler mit CSS wenig Möglichkeiten, Html-Elemente im Aussehen anzupassen. Mit CSS3 hat sich dies geändert, mittlerweile lassen sich Filter anwenden, Elemente beliebig drehen/verzerren und sogar mit CSS animieren – das ganze natürlich hardwarebeschleunigt (GPU). Und mit CSS4 steht bereits die Weiterentwicklung der Beschreibungssprache in den Startlöchern.
Kristallklare Bilder
Potenzielle Kunden mit einem verpixelten Bild abschrecken? – Nein, danke! Bilder sollten daher hoch aufgelöst sein, damit Kunden die Website auch auf zukünftigen Displays optimal genießen können. Natürlich hat die gewaltige Pixelanzahl auch einen Nachteil – die Seitengröße nimmt zu und das führt zwangsläufig zu längeren Ladezeiten. Da Pagespeed für Suchmaschinen ein Rankingsignal ist, sollte man also auch immer die Seitengröße im Auge behalten. Laut HTTP Archive Report ist eine Webseite im Durchschnitt etwa 2 MB groß, die Erhöhung der Seitengröße auf 8 MB (2*4K) wäre hier keine gute Lösung. Das wiederum bedeutet für Webentwickler eine neue Herausforderung – qualitativ hochwertige Bilder in möglichst kleiner Dateigröße vorzubereiten, bedarf geschickter Mittel und Wege. Doch wie geht man hier vor?
Einige haben sich diesem Thema schon angenommen und diverse Online-Tools für die möglichst, verlustfreie Kompression von Bildern entwickelt: JPEGmini, tinypng, ImageOptimizer, Optimus, Compressor. Eine weitere Möglichkeit ist das anlegen verschiedener Größenversionen eines Bildes. Mithilfe von Media Queries wird dann nur die Version geladen, welche für die aktuelle Auflösung von Bedeutung ist.
Fazit
Früher oder später werden enorm hochaufgelöste Displays zum Mainstream. Viele Webseiten und Anwendungen sollten bis dahin überarbeitet und perfekt abgestimmt werden. Die aktuelle Übergangsphase 2K/4K/8K bedeutet für Designer und Entwickler viele Möglichkeiten, aber auch Anforderungen die bewältigt werden müssen. Und zurück zu Rupert Murdoch´s Zitat – sei lieber „der Schnelle“ und mach den ersten Schritt in Richtung 4K schon heute, denn dann schlägst du die Masse von “Langsamen”, die morgen vom technologischen Fortschritt überrannt werden.
Da das Thema sehr umfassend ist, empfehlen wir noch folgende Seiten:
Designing The UHD 4K Web Of Tomorrow, Please Start Today
5 Things I Learned Designing For High-Resolution Retina DisplaysPrepare yourself for a Future of Retina and UHD (4k) Displays
Retina Ready Images and Responsive Web Design
zurück