Retina Display Resolution Design: Tipps & Tricks für UI-Designer

Vandelay Design kann von Unternehmen, Produkten und Dienstleistungen, die auf unserer Website angeboten werden, eine Entschädigung erhalten. Weitere Informationen finden Sie auf unserer Disclosure-Seite.

Mit dem Aufkommen von hochauflösenden Smartphones und dem Retina iMac wird deutlich, dass web & mobile Designer Retina Displays in ihrem Designprozess berücksichtigen müssen. Mehr Geräte kommen aus dem Regal mit einer Retina-Display-Auflösung, die mehrere Pixel in den gleichen physischen Bildschirmraum gruppiert.

Dies bedeutet, dass Inhalte bei richtiger Gestaltung schärfer aussehen. Wie sollte ein UI-Designer also mit Retina-Bildschirmen umgehen? Welche aktuelle Technologie ist verfügbar und wie kann man am besten mit der größten Benutzerbasis umgehen?

Ich möchte die zuverlässigsten Methoden zum Umgang mit Retina / Hi-DPI-Bildschirmen und zum Erstellen von Schnittstellen behandeln, die einfach funktionieren. Wenn Sie dieser Anleitung folgen, werden Sie sicher mit anwendbaren Tipps und praktischen Lösungen für das Retina-Display-Rätsel davonkommen.

13" und 15 "Macbook Auflösungen

Umgang mit Retina-Geräten

Der erste Schritt besteht darin, Bildschirmanzeigen basierend auf Hi-DPI-Auflösungen zu überprüfen. Da einige Geräte @ 3x-Größen haben, sollten Sie eine Reihe von Bildschirmauflösungen überprüfen, bevor Sie Bilder anzeigen. Sie können mit @ 3x-Bildern immer sicher sein, aber sie sind auch viel größer und erfordern mehr Bandbreite zum Herunterladen.

Diese Prüfung kann mit srcset durchgeführt werden, aber es gibt auch viele verschiedene Methoden, die JavaScript verwenden. Schauen Sie sich dieses Tutorial für weitere Informationen.

Ein netter Trick für Retina-fähige Symbole ist die Verwendung einer kostenlosen Iconfont anstelle von Bitmap-Bildern. Font Awesome ist eine sehr beliebte Wahl, die völlig kostenlos und Open Source ist und eine Bibliothek mit Symbolen zur Auswahl bietet.

 startseite font awesome icons

Eine andere Möglichkeit besteht darin, SVG-Bilder anstelle von Bitmaps zu verwenden. Diese SVGs sind vollständig skalierbare Vektoren, die langsam die volle Browserunterstützung erhalten haben.

 caniuse svg überprüfen

Die einzige Schwierigkeit besteht darin, SVGs von Grund auf neu zu entwerfen und zu lernen, sie richtig zu exportieren, was komplizierter sein kann als nur PNGs oder JPEGs zu verwenden. Plus SVG ist nicht nützlich für detaillierte Bilder wie Fotos, da es wirklich ein Vektor-Dateityp ist.

Aber SVGs haben mehr Platz für benutzerdefinierte Animationen, die bei allen Auflösungen gestochen scharf angezeigt werden.

Ziel ist es, Dateitypen und Browserprüfungen von Fall zu Fall zu entscheiden. Einige Bilder sind besser als JPGs und einige Websites sind besser mit CSS vs JS Retina Checks. Ich persönlich bevorzuge CSS, aber ich empfehle, beide auszuprobieren, um zu sehen, was Sie bevorzugen.

CSS-Hintergrundbilder

Der einfachste Weg, benutzerdefinierte Hintergründe zu behandeln, ist mit Retina-Hintergrundbildern mit der Eigenschaft background size.

Dies ist oft der schnellste Weg, um Retina-Bilder zu überprüfen, da sie auf allen Geräten funktionieren können, auch auf Nicht-Retina-Geräten. Es tut nicht weh, ein überoptimiertes Bild in CSS zu haben, wenn Ihnen die verlängerten Ladezeiten nichts ausmachen.

Die alternative Methode wäre, verschiedene CSS-Dateien basierend auf JavaScript-Checks oder Backend-Server-Checks zu laden.

Aber vielleicht ist der beste Weg, CSS zu behandeln, mit einer CSS-Retina-Medienabfrage. Diese Abfragen überprüfen die Pixeldichte und laden verschiedene Hintergrundbilder für diese Geräte (auch Anpassen der Hintergrundgröße).

CSS ist im Allgemeinen der einfachste Weg, Bilder zu verarbeiten, kann aber nicht für In-Post-Bilder verwendet werden. Diese sind viel kniffliger und sollten entweder mit der höchstmöglichen Auflösung hochgeladen oder mit JavaScript aktualisiert werden.

Wenn Sie sich nicht so sehr um die Ladezeiten kümmern, wählen Sie einfach die größte Auflösung für alle Ihre Bilder. Wenn nicht, sollten Sie @ 2x- und @ 3x-Bilder manuell mit einer kostenlosen JavaScript-Bibliothek wie Retina hochladen.js.

JavaScript Checks

Wenn Sie die größtmögliche Kontrolle über Inhalte mit Retina-Auflösung haben möchten, benötigen Sie JavaScript. Die meisten Besucher führen JS-Code aus und dies ist der einfachste Weg, um Auflösungen mit integrierten JavaScript-Methoden zu erkennen.

Sie finden viele kostenlose Tutorials zum Erkennen von JavaScript-Retina-Displays, aber das ist nur die halbe Miete. Sobald Sie die Bildschirmauflösung kennen, müssen Sie die Bilder entsprechend aktualisieren.

Ich empfehle die Verwendung einer vorgefertigten Lösung, um Zeit und Kopfschmerzen während des Prozesses zu sparen.

Entwickler wollen das Rad nie neu erfinden. Wenn also jemand anderes dieses Problem bereits gelöst hat, warum sollten Sie dann von vorne anfangen?

Der einzige Grund, Ihre eigene Lösung zu rollen, ist, wenn Sie benutzerdefinierte Funktionen benötigen. In diesem Fall sehen Sie sich die folgenden Links an, um zu sehen, wie Sie eine benutzerdefinierte JS-Netzhautprüfung implementieren können.

Andernfalls scrollen Sie weiter und greifen Sie zu einer der kostenlosen JS-Bibliotheken, die ich im nächsten Abschnitt aufgelistet habe.

  • 5 Möglichkeiten zur Unterstützung von Retina-Displays mit hoher Dichte
  • Einfache 2x Retina-Bilder mit jQuery
  • Servieren Sie Retina-Grafiken auf Ihrer Website

Open Source Retina Tools

Es gibt Dutzende benutzerdefinierter Retina-Tools zum Erkennen und Verwalten von Retina-Bildern. Diese sind nicht immer am einfachsten zu implementieren, aber sie können Ihr Publikum auf lange Sicht viel glücklicher machen.

Also, was sollten Sie wählen, um loszulegen? Es gibt wirklich keine falsche Antwort.

Ich möchte einige der beliebtesten Tools bereitstellen und Ihnen die Möglichkeit geben, das auszuwählen, was für Ihre Website am besten geeignet ist.

Netzhaut.js

 retinajs open source javascript

Die Netzhaut.js library ist eine kostenlose Open-Source-JavaScript-Codebasis, die Retina-Auflösungen und Bildschirmgrößen automatisch erkennt. Das Skript überprüft auch, ob ein hochauflösendes Bild vorhanden ist, das den Designrichtlinien von Apple folgt, und wenn ja, wird die hochauflösende Version angezeigt.

Namenskonventionen folgen einem Suffix von @2x vor dem Dateityp. Also, wenn Sie my_image haben.jpg, das Sie auch haben möchten [email protected] im selben Ordner.

Dies ist eines der einfachsten Skripte, da es wirklich nur Plug-and-Play ist. Es erfordert aber auch einige Kenntnisse über Retina-Inhalte, damit es perfekt funktioniert. Wenn Sie gerade erst anfangen, ist dies wirklich ein großartiges Skript und Sie können mit der Standardfunktionalität nichts falsch machen.

jQuery Retina

 jquery js retina plugin

Eine weitere Option ist jQuery Retina, das von der jQuery-Bibliothek unterstützt wird. Dies funktioniert etwas anders, da es auf HTML5-Datenattributen ausgeführt wird.

Sie übergeben einfach einen Bild-URL-Wert an das data-retina-Attribut in jedem Bild-Tag, für das eine Retina-Bildalternative erforderlich ist. Es erfordert mehr harte Codierung, aber es ist auch am einfachsten, mit benutzerdefinierten Optionen ein Rollback durchzuführen. Die GitHub-Seite enthält weitere Informationen mit grundlegenden Installationsschritten.

WP Netzhaut 2x

 wp wordpress retina @2x plugin

Wenn Sie ein WordPress-Benutzer sind, ist WP Retina 2x möglicherweise eine großartige Alternative zum Hinzufügen eines JS-Plugins von GitHub. Das WP Retina Plugin arbeitet direkt mit WordPress zusammen, um nach Bildern in Netzhautgröße zu suchen und diese automatisch zu ersetzen.

Es ist eine weitere Plug-and-Play-Lösung, bei der Sie das Plugin einfach aktivieren und ausführen lassen. Super einfach zu bedienen und definitiv eine saubere Lösung für nicht-technische WP-Benutzer.

Dicht.js

 densejs Plugin jquery

Was ich am meisten mag über die Dichte.js-Bibliothek ist die Unterstützung für unterschiedliche Geräteverhältnisse. Nicht alle Retina-Displays sind einfach 2x so groß. Andere Verhältnisse können 1,5x oder 3x umfassen.

Dieses Plugin erkennt automatisch, welche Bildschirmdichte verwendet wird, und passt Ihre Bilder entsprechend an. Es gibt viele Optionen, sodass die Anpassung kein Problem darstellt. Schauen Sie sich den GitHub an, um loszulegen, und die Online-Dokumente für weitere Informationen.

Wenn Sie nach mehr Retina-Display-Ressourcen suchen, empfehle ich auch diese Plugins.

  • CSS-Medienabfragen für iPads & iPhones
  • Adaptive Bilder in HTML
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • Auswahl einer responsiven Bildlösung

Hoffentlich bietet dieses Material mehr als genug, um helfen Sie beim Umgang mit Bildern und Medien auf Retina-Displays. Da CSS für alle Auflösungen automatisch skaliert, müssen Sie sich wirklich keine Gedanken über Dinge wie Ränder oder Seitenbreiten machen.

On-Page-Medien wie Symbole und Fotos müssen jedoch für Retina-Geräte angepasst werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.