Upload
markus-greve
View
393
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Icons im WebRoundtrip for a better Web experience
Markus Greve GTUG Meetup 16. April 2013
Slides http://de.slideshare.net/markusgreve
Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT
T +49 89 17860–150 E [email protected] @mrmontezuma
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
WARUM?Oder: warum gerade jetzt?
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
DISPLAY-ENTWICKLUNG
2013
DISPLAY-ENTWICKLUNG
PC-Ära – »Mythos 72 ppi« (96 ppi)
2007 – Original iPhone (163 ppi)
2010 – iPhone 4 (960x640, 326 ppi)
2012Mä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)
2013März – Google Chromebook Pixel (2.560x1.700, 239 ppi)
Was kommt als 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 mittlerweile beinahe angenehme Regionen erreicht.
BITMAPSvs
VEKTOREN
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
BITMAPS
GIF JPEG PNG
BITMAPS | App Entwicklung
Android iOS
BITMAPS | Populäre Websites
Groupon
Amazon
VEKTOREN | Form
ProprietäreVektorformate
Scaleable Vector Graphics
Webfonts
Webfont
TSVGfSWF
VEKTOREN | Form
Webfont
TSVGfSWF
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(
! ! ...
}
INTEGRATIONBest practise
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
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
<span
! aria-hidden=“true“
! data-icon= ““>Ort</span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung von eigener Klassen-Deklaration pro Icon
Charakter-Mapping in die »Private Use Area«Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
<span
! aria-hidden=“true“
! data-icon= ““></span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung von eigener Klassen-Deklaration pro Icon
Charakter-Mapping in die »Private Use Area«Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
<span
! aria-hidden=“true“
! data-icon= ““></span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung von eigener Klassen-Deklaration pro Icon
Charakter-Mapping in die »Private Use Area«Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
<span
! aria-hidden=“true“
! data-icon= ““></span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung von eigener Klassen-Deklaration pro Icon
Charakter-Mapping in die »Private Use Area«Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
<span
! aria-hidden=“true“
! data-icon= ““></span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung von eigener Klassen-Deklaration pro Icon
Charakter-Mapping in die »Private Use Area«Keine Verwechselung mit echtem Inhalt durch Suchmaschinen oder Screenreader
LÖSUNG
<span
! aria-hidden=“true“
! data-icon= ““></span>
[data-icon]:before {
font-family: MyIconFont;
content: attr(data-icon);
speak: none;
}
HTML
CSS
Eigenes Markup erlaubt Einsatz des aria-hidden AttributsSemantisch korrekt
content-Erzeugung durch Pseudo-Selektor
Generisches CSS dank HTML5 data-Attribut und attribut-basiertem SelektorVermeidung 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
QUELLENBeispiele
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
»...pixel-perfect at multiples of 28px...«
EIGENE ICON-FONTS
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
PROZESS | Beispiel
Entwurf
VFB
EPS
AI
PROZESS | Beispiel
Entwurf
Webfont
TVFB
EPS
AI
Konvertierung
PROZESS | Beispiel
Entwurf
ggf. notwendigeZwischenformate
Webfont
TVFB
EPS
AI
Konvertierung
SVG
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
MAUI 2.0
WARUM
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
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 20x2059 kB
Einzeldateien
68 Icons in 43x43136 kB
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
VERGLEICH | Bitmap vs Webfont
GEGENÜBERSTELLUNG
CSS-Sprite
74 Icons in 20x2059 kB
Einzeldateien
68 Icons in 43x43136 kB
GEGENÜBERSTELLUNG
CSS-Sprite
74 Icons in 20x2059 kB
Einzeldateien
68 Icons in 43x43136 kB
GEGENÜBERSTELLUNG
Icon-Font
84 skalierbare Glyphen14 – 24 kB je nach Format
CSS320 Byte
CSS-Sprite
74 Icons in 20x2059 kB
Einzeldateien
68 Icons in 43x43136 kB
GEGENÜBERSTELLUNG
Icon-Font
84 skalierbare Glyphen14 – 24 kB je nach Format
CSS320 Byte
CSS-Sprite
74 Icons in 20x2059 kB
Einzeldateien
68 Icons in 43x43136 kB Ersparnis 89%
VIELEN DANK
Markus Greve T +49 89 17860–150 KOCHAN & PARTNER E [email protected] DESIGN DEVELOPMENT @mrmontezuma
Slides http://de.slideshare.net/markusgreve
© 2013 KOCHAN & PARTNER