Icons im WebRoundtrip for a betterWeb experienceMarkus GreveGTUG Meetup 16. April 2013
Markus Greve                                       KOCHAN & PARTNER                                       BRAND DESIGN DEV...
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO
MOTIVATIONBITMAPS VS. VEKTORENINTEGRATIONQUELLENHERSTELLUNGDEMO                WARUM?       Oder: warum gerade jetzt?
DISPLAY-ENTWICKLUNG             2013
DISPLAY-ENTWICKLUNG          PC-Ära – »Mythos 72 ppi« (96 ppi)          2007 – Original iPhone (163 ppi)          2010 – i...
Was kommtals nächstes?
4K3.280 x 2.160
heimkinotrends.de, 15. April 201350 Zoll großer 4K Fernseher für 1300 Dollar“ Der Preisverfall bei 4K-Fernsehern hat mittl...
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. Scree...
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 | Extranet                     Extranet für Vertriebspartner                     Anwendungsorientiert, Werkzeug   ...
SEITENAUFBAU
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....
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Nächste SlideShare
Wird geladen in …5
×

Icons im Web: Roundtrip for a better web experience

963 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
963
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×