Typographische Gesellschaft München                    (Bild)Zeichen erobern                     die Webtypografie ...     ...
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO                WARUM?       Oder: warum gerade jetzt?
DISPLAY-ENTWICKLUNG             2012
DISPLAY-ENTWICKLUNG          2012          November – Google Nexus 10 Tablet (2.560x1.600, 300 ppi)          Juni – MacBoo...
DISPLAY-ENTWICKLUNG          2012          November – Google Nexus 10 Tablet (2.560x1.600, 300 ppi)          Juni – MacBoo...
Was kommtals nächstes?
4K3.280 x 2.160
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO                BITMAPS                       vs           ...
BITMAPS          GIF   JPEG   PNG
BITMAPS | App Entwicklung             Android        iOS
BITMAPS | Populäre Websites                              Groupon                                        Google            ...
VEKTOREN | Form         f       SWF              SVG                                         T                            ...
VEKTOREN | Form            SWF               f                       SVG                                                  ...
VEKTOREN | Erscheinungsbild
VEKTOREN | Erscheinungsbild                          + CSS3
VEKTOREN | CSS3 – Abgerundete Formen                                       .basics {                                      ...
VEKTOREN | CSS3 – Hintergrund                       .basics { ... }                       .background {!                  ...
VEKTOREN | CSS3 – Text-Effekte                        .basics { ... }                        .background { ... }!         ...
VEKTOREN | CSS3 – Zuckerguss                      .basics { ... }                      .background { ... }!               ...
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO          INTEGRATION                   Best practise
SO BITTE NICHT...Auszug aus einem (ansonsten sehr gutem) »Tutorial«
ZIELSETZUNG1. Möglichst generischer Ansatz   (Vermeidung »Class-Bloat«)2. So wenig semantischer Overhead wie möglich3. Scr...
LÖSUNG                                        Eigenes Markup erlaubt Einsatz                                             ...
LÖSUNG                                     Eigenes Markup erlaubt Einsatz                                                ...
LÖSUNG                                     Eigenes Markup erlaubt Einsatz                                                ...
LÖSUNG                                     Eigenes Markup erlaubt Einsatz                                                ...
LÖSUNG                                     Eigenes Markup erlaubt Einsatz                                                ...
LÖSUNG                                     Eigenes Markup erlaubt Einsatz                                                ...
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO                QUELLEN                       Beispiele
»...pixel-perfect atmultiples of 28px...«
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO               EIGENE             ICON-FONTS
PROZESS | BeispielEntwurf                AI          EPS    VFB
PROZESS | BeispielEntwurf                AI          EPS    VFB                     Konvertierung                         ...
PROZESS | BeispielEntwurf                                     ggf. notwendige                                     Zwischen...
ENTWURF | Adobe Illustrator
KONVERTIERUNG | IcoMoonImport: SVG-Grafik oder -FontOutput: Webfont-Archiv, Muster-Seite
KONVERTIERUNG | IcoMoonEinfache KorrekturenDownload als Vorlage zur weiteren Bearbeitung
KONVERTIERUNG | IcoMoonExport der gewählten GlyphenEncoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
KONVERTIERUNG | IcoMoon                      Webfont (EOT, TTF, WOFF, SVG)                      Muster-Seite (HTML, CSS)  ...
KONVERTIERUNG | IcoMoon                      Webfont (EOT, TTF, WOFF, SVG)                      Muster-Seite (HTML, CSS)  ...
KONVERTIERUNG | IcoMoonLokale Installation der TTF-Datei
WARUMBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO                                        MAUI 2.0
AUFGABE | ExtranetExtranet für VertriebspartnerAnwendungsorientiert, WerkzeugHeterogene Zielgruppe & AusstattungInternet E...
KLASSISCHER ANSATZ | CSS Sprite                        CSS-Sprite                        74 Icons in 20x20                ...
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
GEGENÜBERSTELLUNG                    CSS-Sprite                    74 Icons in 20x20                    59 kB             ...
GEGENÜBERSTELLUNGCSS-Sprite74 Icons in 20x2059 kBEinzeldateien68 Icons in 43x43136 kB
GEGENÜBERSTELLUNGCSS-Sprite                    Icon-Font74 Icons in 20x2059 kB               84 skalierbare Glyphen       ...
GEGENÜBERSTELLUNGCSS-Sprite                    Icon-Font74 Icons in 20x2059 kB               84 skalierbare Glyphen       ...
VIELEN DANKMarkus Greve                           T +49 89 17860–150KOCHAN & PARTNER                       E markus.greve...
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Upcoming SlideShare
Loading in …5
×

Wbfntdy 2012

1,341 views
1,273 views

Published on

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/

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,341
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wbfntdy 2012

  1. 1. Typographische Gesellschaft München (Bild)Zeichen erobern die Webtypografie ... Ein ÜberblickMarkus GreveZum Webfontday 2012 »Type goes Interface«
  2. 2. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO
  3. 3. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO WARUM? Oder: warum gerade jetzt?
  4. 4. DISPLAY-ENTWICKLUNG 2012
  5. 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. 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. 7. Was kommtals nächstes?
  8. 8. 4K3.280 x 2.160
  9. 9. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO BITMAPS vs VEKTOREN
  10. 10. BITMAPS GIF JPEG PNG
  11. 11. BITMAPS | App Entwicklung Android iOS
  12. 12. BITMAPS | Populäre Websites Groupon Google Amazon
  13. 13. VEKTOREN | Form f SWF SVG T Webfont Proprietäre Scaleable Vector Webfonts Vektorformate Graphics
  14. 14. VEKTOREN | Form SWF f SVG T Webfont+ Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
  15. 15. VEKTOREN | Erscheinungsbild
  16. 16. VEKTOREN | Erscheinungsbild + CSS3
  17. 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. 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. 19. VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! ! color: #eee; ! text-shadow: ! ! 0px -6px 1px #666, ! ! 0px 6px 1px #fff; }
  20. 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. 21. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO INTEGRATION Best practise
  22. 22. SO BITTE NICHT...Auszug aus einem (ansonsten sehr gutem) »Tutorial«
  23. 23. ZIELSETZUNG1. Möglichst generischer Ansatz (Vermeidung »Class-Bloat«)2. So wenig semantischer Overhead wie möglich3. Screenreader-freundlich (!)
  24. 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. 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. 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. 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. 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. 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. 30. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO QUELLEN Beispiele
  31. 31. »...pixel-perfect atmultiples of 28px...«
  32. 32. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO EIGENE ICON-FONTS
  33. 33. PROZESS | BeispielEntwurf AI EPS VFB
  34. 34. PROZESS | BeispielEntwurf AI EPS VFB Konvertierung T Webfont
  35. 35. PROZESS | BeispielEntwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont
  36. 36. ENTWURF | Adobe Illustrator
  37. 37. KONVERTIERUNG | IcoMoonImport: SVG-Grafik oder -FontOutput: Webfont-Archiv, Muster-Seite
  38. 38. KONVERTIERUNG | IcoMoonEinfache KorrekturenDownload als Vorlage zur weiteren Bearbeitung
  39. 39. KONVERTIERUNG | IcoMoonExport der gewählten GlyphenEncoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
  40. 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. 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. 42. KONVERTIERUNG | IcoMoonLokale Installation der TTF-Datei
  43. 43. WARUMBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO  MAUI 2.0
  44. 44. AUFGABE | ExtranetExtranet für VertriebspartnerAnwendungsorientiert, WerkzeugHeterogene Zielgruppe & AusstattungInternet Explorer ab Version 8Stationäre PCs und mobile Endgeräte
  45. 45. KLASSISCHER ANSATZ | CSS Sprite CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  46. 46. VERGLEICH | Bitmap vs Webfont
  47. 47. VERGLEICH | Bitmap vs Webfont
  48. 48. VERGLEICH | Bitmap vs Webfont
  49. 49. VERGLEICH | Bitmap vs Webfont
  50. 50. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  51. 51. GEGENÜBERSTELLUNGCSS-Sprite74 Icons in 20x2059 kBEinzeldateien68 Icons in 43x43136 kB
  52. 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. 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. 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

×