Icons im Web: Roundtrip for a better web experience
•
3 gefällt mir•1,674 views
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.
Melden
Teilen
Empfohlen für Sie
Empfohlen für Sie
Empfohlen für Sie
Empfohlen für Sie
Empfohlen für Sie
Weitere ähnliche Inhalte
Ähnlich wie Icons im Web: Roundtrip for a better web experience
Ähnlich wie Icons im Web: Roundtrip for a better web experience (20)
Icons im Web: Roundtrip for a better web experience
- 1. Icons im Web Roundtrip for a better Web experience Markus Greve GTUG Meetup 16. April 2013
- 2. Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de @mrmontezuma Slides http://de.slideshare.net/markusgreve
- 4. MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO WARUM? Oder: warum gerade jetzt?
- 5. DISPLAY-ENTWICKLUNG 2013
- 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)
- 11. 4K 3.280 x 2.160
- 12. heimkinotrends.de, 15. April 2013 50 Zoll großer 4K Fernseher für 1300 Dollar “ Der Preisverfall bei 4K-Fernsehern hat mittlerweile beinahe angenehme Regionen erreicht.
- 13. MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO BITMAPS vs VEKTOREN
- 14. BITMAPS GIF JPEG PNG
- 15. BITMAPS | App Entwicklung Android iOS
- 16. BITMAPS | Populäre Websites Groupon Google Amazon
- 17. VEKTOREN | Form f SWF SVG T Webfont Proprietäre Scaleable Vector Webfonts Vektorformate Graphics
- 18. VEKTOREN | Form SWF f SVG T Webfont + Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
- 20. VEKTOREN | Erscheinungsbild + CSS3
- 21. 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)
- 22. 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) ! ! ); }
- 23. VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! ! color: #eee; ! text-shadow: ! ! 0px -6px 1px #666, ! ! 0px 6px 1px #fff; }
- 24. 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( ! ! ... }
- 25. MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO INTEGRATION Best practise
- 26. SO BITTE NICHT... Auszug aus einem (ansonsten sehr gutem) »Tutorial«
- 27. ZIELSETZUNG 1. Möglichst generischer Ansatz (Vermeidung Class-Bloat) 2. So wenig semantischer Overhead wie möglich 3. Screenreader-freundlich (!)
- 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= ““>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 }
- 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= ““></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. 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= ““></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 }
- 31. 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= ““></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 }
- 32. 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= ““></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 }
- 33. 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= ““></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 }
- 34. MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO QUELLEN Beispiele
- 36. »...pixel-perfect at multiples of 28px...«
- 42. MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO EIGENE ICON-FONTS
- 43. PROZESS | Beispiel Entwurf AI EPS VFB
- 44. PROZESS | Beispiel Entwurf AI EPS VFB Konvertierung T Webfont
- 45. PROZESS | Beispiel Entwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont
- 47. KONVERTIERUNG | IcoMoon Import: SVG-Grafik oder -Font Output: Webfont-Archiv, Muster-Seite
- 48. KONVERTIERUNG | IcoMoon Einfache Korrekturen Download als Vorlage zur weiteren Bearbeitung
- 49. KONVERTIERUNG | IcoMoon Export der gewählten Glyphen Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
- 50. 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
- 51. 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
- 52. KONVERTIERUNG | IcoMoon Lokale Installation der TTF-Datei
- 54. AUFGABE | Extranet Extranet für Vertriebspartner Anwendungsorientiert, Werkzeug Heterogene Zielgruppe & Ausstattung Internet Explorer ab Version 8 Stationäre PCs und mobile Endgeräte
- 55. SEITENAUFBAU
- 56. KLASSISCHER ANSATZ | CSS Sprite CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
- 57. VERGLEICH | Bitmap vs Webfont
- 58. VERGLEICH | Bitmap vs Webfont
- 59. VERGLEICH | Bitmap vs Webfont
- 60. VERGLEICH | Bitmap vs Webfont
- 61. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
- 62. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
- 63. GEGENÜBERSTELLUNG CSS-Sprite Icon-Font 74 Icons in 20x20 59 kB 84 skalierbare Glyphen 14 – 24 kB je nach Format Einzeldateien CSS 68 Icons in 43x43 320 Byte 136 kB
- 64. GEGENÜBERSTELLUNG CSS-Sprite Icon-Font 74 Icons in 20x20 59 kB 84 skalierbare Glyphen 14 – 24 kB je nach Format Einzeldateien 89 CSS 68 Icons in 43x43 320 Byte 136 kB Ersparnis %
- 65. VIELEN DANK Markus Greve T +49 89 17860–150 KOCHAN & PARTNER E markus.greve@kochan.de BRAND DESIGN DEVELOPMENT @mrmontezuma Slides http://de.slideshare.net/markusgreve © 2013 KOCHAN & PARTNER