4 Tipps zum Entwerfen einer 4K-fähigen Website

Sie haben vielleicht geblinzelt und es verpasst, aber in den letzten Jahren hat sich die Auflösung etwas revolutioniert. Früher als experimentelle und Spitzentechnologie angesehen, sind 4K-Bildschirme heute alltäglich: in Fernsehbildschirmen, Computermonitoren und sogar Smartphones.

Da 4K viermal so viele Pixel pro Zoll bietet, müssen Webdesigner sicherstellen, dass ihre Websites auf den neuesten Bildschirmen so gut wie möglich aussehen. Natürlich, wenn Sie bereits den Grundsätzen von folgen sich anpassendes Webdesign Auf diese Weise können Sie sicherstellen, dass Ihre Website überall dort gut aussieht, wo sie angezeigt wird. Darüber hinaus gibt es vier Bereiche, auf die Sie in der 4K-Ära besonders achten müssen ...

01. Verwenden Sie skalierbare Grafiken

Symbole, Logos und andere Grafiken sollten als skalierbare und nicht als Rasterbilder erstellt werden



Symbole, Logos und andere Grafiken sollten als skalierbare und nicht als Rasterbilder erstellt werden

Damit Ihre Website auf 4K-Bildschirmen gut aussieht, müssen Sie nach Möglichkeit skalierbare Bilder anstelle von Rasterbildern verwenden.

Bei Rasterformaten (einschließlich JPEGs, GIFs und PNGs) enthält jedes Bild eine feste Anzahl von Pixeln. Wenn sie größer werden, werden sie nur pixeliger und verschwommener. Skalierbare Formate, bekannt als SVG (Scalable Vector Graphics), basieren dagegen auf geometrischen Formen. Dies bedeutet, dass sie, egal wie groß sie werden, sauber und klar bleiben.

Natürlich müssen Sie weiterhin Rasterformate für Fotos verwenden. Dies bedeutet, dass Sie Medienabfragen verwenden müssen, um hochauflösende Versionen Ihrer Fotos auf 4K- und 5K-Retina-Bildschirmen und viel kleinere Versionen mit niedrigerer Auflösung auf Mobilgeräten bereitzustellen, um die Leistung Ihrer Website bei 3G- und 4G-Verbindungen nicht zu beeinträchtigen. (Wenn Sie mit vielen Bildern arbeiten, sollten Sie dies beachten Photoshop CC Mit dieser Option können Sie ein einzelnes Bild in mehreren Größen gleichzeitig exportieren.)

Logos, Zeichnungen, Benutzeroberflächen-Tools, Schaltflächen usw. sollten jedoch immer als SVGs erstellt werden. Dies kann in Software wie Adobe Illustrator, CorelDraw und Affinity Designer erfolgen. Um mehr über skalierbare Grafiken zu erfahren, lesen Sie unsere 10 goldene Regeln für reaktionsschnelle SVGs .

02. Betrachten Sie größere Displays

Die Website der New York Times, wie sie von Jon Yabkonski auf einem großen Monitor aufgenommen wurde

Die Website der New York Times, wie sie von Jon Yabkonski auf einem großen Monitor aufgenommen wurde

Denken Sie beim Überlegen, wie Ihre Website in 4K aussehen wird, daran, dass höhere Auflösungen immer größere Bildschirme immer beliebter machen.

Obwohl wir uns gerade erst daran gewöhnt haben, dass unsere Websites auf 1920 x 1080 Monitoren angezeigt werden, müssen wir uns jetzt überlegen, wie sie auf Displays mit einer Breite von 2.560 Pixel aussehen. Es kann schwierig sein, viele Websites auf diesen Bildschirmen zu lesen, auf denen Text und Inhalt möglicherweise eingeschränkt und verkleinert aussehen und es zu viele Leerzeichen gibt.

Dies ausgezeichneter Artikel von Jon Yabkonski on CSS Tricks adressiert die technischen Herausforderungen, die diese breiteren Displays darstellen, und schlägt einige Lösungen vor.

03. Verwenden Sie 4K-Video

Bestandsbibliotheken wie iStock von Getty Images können eine breite Palette von 4K-Filmmaterial bereitstellen

Bestandsbibliotheken wie iStock von Getty Images können eine breite Palette von 4K-Filmmaterial bereitstellen

Da unsere Augen auf Bewegungen auf eine Weise reagieren, mit der Standbilder nicht mithalten können, ist Video ein beliebtes Werkzeug, um die Aufmerksamkeit der Website-Besucher auf sich zu ziehen. Unabhängig davon, ob Sie Ihrer Website einen Video-Header, einen Video-Hintergrund oder strategische Videoclips hinzufügen, müssen Sie diese jetzt in 4K bereitstellen, um zu vermeiden, dass Sie auf den neuesten Geräten klobig und altmodisch aussehen.

Heutzutage gibt es viele günstige und einfache Möglichkeiten, 4K-Material aufzunehmen, mit vielen der neuesten Standbilder Kameras , POV Sportkameras und Smartphones bietet 4K-Aufnahmefunktionen. Wenn Sie keine Zeit haben oder etwas benötigen, das Sie nicht selbst aufnehmen konnten, z. B. Drohnenmaterial, können Sie in den meisten Bestandsbibliotheken jetzt eine Vielzahl von 4K-Videoinhalten herunterladen.

Weitere Informationen zur Verwendung von 4K-Videos finden Sie unter Was die neue Welle von 4K-Videos für Designer bedeutet .

04. Kaufen Sie einen 4K-Monitor

Durch den Kauf eines Monitors wie des Acer S277HK müssen Sie nur noch raten, ob Ihre Website in 4K funktioniert

Durch den Kauf eines Monitors wie des Acer S277HK müssen Sie nur noch raten, ob Ihre Website in 4K funktioniert

Letztendlich ist der beste Weg, um sicherzustellen, dass Ihre Websites auf einem 4K-Monitor gut aussehen, - um das Offensichtliche zu sagen - den Kauf eines 4K-Monitors. Die gute Nachricht ist, dass es möglich ist, für nur 250 GBP einzusteigen, obwohl Sie wie bei allem das bekommen, wofür Sie bezahlen.

Auf unserer Schwesterseite TechRadar finden Sie eine aktuelle Zusammenfassung der neuesten Monitore Hier Wenn Ihre Arbeit 3D, Bewegungsgrafiken und / oder Videobearbeitung umfasst, sollten Sie dies überprüfen diese Zusammenfassung auch.

Weiterlesen: