Websites für Retina Displays

Und wieder ist es neue Hardware, die eine neue Herausforderung für meine Arbeit darstellt… kein File Format (z.B. SVG), keine neue Software (ich liebe Layer Cake), Browser oder Online Service: Das neue iPad und die Macbooks mit Retina Display sind im Begriff eine ähnliche Triebkraft zu entwickeln wie das iPhone 3 vor nicht allzu langer Zeit.

Im ersten Moment ist man hingerissen von der Schärfe und Qualität der Textdarstellung – dann stellt man vielleicht fest, dass die bisher verwendeten Schriften auf den Geräten klobig und alles andere als elegant aussehen. Mag vielleicht den Flyeralam-Designer wenig kümmern… ich schliesse mich jedoch der Beurteilung von Oliver Reichenstein an und verstehe die Idee der Responsive Typography.

Text ist kein Problem – bis auf das Texten selbst

Nun ist die Textdarstellung auf den neuen Geräten für Website ja noch kein Problem – im Gegenteil: Alle Elemente, die man auf der Basis von Text darstellt sind in jedem Fall auch in Retina Auflösung brilliant und scharf.

Weg von Photoshop/PNG zu SVG oder anders gestalten?

Aber Websites bestehen auch aus grafischen Assets, Bildern und UI Elementen, die mit Hilfe von Photoshop „pixelperfect“ produziert werden. Für diese bietet HTML und CSS (bis heute ?) nur ein begrenztes Mass an automatisches Qualität-Update an.

Aus dem Kopf zusammengefasst sind das:

• borders und border-radius
• gradients
• text- und box-shadow
• opacity

Bereits bei multiple backgrounds hört der Spass auf und ich sehe eine ziemliche Herausforderung bei der Asset Produktion und Zusammenstellung von Sprites. Alle Formen und Illustrationen müssen als Vektoren (Photoshop: Formebenen) angelegt sein – denn selbst Vektor-Smart-Objects erweisen sich beim Auflösung anpassen als weniger smart, wie der Name vermuten lässt.

Doch – kann das die Zukunft sein? Zumal ich mir bewusst bin, dass die Welt auch ähnliche Geräte mit Android oder Windows bekommen wird. Da wäre es total kurzsichtig genau die beiden „iResolutions“ zu produzieren.

Ein Blick auf die Apple Website zeigt eine Möglichkeit auf, die zumindest für grafische Elemente funktionieren könnte. Bei genauerer Untersuchung der Hauptnavigation findet man zwei Sprite Dateien: Ein PNG in 72dpi und eine SVG Datei in gleicher Grösse… und wenn man mal die Seite zoomt (ich nehme nicht an, das Ihr bereits vor einem Retina Macbook sitzt), so bleibt der Text und das Apple Logo egal in welcher Zoomstufe sauber und scharf.

Eine Alternative wäre natürlich die Verwendung Text in Kombination mit eigenen Fonts – wobei man leider auf gestalterische Freiheiten verzichten muss. Der Glanz auf dem Apple Logo geht mit Text Effekten einfach nicht. Demnach fällt Text aus, sobald gestalterische Freiheit oder Flexibilität nötig ist.

Ich sehe die Notwendigkeit der Entwicklung einer leistungsfähigen und robusten Produktionskette für die Herausforderung der neuen Hardware. Responsive Design Beispiele beschäftigen sich mit bis heute nur mit der Skalierung „nach unten“. Vielleicht spielen Illustrator oder Fireworks wieder mit – oder es gibt intelligente Produktionsmaschinen wie Opacity.

Und wie bekommt man die Qualität bei Fotos und Bildern in den Griff? Keine Ahnung – „Smart Picture Objects“ auf dem Server?
<spo href=”my-perfect-picture.jpg”> :-)

Vielleicht bin ich demnächst schlauer…

Fazit

Die neue Hardware fordert eine neue Beurteilung des Rendering im Browser, Text, Grafik und Photos sehen nur – wie von Jony Ive versprochen – brilliant aus, wenn wir die richtige Qualität auch ausliefern.

Zu einem grossen Teil müssen wir bei der Gestaltung mitdenken. Die Produktionskette der letzten Jahr(zehnte) muss sich aber in jedem Fall ändern. Wie genau muss sich noch herausstellen.

Any ideas?