Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

1.236 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
  • Als Erste(r) kommentieren

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

×