wbfntdy 2012
DESCRIPTION
Ob online oder mobil – die Oberflächengestaltung mit Tiefgang macht sich nach wie vor rar. Anwenderfreundlichkeit und (typo)grafische Qualität stehen häufig in einem heftigen Spannungsverhältnis. Viele Webseiten begeistern zwar durch oberflächliche technische Besonderheiten, scheitern jedoch an der Vermittlung jeglichen Inhalts. Die pure Integration von Webfonts hilft da auch nicht weiter. Der Webfontday 2012 will den Mut zu herausragenden Lösungen wecken, ganz praktisch Tipps und Tricks für den gestalterischen Alltag geben und mit brillanten Beispielen aus der Praxis inspirieren. http://2012.webfontday.de/TRANSCRIPT
(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