Jonas Hellwig | kulturbanause®
5. Juni 2013, Webinale Berlin
Webdesigner
Autor / Video-Trainer
Dozent
Blogger @ blog.kulturbanause.de
Technische Hintergründe
Lösungsansätze mit HTML, CSS & Co.
Tipps & Tools
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
Apple war Vorreiter
Heute: Diverse hochauflösende Displays
Einige sind hochauflösender als das Retina-Display
z. B. Samsung Galaxy SIV, Nexus 10
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
Benutzer gewöhnen sich schnell an das Display
Nicht optimierte Grafiken fallen negativ auf (Beispiel)
Die Entwicklung wird sich nicht mehr umkehren
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 = Breite des Displays in Pixeln
Width = Anzahl der dargestellten Pixel auf dem Display
Width / Device Width * 100 = PX Density in %
MDPI = 100%
HDPI = 150%
Retina = 200%
XHDPI = 225%
Warum sehen Pixelgrafiken auf hochauflösenden-Displays schlechter aus als auf normalen Displays?
Geräte rechnen Grafiken intern um
Bilder sind schärfer
Hochwertige Zoomstufen
Mehr Details
Ästhetik steigt
Website fällt nicht negativ auf
CSS3 einsetzen
Pixelgrafiken optimieren
Vektorgrafiken verwenden
Webfonts verwenden
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
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 hochauflösende Grafik wird erstellt
Die Grafik wird per HTML/CSS skaliert
„Downsampling“ erhöht die Pixeldichte
Grafiken müssen vorhanden sein
Es werden evtl. mehr Daten geladen
Grafiken evtl. unscharf
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“
Hi-DPI-Grafiken haben nicht zwangsläufig mehr KB
JPG-Artefakte durch downsampling
schwerer erkennbar (Beispiel)
Experiment: blog.netvlies.nl
Stufenlos skalierbar
Immer scharf
Kann als Code oder als Grafik verwendet werden (Illustrator)
Ungeeignet für komplexe Illustrationen oder Fotos
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)
Webfonts wirken auf Retina-Displays schlanker
Flexibles und „Retina“-optimiertes Design ist komplex
Viele Websites sind „überoptimiert“
Emotionales und individuelles Design ist wichtig!
Steuerung über die Pfeiltasten. Diese Präsentation ist Teil der Session "Web Design in Hi-DPI", von der Webinale 2013. Mehr Infos →