Es ist schon einige Zeit her, seit die Retina-Displays auf iOS-Geräten zum ersten Mal veröffentlicht wurden, aber es gibt immer noch viele Websites, die nicht für Retina geeignet sind, selbst wenn Designer und Entwickler sich mit den Fakten eines vollständig ansprechbaren Mobilgeräts vertraut gemacht haben freundliche Welt.
Hier finden Sie die Informationen zu den Optionen, mit denen Ihre Arbeit auf den immer häufiger vorkommenden Retina-Displays am besten aussieht. Die gute Nachricht ist, dass es, so entmutigend es auch erscheinen mag, nicht so kompliziert ist.
$config[code] not foundVorbereitung Ihrer Website für Retina-Ready-Bilder
Verdoppeln Sie Ihren Spaß
Es gibt eine Reihe von Möglichkeiten, diese Katze sozusagen zu häuten. Im ersten Schritt müssen Sie Ihr CSS etwas verbessern und Versionen Ihrer Bilder mit doppelter Auflösung einfügen. Das CSS bestimmt basierend auf dem Gerät, auf dem Ihre Site angezeigt wird, welches Bild angezeigt werden soll.
Welche CSS-Updates Sie benötigen, hängt von Ihren Zielbrowsern ab. Die gute Nachricht ist jedoch, dass sie jetzt nicht besonders kompliziert ist und immer einfacher wird. Wir überlassen die eigentliche Codierung einem anderen Tag.
Beachten Sie Folgendes: Möglicherweise möchten Sie eine Namenskonvention für Ihre Netzhautbilder entwickeln, damit Sie die beiden Versionen eines Bildes problemlos verknüpfen können, falls sie später bearbeitet werden müssen.
SVG
Ein anderer Ansatz ist SVG oder Scalable Vector Graphics. Wie der Name schon sagt, sind diese auf Vektorgrafiken beschränkt und funktionieren nicht mit fotografischen Bildern. Bei SVG-Grafiken müssen jedoch nicht zwei Bilddateien für jede Grafik auf Ihrer Website erstellt werden. Auch hier gibt es Variationen von Browser zu Browser, sodass Sie abhängig von Ihren Anforderungen weitere Untersuchungen durchführen möchten.
Und wie oben erwähnt, wird SVG auf den meisten Websites wahrscheinlich nicht als einzige Lösung verwendet werden, es sei denn, die Website enthält keine Bilder vom Typ "Foto".
Rohe Gewalt
Natürlich können Sie auch einfach die Dateien mit niedriger Auflösung ausgeben und die Retina-Ready-Bilder bereitstellen. Wir empfehlen dies nur für Anwendungen mit einer sehr eng definierten Zielgruppe. Wenn Sie wissen, dass Bandbreite kein Problem ist, ist dies möglicherweise der richtige Weg, aber sicherlich keine bewährte Methode
Andere Codierungslösungen
Am anderen Ende des Aufwands- und Eleganzspektrums befinden sich Codierungsmethoden, die auf serverseitigen Änderungen (wie.htaccess-Dateieinträge) sowie auf der PHP- und Javascript-Codierung basieren.
Dies ist möglicherweise die beste Vorgehensweise, obwohl sich der Aufwand für kleinere Projekte möglicherweise nicht lohnt.
Im Allgemeinen hängt der von Ihnen gewählte Ansatz von Ihrer Zielgruppe, der Art Ihrer Grafik und dem technischen Fachwissen Ihres Entwicklungsteams ab. Es gibt für jede Situation eine gute Lösung. Die einzige schlechte Lösung besteht darin, Retina-Displays vollständig zu ignorieren.
NASDAQ-Foto über Shutterstock
