(Bild)Zeichen erobern die Webtypografie ...
Ein Überblick
Markus Greve Zum Webfontday 2012 »Type goes Interface«
Typographische Gesellschaft München
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
WARUM?Oder: warum gerade jetzt?
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
DISPLAY-ENTWICKLUNG
2012
DISPLAY-ENTWICKLUNG
2012November – Google Nexus 10 Tablet (2.560x1.600, 300 ppi)
Juni – MacBook Pro Retina (2.880x1.800, 220 ppi)
März – iPad 3 (2.048x1.536, 260 ppi)
DISPLAY-ENTWICKLUNG
2012November – Google Nexus 10 Tablet (2.560x1.600, 300 ppi)
Juni – MacBook Pro Retina (2.880x1.800, 220 ppi)
März – iPad 3 (2.048x1.536, 260 ppi)
2010 – iPhone 4 (960x640, 326 ppi)
2007 – Original iPhone (163 ppi)
PC-Ära – »Mythos 72 ppi« (96 ppi)
Was kommt als nächstes?
4K3.280 x 2.160
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«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
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
Demos, Links, Ressourcen http://www.kochan.de/wbfntdy/iconfonts/Slides http://de.slideshare.net/markusgreve/wbfntdy-2012
© 2012 KOCHAN & PARTNER
