1.
Typographische Gesellschaft München (Bild)Zeichen erobern die Webtypografie ... Ein ÜberblickMarkus GreveZum Webfontday 2012 »Type goes Interface«

2.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO

3.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO 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)

7.
Was kommtals nächstes?

8.
4K3.280 x 2.160

9.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO BITMAPS vs VEKTOREN

10.
BITMAPS GIF JPEG PNG

11.
BITMAPS | App Entwicklung Android iOS

12.
BITMAPS | Populäre Websites Groupon Google Amazon

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

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

15.
VEKTOREN | Erscheinungsbild

16.
VEKTOREN | Erscheinungsbild + CSS3

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

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

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

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

21.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO INTEGRATION Best practise

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

23.
ZIELSETZUNG1. Möglichst generischer Ansatz (Vermeidung »Class-Bloat«)2. So wenig semantischer Overhead wie möglich3. Screenreader-freundlich (!)

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

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

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

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

30.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO QUELLEN Beispiele

31.
»...pixel-perfect atmultiples of 28px...«

32.
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO EIGENE ICON-FONTS

33.
PROZESS | BeispielEntwurf AI EPS VFB

34.
PROZESS | BeispielEntwurf AI EPS VFB Konvertierung T Webfont

35.
PROZESS | BeispielEntwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont

36.
ENTWURF | Adobe Illustrator

37.
KONVERTIERUNG | IcoMoonImport: SVG-Grafik oder -FontOutput: Webfont-Archiv, Muster-Seite

38.
KONVERTIERUNG | IcoMoonEinfache KorrekturenDownload als Vorlage zur weiteren Bearbeitung

39.
KONVERTIERUNG | IcoMoonExport der gewählten GlyphenEncoding wahlweise »Basic Latin« oder »Private Use Area« (Default)

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

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

42.
KONVERTIERUNG | IcoMoonLokale Installation der TTF-Datei

43.
WARUMBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO  MAUI 2.0

44.
AUFGABE | ExtranetExtranet für VertriebspartnerAnwendungsorientiert, WerkzeugHeterogene Zielgruppe & AusstattungInternet Explorer ab Version 8Stationäre PCs und mobile Endgeräte

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

46.
VERGLEICH | Bitmap vs Webfont

47.
VERGLEICH | Bitmap vs Webfont

48.
VERGLEICH | Bitmap vs Webfont

49.
VERGLEICH | Bitmap vs Webfont

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

51.
GEGENÜBERSTELLUNGCSS-Sprite74 Icons in 20x2059 kBEinzeldateien68 Icons in 43x43136 kB

52.
GEGENÜBERSTELLUNGCSS-Sprite Icon-Font74 Icons in 20x2059 kB 84 skalierbare Glyphen 14 – 24 kB je nach FormatEinzeldateien CSS68 Icons in 43x43 320 Byte136 kB

53.
GEGENÜBERSTELLUNGCSS-Sprite Icon-Font74 Icons in 20x2059 kB 84 skalierbare Glyphen 14 – 24 kB je nach FormatEinzeldateien 89 CSS68 Icons in 43x43 320 Byte136 kB Ersparnis %

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