Icons im Web Roundtrip for a better Web experience
Markus Greve GTUG Meetup 16. April 2013
Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de @mrmontezuma
Slides http://de.slideshare.net/markusgreve
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
WARUM?
Oder: warum gerade jetzt?
DISPLAY-ENTWICKLUNG
2013
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)
Was kommt als n채chstes?
4K
3.280 x 2.160
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.
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
BITMAPS vs
VEKTOREN
BITMAPS
GIF
JPEG
PNG
BITMAPS | App Entwicklung
Android
iOS
BITMAPS | Populäre Websites Groupon
Amazon
VEKTOREN | Form
f
SWF Proprietäre Vektorformate
SVG Scaleable Vector Graphics
T Webfont Webfonts
VEKTOREN | Form
f
SWF
+
SVG
T Webfont
Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
VEKTOREN |Â Erscheinungsbild
VEKTOREN |Â Erscheinungsbild
+ CSS3
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)
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)
!
!
);
}
VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! !
color: #eee;
!
text-shadow:
!
!
0px -6px 1px #666,
!
!
0px
}
6px 1px #fff;
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(
!
!
...
}
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
INTEGRATION Best practise
SO BITTE NICHT...
Auszug aus einem (ansonsten sehr gutem) »Tutorial«
ZIELSETZUNG
1. Mรถglichst generischer Ansatz (Vermeidung Class-Bloat) 2. So wenig semantischer Overhead wie mรถglich 3. Screenreader-freundlich (!)
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“>Ort</span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“></span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“></span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“></span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“></span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
Eigenes Markup erlaubt Einsatz des aria-hidden Attributs Semantisch korrekt content-Erzeugung
HTML <span !
aria-hidden=“true“
!
data-icon= “&#xE006“></span>
CSS [data-icon]:before { font-family: MyIconFont; content: attr(data-icon); speak: none; }
durch Pseudo-Selektor Generisches CSS dank HTML5 data-Attribut und attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon Charakter-Mapping in die »Private Use Area« (#E000 bis #F8FF) Keine Verwechslung mit echtem Inhalt durch Suchmaschinen oder Screenreader
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
QUELLEN Beispiele
»...pixel-perfect at multiples of 28px...«
MOTIVATION BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
EIGENE ICON-FONTS
PROZESS | Beispiel Entwurf
AI EPS
VFB
PROZESS |Â Beispiel Entwurf
AI EPS
VFB
Konvertierung
T Webfont
PROZESS |Â Beispiel Entwurf ggf. notwendige Zwischenformate AI EPS
VFB
SVG
Konvertierung
T Webfont
ENTWURF |Â Adobe Illustrator
KONVERTIERUNG |Â IcoMoon
Import: SVG-Grafik oder -Font Output: Webfont-Archiv, Muster-Seite
KONVERTIERUNG |Â IcoMoon
Einfache Korrekturen Download als Vorlage zur weiteren Bearbeitung
KONVERTIERUNG | IcoMoon
Export der gewählten Glyphen Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
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
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
KONVERTIERUNG |Â IcoMoon
Lokale Installation der TTF-Datei
WARUM BITMAPS VS. VEKTOREN INTEGRATION QUELLEN HERSTELLUNG DEMO
MAUI 2.0
AUFGABE | Extranet
Extranet für Vertriebspartner Anwendungsorientiert, Werkzeug Heterogene Zielgruppe & Ausstattung
Internet Explorer ab Version 8 Stationäre PCs und mobile Endgeräte
SEITENAUFBAU
KLASSISCHER ANSATZ |Â CSS Sprite
CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
GEGENĂ&#x153;BERSTELLUNG
CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
GEGENĂ&#x153;BERSTELLUNG
CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
GEGENÜBERSTELLUNG
CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
Icon-Font 84 skalierbare Glyphen 14 – 24 kB je nach Format CSS 320 Byte
GEGENÜBERSTELLUNG
CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
Icon-Font 84 skalierbare Glyphen 14 – 24 kB je nach Format CSS 320 Byte Ersparnis
89
%
VIELEN DANK
Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT
T +49 89 17860–150 E markus.greve@kochan.de @mrmontezuma
Slides http://de.slideshare.net/markusgreve
© 2013 KOCHAN & PARTNER