Web Design in Hi-DPI

Jonas Hellwig | kulturbanause®

5. Juni 2013, Webinale Berlin

Dozent: Jonas Hellwig

Webdesigner

Autor / Video-Trainer

Dozent

Blogger @ blog.kulturbanause.de

Was erwartet euch in dieser Session?

Technische Hintergründe

Lösungsansätze mit HTML, CSS & Co.

Tipps & Tools

Das „Retina“-Display

Hochauflösendes Display, von Apple entwickelt

Eingesetzt in iPhone 4+, iPad 3+, neuen MBP etc.

Der Mensch kann keine Pixel mehr erkennen

Abhängig vom Betrachtungsabstand

Texte und Fotos wirken extrem scharf

„Retina“ ist der Markenname für das Apple-Display

Status Quo

Apple war Vorreiter

Heute: Diverse hochauflösende Displays

Einige sind hochauflösender als das Retina-Display

z. B. Samsung Galaxy SIV, Nexus 10

screensiz.es

Responsive Design

Hi-DPI-Displays in Smartphones & Tablets

Mobile Geräte stark verbreitet

Zukünftige Verbreitung von Hi-DPI-Monitoren

Hi-DPI-Displays sind die Zukunft

RWD ist mehr als ein flexibles Layout

Warum ist Optimierung wichtig?

Benutzer gewöhnen sich schnell an das Display

Nicht optimierte Grafiken fallen negativ auf (Beispiel)

Die Entwicklung wird sich nicht mehr umkehren

Pixeldichte

Hochauflösend ≠ hochauflösend

Auflösung abhängig von der Pixeldichte (PX Density)

Mehr Pixel/Fläche = höhere Pixeldichte

Apple: PPI (Pixel per Inch)

Android: DPI (Dots per Inch)

Device Width & Width

Device Width = Breite des Displays in Pixeln

Width = Anzahl der dargestellten Pixel auf dem Display

Width / Device Width * 100 = PX Density in %

screensiz.es

Klassifizierung

MDPI = 100%

HDPI = 150%

Retina = 200%

XHDPI = 225%

Das „Retina“-Problem

Warum sehen Pixelgrafiken auf hochauflösenden-Displays schlechter aus als auf normalen Displays?

Geräte rechnen Grafiken intern um

Vorteile der „Retina“-Optimierung

Bilder sind schärfer

Hochwertige Zoomstufen

Mehr Details

Ästhetik steigt

Website fällt nicht negativ auf

Was können wir tun?

CSS3 einsetzen

Pixelgrafiken optimieren

Vektorgrafiken verwenden

Webfonts verwenden

CSS3

CSS3 einsetzen wo es Sinn macht

CSS3-Grafiken werden berechnet und sind immer scharf

CSS3-Grafiken sind flexibel (RWD)

z.B.: Buttons

z.B.: Icons

Bootstrap nutzt CSS-Icon für mobile Navi

CSS-Export aus PS, Ai etc.

Pixelgrafiken optimieren

Pixelgrafiken können in hoher Auflösung erstellt werden

Entweder: Eine optimierte Grafik für alle Geräte

Oder: Verschiedene optimierte Grafiken je nach Auflösung

@2x als Suffix für hochauflösende Grafiken

Wichtige Unterscheidung: HTML oder CSS

Eine Grafik für alle Geräte

Eine hochauflösende Grafik wird erstellt

Die Grafik wird per HTML/CSS skaliert

„Downsampling“ erhöht die Pixeldichte

Beispiel HTML

Beispiel CSS

Nachteile von Downsampling

Grafiken müssen vorhanden sein

Es werden evtl. mehr Daten geladen

Kompatibilitätsprobleme

Grafiken evtl. unscharf

Grafiken austauschen

Optimierte Grafiken nur auf hochauflösenden Displays

Mehrere Dateien notwendig

Auflösung muss abgefragt werden

Beispiel: CSS + Media Queries

Beispiel: HTML + Script „Retina Images“

Beispiel: HTML + Script „retina.js“

Gut zu wissen!

Hi-DPI-Grafiken haben nicht zwangsläufig mehr KB

JPG-Artefakte durch downsampling
schwerer erkennbar (Beispiel)

Experiment: blog.netvlies.nl

SVG (Scalable Vector Graphic)

Stufenlos skalierbar

Immer scharf

Kann als Code oder als Grafik verwendet werden (Illustrator)

Ungeeignet für komplexe Illustrationen oder Fotos

SVG Pattern

Webfont-Icons

Webfonts mit Icons als Buchstaben

Moderne Form von „Wingdings“ und Co.

Negativ-Beispiel: Text als Icon

Beispiel: Icon per CSS

Beispiel: Font Awesome

Nachteil: Einfarbig

Nachteil: Schlechtes Rendering (Beispiel)

Gut zu wissen

Webfonts wirken auf Retina-Displays schlanker

Achtung! Langweiliges Design

Flexibles und „Retina“-optimiertes Design ist komplex

Viele Websites sind „überoptimiert“

Emotionales und individuelles Design ist wichtig!

Tools

Conditionizr

Favicon-Generator

SpriteCow

Best Webdesign Tools

Mehr Infos auf

blog.kulturbanause.de

Steuerung über die Pfeiltasten. Diese Präsentation ist Teil der Session "Web Design in Hi-DPI", von der Webinale 2013. Mehr Infos →