Apple treibt die Tech-Industrie voran, indem er die Pixeldichte auf iPhone- und iPad-Bildschirmen erhöht. Aus der Sicht eines Benutzers ist dies großartig, aber als Webdesigner oder -entwickler droht es buchstäblich, die Art und Weise, wie Sie Websites erstellen, zu ändern.
Sind Sie bereit für HD-Webdesign? Wissen Sie, wie Ihre Websites auf einer neuen Generation hochauflösender Bildschirme aussehen werden? Welche Schritte können Sie unternehmen, um sich vorzubereiten und welche Fähigkeiten werden Sie benötigen, um in den kommenden Jahren relevant zu bleiben? Lesen Sie weiter, um es herauszufinden.
Wenn Apple spricht, hören wir zu
Ich verwende Macs seit den letzten 9 Tagen treu, nicht so lange wie einige alte Timer, aber genug, um die Kool-Hilfe zu trinken und völlig süchtig nach Apple zu werden.
Ich erinnere mich daran, als ein Apple-Logo gesehen wurde, dass das Produkt so etwas wie eine Nische war, ein Ausreißer, den nur die hartnäckigen Individuen der Gesellschaft benutzten, um einen offensichtlichen Versuch zu unternehmen, sich gegen die Windows-liebende Kultur zu richten.
Wenn Sie ein Haus nach dem Zufallsprinzip auswählen, werden Sie wahrscheinlich mindestens einen iPod, ein iPhone und / oder ein iPad im Inneren finden.Durch eine beeindruckende Transformation, die auf der Entwicklung innovativer Produkte der nächsten Generation aufgebaut ist, ist das kleine undurchsichtige Unternehmen inzwischen das wertvollste Unternehmen der Welt. Es gibt möglicherweise keinen Mac auf jedem Desktop in Amerika, aber wenn Sie ein Haus nach dem Zufallsprinzip auswählen, werden Sie wahrscheinlich mindestens einen iPod, ein iPhone und / oder ein iPad im Inneren finden.
Ich wachse nicht eloquent, um Sie zu meinem Kult zu machen. Ich möchte nur feststellen, dass Apple ein treibender Faktor in der Tech-Branche ist. Niemand interessierte sich für die neuen Features, die der Newton brachte, aber als Apple ein neues iOS-Gerät auf den Markt bringt, bleibt die Welt stehen und lauscht geduldig, was die Assistenten von Infinite Loop uns sagen, dass die Zukunft aussehen wird.
Apple setzt auf High-Res
Bis vor kurzem hatte Apple nichts mit unserer Faszination für eine bessere Bildschirmauflösung zu tun. Größere und bessere HD-Fernseher stehen seit einem Jahrzehnt im Fokus von Verbrauchern und Elektronikunternehmen. Cleveres Marketing und beeindruckende Technologie sorgen für einen unstillbaren Durst nach hochauflösenden Bildschirmen, Kabelprogrammen und Filmen.
Diese Entwicklung hat sich jedoch größtenteils vom Computing entfernt. Sicher, es gibt riesige, großartige Kinodisplays, aber die Pixeldichte war nie so groß, dass ein großer Paradigmenwechsel erforderlich war. Bis vor kurzem.
Als das iPhone 4 Mitte 2010 abstürzte, kam es zu einer Überraschung: Die? Retina? Bildschirm, der uns mit einer erstaunlichen Geschwindigkeit von 326 Pixeln pro Zoll verdoppelte (zum Vergleich: ein 27-Zoll-iMac ist 109ppi). Dies war ein entscheidender Faktor beinahe unmöglich, aber Apple hat genau das getan, indem er auch die Auflösung des iPads der dritten Generation verdoppelte, was zu einem etwas niedrigeren, aber immer noch wunderschönen 264ppi führt.
Warum dies völlig anders wird, wie Sie Ihre Arbeit erledigen
Na und? Danke für die Geschichtsstunde, aber dies ist ein Design-Blog, richtig? Wen kümmert die Pixeldichte eines iPad? Als Webdesigner tun Sie es, ob Sie es bereits wissen oder nicht.
Das Problem ist hier und auch auf allen anderen Seiten, die Sie heute besuchen, offensichtlich. Holen Sie sich ein Bild aus dem Internet und öffnen Sie es in Photoshop. Rufen Sie nun den Dialog Bildgröße auf. Sehen Sie etwas Interessantes
Webdesigner hatten gegenüber Druckdesignern immer einen kleinen Vorteil: Wir können Grafiken mit niedriger Auflösung verwenden. Warum ist es ein Vorteil und kein Nachteil? Da PSDs mit hoher Auflösung Ihre Maschine verlangsamen können, kosten hochauflösende Fotos viel mehr Geld. Daher benötigen hochauflösende Bilder für das Laden über das Internet eine Ewigkeit. Die Liste geht weiter und weiter.
Das Problem ist jedoch klar, dass das Bild oben nur 72ppi beträgt, während das neue iPad 264ppi ist! (Das Argument wird dadurch etwas zu stark vereinfacht. Lesen Sie diesen Artikel, um weitere Informationen darüber zu erhalten, ob Sie tatsächlich Bilder mit 72ppi anzeigen oder nicht.)
Überlegen Sie, was das bedeutet. Apple hat Retina-Displays auf der gesamten iOS-Linie: iPod Touch, iPhone und iPad. Das bedeutet, dass Millionen Menschen surfen täglich im Internet auf hochauflösenden Bildschirmen, auf denen Ihre Bilder nicht richtig angezeigt werden. Machen Sie keinen Fehler, dieser Trend wird sich nur verschlimmern, wenn andere Gerätehersteller aufholen und Apple nach Wegen sucht, um die Pixeldichte an den nächsten offensichtlichen Ort zu bringen: den Laptop-Markt.
Was kannst du tun?
Das Problem der Pixeldichte ist interessant. Das Web stellt so viele verschiedene Technologien dar, die in Harmonie zusammenkommen, dass es chaotisch sein kann, wenn eine dieser Technologien voranschreitet und das Gleichgewicht stört.
Wir erleben, dass Bildschirme mit höherer Auflösung auftauchen, aber unser Inhalt ist nur für die alten Bildschirme optimiert. Denken Sie außerdem darüber nach, wie verrückte Webentwickler von Seitenladezeiten mit Bildern mit niedriger Auflösung sprechen. Stellen Sie sich jetzt vor, wie viel langsamer Sie auf einer Bildlastseite wie Pinterest wären, wenn sie plötzlich mit 326ppi-Bildern gefüllt wäre!
Reine HTML- und CSS-Webelemente
Die gute Nachricht ist, dass wir uns seit Jahren in gewisser Weise darauf vorbereiten und es nicht einmal gewusst haben. Der Anstieg von CSS3 und HTML5 hat die Vorstellung, die Anzahl der Bilder, die wir in unserem Markup verwenden, zu reduzieren, wirklich vorangetrieben.
Heutzutage werden die meisten Elemente der Benutzeroberfläche im Browser gerendert, was bedeutet, dass sie auf jedem Bildschirm, den Sie darauf werfen, gut skalierbar sind.
Zur Veranschaulichung, wie es aussieht, wenn ich eine bildbasierte Download-Schaltfläche auf meinem iPhone 4 vergrößere.
Wenn ich nun die gleiche Schaltfläche mit den gleichen Pixelabmessungen anschaue, aber mit CSS gerendert habe, kann ich so weit zoomen, wie ich möchte, ohne dabei die Bildqualität zu beeinträchtigen.
Es ist eine schöne Sache, nicht wahr? Die Moral hier ist, dass die "bildlos"? Der Trend hat sich auf lange Sicht ausgezahlt und uns viel weniger Sorgen bereitet, als wenn Retina-Bildschirme zurückgeschlagen wären, wenn wir Bilder für Farbverläufe, Schatten, abgerundete Ecken und so ziemlich jedes andere fortgeschrittene Styling verwendeten.
Beachten Sie, dass Objekte, die mit HTML5-Canvas und JavaScript gerendert werden, eine ähnliche Skalierbarkeit erreichen können.
SVG
SVG oder Scalable Vector Graphics sind ein weiterer wichtiger Schritt auf dem Weg zur Unabhängigkeit der Auflösung. Diese Technologie gibt es schon seit Ewigkeiten, hat jedoch erst kürzlich die Browser-Unterstützung mit IE9 erlebt, die endlich auf den Zug stieg.
Wenn ich an SVG denke, denke ich an Adobe Illustrator. Diese App wird hauptsächlich zum Erstellen vektorbasierter Grafiken mit unbegrenzter Skalierbarkeit verwendet. Im Gegenzug bringt SVG dieselbe Funktionalität in Webgrafiken ein.
Fast alles, was Sie in Illustrator erstellen können, und andere Vektorbearbeitungs-Apps können problemlos als SVG-Datei exportiert und als skalierbares Objekt im Web implementiert werden.
Der Vorteil gegenüber CSS scheint zunächst unscharf zu sein, wird jedoch deutlich, wenn Sie mit komplexen Bildern arbeiten. Es ist einfach, einfache Schaltflächen mit CSS zu erstellen, aber wenn es um das Erstellen von Starbucks-Logos geht, werden die Dinge sehr unübersichtlich und kompliziert.
Als Alternative zu stundenlangen CSS-Fummeln und vielleicht Hunderten von Codezeilen für ein einzelnes Objekt (vorausgesetzt, es ist sogar mit CSS möglich), können Sie einfach eine Vektorversion des Starbucks-Logos als SVG-Format exportieren und in Ihr Web einbetten Seite in nur ein oder zwei Minuten! Klicken Sie hier, um ein Live-Beispiel dafür zu sehen. Stellen Sie sicher, dass Sie mit Command + zoomen und beobachten, wie das Bild perfekt skaliert wird.
Um mehr darüber zu erfahren, wie Sie SVG in Ihre Site implementieren können, lesen Sie diese großartigen Ressourcen:
- Unabhängigkeitserklärung mit SVG
- Verwenden von SVG für flexible, skalierbare und unterhaltsame Hintergründe, Teil I
- Mit SVG Design spielen
Aber was ist mit Fotos?
Das ist alles gut und gut, aber da wir mit UI schon so lange mit dem imaginären Webdesign gearbeitet haben, ist es nicht wirklich ein kurviger Ball, mit SVG ein wenig weiterzukommen. Das eigentliche Problem liegt in Fotos im Web.
Fotos sind Rasterbilder und als solche zerstören sie einfach den Traum eines wirklich auflösungsunabhängigen Webdesigns. Egal was wir aus unserer Tasche mit Webdesign-Tricks ziehen, wir können diese Einschränkung nicht umgehen.
Im Moment bedeutet dies, dass verschiedene Bilder auf verschiedenen Geräten bereitgestellt werden. Das ist ärgerlich, aber Sie möchten nicht, dass Nicht-Retina-Bildschirme in diese riesigen Bilder geladen werden, und Sie möchten keine lüsternden Bilder auf den Retina-Bildschirmen anzeigen, daher ist dies Ihre einzige Lösung.
Dies kann durch Medienabfragen und die Funktion Geräte-Pixel-Verhältnis erreicht werden. Als Beispiel zeigt Hal Gatewood, wie wir das iPad der dritten Generation anvisieren können:
Was ist mit HTML Embedded Images?
Die obige Methode ist gut und großartig, funktioniert jedoch nur mit CSS-Hintergrundbildern. Was ist, wenn Sie ein Bild mit HTML einbetten möchten? Darüber hinaus hat dies auch drastische Auswirkungen auf Videos. Wie können Sie also benutzerdefinierte Videos auf hochauflösenden Bildschirmen bereitstellen?
Leider gibt es keine echte Antwort mit reinem HTML. Vielleicht wird das Bedürfnis so groß, dass wir so etwas in der Zukunft sehen werden, aber jetzt haben Sie kein Glück.
Die einzige Lösung besteht darin, etwas mächtigeres wie JavaScript zu verwenden. Bdoran.de hat ein schnelles Beispiel, wie Sie das iPhone 4 mit JavaScript oder PHP erkennen können, das Sie ausprobieren sollten.
Dies stellt jedoch offensichtlich große Probleme für Webdesigner dar, die sich an HTML und CSS halten und mit JavaScript und anderen fortgeschrittenen Webtechnologien nicht vertraut sind. Plötzlich kann diese Gruppe nicht einmal einfache Inhalte so präsentieren, dass sie für die meisten Geräte optimiert sind.
Fazit
Es spielt keine Rolle, ob Sie Apple lieben oder absolut alles hassen, wofür sie stehen. Die Realität ist, dass der Aufstieg des Retina-Displays als Webdesigner einen Trend in Gang setzen wird, der die Art und Weise, wie Sie Websites erstellen, grundlegend verändert .
Zum jetzigen Zeitpunkt haben wir einige Vorgehensweisen zu erforschen: HTML5-Canvas, JavaScript, CSS3, SVG und Medienanfragen bilden zusammen Ihr Waffenarsenal, mit dem Sie das Problem der Anzeige Ihrer Inhalte bei mehr als 264ppi angreifen können.
In naher Zukunft werden hoffentlich robustere Optionen angezeigt, mit denen verschiedene HTML-eingebettete Bilder und Videos auf den richtigen Geräten bereitgestellt werden können.
Hinterlassen Sie einen Kommentar und teilen Sie uns Ihre Meinung dazu mit. Sind Sie von den neuen Möglichkeiten begeistert oder vom unsicheren Territorium eingeschüchtert? Werden Sie in Kürze mit der Optimierung Ihrer Arbeit für Retina-Bildschirme beginnen? Hast du das schon gemacht?