Responsive Design Day IPC Spring 2013

Hi-DPI: Pixel-perfect
Kommentare

Das Retina-Display von Apple: Es ist ein technischer Segen und ein kleiner Fluch zugleich. Denn Hochauflösung stellt Webdesigner und Entwickler vor ganz neue Herausforderungen. Grafiken müssen nicht nur responsive sein, um eine Anpassung der Website auf verschiedene Displaygrößen zu ermöglichen, auch die Auflösung unterscheidet sich je nach Ausgabegerät. Jonas Hellwig, Designer, Frontend-Entwickler, Fachbuchautor und Trainer, zeigte auf dem Responsive Design Day der IPC 2013 / webinale, welche Möglichkeiten Pixel, Vektoren, Schriften und CSS3 bieten, um Grafiken zu erstellen, die Retina-ready sind.

High-Definition? Da denkt man dieser Tage unweigerlich an Retina – das Apple-Display, bei dem man mit dem bloßen Auge keine Pixel mehr erkennen kann. Zwar gibt es noch höher auflösende Screens, aber Retina ist in Sachen Display-Technik gerade das Buzz-Wort schlechthin. Falls Sie sich trotzdem dafür interessieren, was andere Geräte so bieten, empfiehlt Jonas Hellwig die Seite Screensiz.es – dort gibt’s eine  Auflistung von Devices sowie deren Auflösungen.

Warum sollte man überhaupt das Interface Display-gerecht optimieren? Im Grunde, so Hellwig, weil die User sich schnell an hohe Qualität gewöhnen – im Blu-ray-Zeitalter schaut schließlich auch keiner mehr VHS-Kasette. Außerdem ist abzusehen, dass Hi-DPI-Displays in nicht allzu ferner Zukunft der Standard sein werden. Derzeit sieht man bei Webseiten und Applikationen noch häufig eine Kombination aus bereits optimierten und nicht-optimierten Elemente. Aber selbst ein ungeschultes Auge, bemerkt schnell den Unterschied.

Das Retina-Display hat eine Pixeldichte von 200 Prozent. Das heißt, bei 200-prozentiger-Ansicht hat man nach wie vor ein scharfes Bild. Die Pixeldichte ermittelt man übrigens aus der Formel Breite geteilt durch Device-Breite multipliziert mit 100. Die sich daraus ergebenden Pixeldichten werden, wie folgt, klassifiziert:

  • 100% = MDPI
  • 150% = HDPI
  • 200% = Retina
  • 225% = XHDPI

Was können wir also tun, um Retina-ready zu werden? Zum Beispiel CSS3 nutzen, denn damit werden Grafiken gerendert, sind also immer scharf und gleichzeitig flexibel. Oft wird CSS3 bei Buttons oder Icons genutzt. Darüber hinaus gibt es verschiedene Wege, Pixelgrafiken zu optimieren. Pixelgrafiken können in hoher Auflösung erstellt werden. Es gilt aber, sich zu entscheiden, ob man eine optimierte Grafik für alle Geräte oder verschieden optimierte Geräte für unterschiedliche Auflösungen machen möchte. Beides hat seine Vor- und Nachteile. Downsampling erhöht z.B. zwar die Pixeldichte, es werden ggf. aber mehr Daten nachgeladen als nötig, wenn die gebotene Pixeldichte nicht gebraucht wird. Notiz am Rande: Hi-DPI-Grafiken haben jedenfalls nicht mehr KB als nicht-hochauflösende. Eine weitere Möglichkeit sind SVG: Sie sind stufenlos skalierbar, immer scharf und als Code oder Grafik verwendbar. Die einzige Einschränkung: Sie sind für komplexe Illustrationen oder Fotos nich geeignet. Webfont-Icons, so Hellwig, seien momentan auch stark im Kommen. Er warnte aber: „Webfonts wirken auf Retina schlanker, also lieber etwas wählen, das was schon etwas zu dick wirkt.“

Insgesamt solle man es auch nicht völlig übertreiben: „Viele Websites sind heutzutage überoptimiert, sie haben keinen individuellen Charakter mehr.“ Also Pixel-Perfektion ja, aber bitte den individuellen Ton nicht vergessen. Auf http://best-webdesign-tools.com/ hat Jonas Hellwig übrigens eine Übersicht an Tools zusammengestellt, die sich speziell für Retina-Optimierung eignen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -