Ob online oder mobil – die Oberflächengestaltung mit Tiefgang macht sich nach wie vor rar. Anwenderfreundlichkeit und (typo)grafische Qualität stehen häufig in einem heftigen Spannungsverhältnis. Viele Webseiten begeistern zwar durch oberflächliche technische Besonderheiten, scheitern jedoch an der Vermittlung jeglichen Inhalts. Die pure Integration von Webfonts hilft da auch nicht weiter. Der Webfontday 2012 will den Mut zu herausragenden Lösungen wecken, ganz praktisch Tipps und Tricks für den gestalterischen Alltag geben und mit brillanten Beispielen aus der Praxis inspirieren. http://2012.webfontday.de/

1. Typographische Gesellschaft München
(Bild)Zeichen erobern
die Webtypografie ...
Ein Überblick
Markus Greve
Zum Webfontday 2012 »Type goes Interface«

2. MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO

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

4. DISPLAY-ENTWICKLUNG
2012

5. DISPLAY-ENTWICKLUNG
2012
November – Google Nexus 10 Tablet (2.560x1.600, 300 ppi)
Juni – MacBook Pro Retina (2.880x1.800, 220 ppi)
März – iPad 3 (2.048x1.536, 260 ppi)

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

10. Was kommt
als nächstes?

11. 4K
3.280 x 2.160

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

13. BITMAPS
GIF JPEG PNG

14. BITMAPS | App Entwicklung
Android iOS

15. BITMAPS | Populäre Websites
Groupon
Google
Amazon

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

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

18. VEKTOREN | Erscheinungsbild

19. VEKTOREN | Erscheinungsbild
+ CSS3

20. 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)

21. 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)
! ! );
}

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

23. 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(
! ! ...
}

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

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

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

27. 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
}

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“></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 Verwechslung mit echtem
content: attr(data-icon);
Inhalt durch Suchmaschinen
speak: none; oder Screenreader
}

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

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

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

42. PROZESS | Beispiel
Entwurf
AI
EPS
VFB

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

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

45. ENTWURF | Adobe Illustrator

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

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

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

49. 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

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
Lokale Installation der TTF-Datei

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

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

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

55. VERGLEICH | Bitmap vs Webfont

56. VERGLEICH | Bitmap vs Webfont

57. VERGLEICH | Bitmap vs Webfont

58. VERGLEICH | Bitmap vs Webfont

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

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

61. 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

62. 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 %

63. 
VIELEN DANK
Markus Greve T +49 89 17860–150
KOCHAN & PARTNER E markus.greve@kochan.de
BRAND DESIGN DEVELOPMENT  @mrmontezuma
Demos, Links, Ressourcen  http://www.kochan.de/wbfntdy/iconfonts/
Slides  http://de.slideshare.net/markusgreve/wbfntdy-2012
© 2012 KOCHAN & PARTNER