Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Icons im Web: Roundtrip for a better web experience

1,257 views

Published on

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.

Published in: Technology
  • Be the first to comment

Icons im Web: Roundtrip for a better web experience

  1. 1. Icons im WebRoundtrip for a betterWeb experienceMarkus GreveGTUG Meetup 16. April 2013
  2. 2. Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de  @mrmontezumaSlides http://de.slideshare.net/markusgreve
  3. 3. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO
  4. 4. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO WARUM? Oder: warum gerade jetzt?
  5. 5. DISPLAY-ENTWICKLUNG 2013
  6. 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)
  7. 7. Was kommtals nächstes?
  8. 8. 4K3.280 x 2.160
  9. 9. heimkinotrends.de, 15. April 201350 Zoll großer 4K Fernseher für 1300 Dollar“ Der Preisverfall bei 4K-Fernsehern hat mittlerweile beinahe angenehme Regionen erreicht.
  10. 10. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO BITMAPS vs VEKTOREN
  11. 11. BITMAPS GIF JPEG PNG
  12. 12. BITMAPS | App Entwicklung Android iOS
  13. 13. BITMAPS | Populäre Websites Groupon Google Amazon
  14. 14. VEKTOREN | Form f SWF SVG T Webfont Proprietäre Scaleable Vector Webfonts Vektorformate Graphics
  15. 15. VEKTOREN | Form SWF f SVG T Webfont+ Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
  16. 16. VEKTOREN | Erscheinungsbild
  17. 17. VEKTOREN | Erscheinungsbild + CSS3
  18. 18. 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)
  19. 19. 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) ! ! ); }
  20. 20. VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! ! color: #eee; ! text-shadow: ! ! 0px -6px 1px #666, ! ! 0px 6px 1px #fff; }
  21. 21. 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( ! ! ... }
  22. 22. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO INTEGRATION Best practise
  23. 23. SO BITTE NICHT...Auszug aus einem (ansonsten sehr gutem) »Tutorial«
  24. 24. ZIELSETZUNG1. Möglichst generischer Ansatz (Vermeidung Class-Bloat)2. So wenig semantischer Overhead wie möglich3. Screenreader-freundlich (!)
  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“>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}
  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 Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader}
  30. 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« (#E000 bis #F8FF) Keine Verwechslung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader}
  31. 31. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO QUELLEN Beispiele
  32. 32. »...pixel-perfect atmultiples of 28px...«
  33. 33. MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO EIGENE ICON-FONTS
  34. 34. PROZESS | BeispielEntwurf AI EPS VFB
  35. 35. PROZESS | BeispielEntwurf AI EPS VFB Konvertierung T Webfont
  36. 36. PROZESS | BeispielEntwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont
  37. 37. ENTWURF | Adobe Illustrator
  38. 38. KONVERTIERUNG | IcoMoonImport: SVG-Grafik oder -FontOutput: Webfont-Archiv, Muster-Seite
  39. 39. KONVERTIERUNG | IcoMoonEinfache KorrekturenDownload als Vorlage zur weiteren Bearbeitung
  40. 40. KONVERTIERUNG | IcoMoonExport der gewählten GlyphenEncoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
  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 | IcoMoon Webfont (EOT, TTF, WOFF, SVG) Muster-Seite (HTML, CSS) Javascript für IE < 7 für Pseudo-Selektoren Lizenz-Sammlung aller eingesetzen Schriften
  43. 43. KONVERTIERUNG | IcoMoonLokale Installation der TTF-Datei
  44. 44. WARUMBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO  MAUI 2.0
  45. 45. AUFGABE | Extranet Extranet für Vertriebspartner Anwendungsorientiert, Werkzeug Heterogene Zielgruppe & Ausstattung Internet Explorer ab Version 8 Stationäre PCs und mobile Endgeräte
  46. 46. SEITENAUFBAU
  47. 47. KLASSISCHER ANSATZ | CSS Sprite CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  48. 48. VERGLEICH | Bitmap vs Webfont
  49. 49. VERGLEICH | Bitmap vs Webfont
  50. 50. VERGLEICH | Bitmap vs Webfont
  51. 51. VERGLEICH | Bitmap vs Webfont
  52. 52. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  53. 53. GEGENÜBERSTELLUNGCSS-Sprite74 Icons in 20x2059 kBEinzeldateien68 Icons in 43x43136 kB
  54. 54. 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
  55. 55. 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 %
  56. 56. VIELEN DANKMarkus Greve T +49 89 17860–150KOCHAN & PARTNER E markus.greve@kochan.deBRAND DESIGN DEVELOPMENT  @mrmontezumaSlides http://de.slideshare.net/markusgreve© 2013 KOCHAN & PARTNER

×