Update meines Vortrags vom #wbfntdy 2012 anlässlich des ersten Treffens der GTUG Munich im Münchner Google Büro 2013. Angesichts weiterer neuer Hardware wie z.B. dem Google Chromebook »Pixel« weiterhin aktuell und spannend.

1. Icons im Web
Roundtrip for a better
Web experience
Markus Greve
GTUG Meetup 16. April 2013

2. Markus Greve
KOCHAN & PARTNER
BRAND DESIGN DEVELOPMENT
T +49 89 17860–150
E markus.greve@kochan.de
 @mrmontezuma
Slides http://de.slideshare.net/markusgreve

3. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO

4. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
WARUM?
Oder: warum gerade jetzt?

5. DISPLAY-ENTWICKLUNG
2013

6. DISPLAY-ENTWICKLUNG
PC-Ära – »Mythos 72 ppi« (96 ppi)
2007 – Original iPhone (163 ppi)
2010 – iPhone 4 (960x640, 326 ppi)
2012
März – iPad 3 (2.048x1.536, 260 ppi)
Juni – MacBook Pro Retina (2.880x1.800, 220 ppi)
November – Google Nexus 10 (2.560x1.600, 300 ppi)
2013
März – Google Chromebook Pixel (2.560x1.700, 239 ppi)

10. Was kommt
als nächstes?

11. 4K
3.280 x 2.160

12. heimkinotrends.de, 15. April 2013
50 Zoll großer 4K Fernseher für 1300 Dollar
“ Der Preisverfall bei 4K-Fernsehern hat mittlerweile
beinahe angenehme Regionen erreicht.

13. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
BITMAPS
vs
VEKTOREN

14. BITMAPS
GIF JPEG PNG

15. BITMAPS | App Entwicklung
Android iOS

16. BITMAPS | Populäre Websites
Groupon
Google
Amazon

17. VEKTOREN | Form
f
SWF SVG
T
Webfont
Proprietäre Scaleable Vector
Webfonts
Vektorformate Graphics

18. VEKTOREN | Form
SWF
f SVG
T
Webfont
+ Keine PlugIns erforderlich
Plattform-übergreifend verfügbar
Zusammenfassung verschiedener Formen in einer Datei

19. VEKTOREN | Erscheinungsbild

20. VEKTOREN | Erscheinungsbild
+ CSS3

21. VEKTOREN | CSS3 – Abgerundete Formen
.basics {
! display: inline-block;
! position: relative;
! padding: 60px; padding-bottom: 20px;
! margin: 50px;
! color: black;
! border: 20px solid black;
! border-radius: 60px;
}
CSS3 Patterns: Checkerboard von Lea Verou (http://lea.verou.me/css3patterns)

22. VEKTOREN | CSS3 – Hintergrund
.basics { ... }
.background {!
! border: none;
! margin: 70px;
! color: white;
! background-image:
! ! -webkit-gradient(
! ! ! radial,
! ! ! center bottom, 0,
! ! ! center bottom, 350,
! ! ! from(#fdac39),
! ! ! to(#da732c)
! ! );
}

23. VEKTOREN | CSS3 – Text-Effekte
.basics { ... }
.background { ... }!
.foreground {!
! color: #eee;
! text-shadow:
! ! 0px -6px 1px #666,
! ! 0px 6px 1px #fff;
}

24. VEKTOREN | CSS3 – Zuckerguss
.basics { ... }
.background { ... }!
.foreground { ... }!
.fancy {
! box-shadow: 10px 10px 10px #333;
}
.fancy div {
! position: absolute;
! left: 0; top: 0;
! width: 100%;!height: 50%;
! -webkit-border-top-left-radius:
! ...
! background-image:
! ! -webkit-gradient(
! ! ...
}

25. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
INTEGRATION
Best practise

26. SO BITTE NICHT...
Auszug aus einem (ansonsten sehr gutem) »Tutorial«

27. ZIELSETZUNG
1. Möglichst generischer Ansatz
(Vermeidung Class-Bloat)
2. So wenig semantischer Overhead wie möglich
3. Screenreader-freundlich (!)

28. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“>Ort</span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area«
Keine Verwechselung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

29. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“></span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area«
Keine Verwechselung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

30. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“></span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area«
Keine Verwechselung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

31. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“></span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area«
Keine Verwechselung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

32. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“></span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area«
Keine Verwechselung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

33. LÖSUNG
Eigenes Markup erlaubt Einsatz

des aria-hidden Attributs
Semantisch korrekt
content-Erzeugung
HTML durch Pseudo-Selektor
<span
Generisches CSS dank
! aria-hidden=“true“ HTML5 data-Attribut und
! data-icon= “&#xE006“></span> attribut-basiertem Selektor
Vermeidung von eigener
Klassen-Deklaration pro Icon
CSS
[data-icon]:before { Charakter-Mapping in die
font-family: MyIconFont;
»Private Use Area« (#E000 bis #F8FF)
Keine Verwechslung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

34. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
QUELLEN
Beispiele

36. »...pixel-perfect at
multiples of 28px...«

42. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
EIGENE
ICON-FONTS

43. PROZESS | Beispiel
Entwurf
AI
EPS
VFB

44. PROZESS | Beispiel
Entwurf
AI
EPS
VFB
Konvertierung
T
Webfont

45. PROZESS | Beispiel
Entwurf
ggf. notwendige
Zwischenformate
AI
EPS
VFB SVG
Konvertierung
T
Webfont

46. ENTWURF | Adobe Illustrator

47. KONVERTIERUNG | IcoMoon
Import: SVG-Grafik oder -Font
Output: Webfont-Archiv, Muster-Seite

48. KONVERTIERUNG | IcoMoon
Einfache Korrekturen
Download als Vorlage zur weiteren Bearbeitung

49. KONVERTIERUNG | IcoMoon
Export der gewählten Glyphen
Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)

50. KONVERTIERUNG | IcoMoon
Webfont (EOT, TTF, WOFF, SVG)
Muster-Seite (HTML, CSS)
Javascript für IE < 7 für
Pseudo-Selektoren
Lizenz-Sammlung aller
eingesetzen Schriften

51. KONVERTIERUNG | IcoMoon
Webfont (EOT, TTF, WOFF, SVG)
Muster-Seite (HTML, CSS)
Javascript für IE < 7 für
Pseudo-Selektoren
Lizenz-Sammlung aller
eingesetzen Schriften

52. KONVERTIERUNG | IcoMoon
Lokale Installation der TTF-Datei

53. WARUM
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO

MAUI 2.0

54. AUFGABE | Extranet
Extranet für Vertriebspartner
Anwendungsorientiert, Werkzeug
Heterogene Zielgruppe & Ausstattung
Internet Explorer ab Version 8
Stationäre PCs und mobile Endgeräte

55. SEITENAUFBAU

56. KLASSISCHER ANSATZ | CSS Sprite
CSS-Sprite
74 Icons in 20x20
59 kB
Einzeldateien
68 Icons in 43x43
136 kB

57. VERGLEICH | Bitmap vs Webfont

58. VERGLEICH | Bitmap vs Webfont

59. VERGLEICH | Bitmap vs Webfont

60. VERGLEICH | Bitmap vs Webfont

61. GEGENÜBERSTELLUNG
CSS-Sprite
74 Icons in 20x20
59 kB
Einzeldateien
68 Icons in 43x43
136 kB

62. GEGENÜBERSTELLUNG
CSS-Sprite
74 Icons in 20x20
59 kB
Einzeldateien
68 Icons in 43x43
136 kB

63. GEGENÜBERSTELLUNG
CSS-Sprite
Icon-Font
74 Icons in 20x20
59 kB 84 skalierbare Glyphen
14 – 24 kB je nach Format
Einzeldateien
CSS
68 Icons in 43x43 320 Byte
136 kB

64. GEGENÜBERSTELLUNG
CSS-Sprite
Icon-Font
74 Icons in 20x20
59 kB 84 skalierbare Glyphen
14 – 24 kB je nach Format
Einzeldateien
89
CSS
68 Icons in 43x43 320 Byte
136 kB Ersparnis %

65. VIELEN DANK
Markus Greve T +49 89 17860–150
KOCHAN & PARTNER E markus.greve@kochan.de
BRAND DESIGN DEVELOPMENT  @mrmontezuma
Slides http://de.slideshare.net/markusgreve
© 2013 KOCHAN & PARTNER