Wbfntdy 2012

(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


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


INTEGRATION

QUELLEN

HERSTELLUNG

DEMO

BITMAPS

GIF JPEG PNG

BITMAPS | App Entwicklung

Android iOS

BITMAPS | Populäre Websites

Groupon

Google

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)

http://lea.verou.me/css3patterns/#

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


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= “&#xE006“>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


! data-icon= “&#xE006“></span>




speak: none;

}

HTML

CSS





LÖSUNG

<span






speak: none;

}

HTML

CSS





LÖSUNG

<span






speak: none;

}

HTML

CSS





LÖSUNG

<span






speak: none;

}

HTML

CSS





LÖSUNG

<span






speak: none;

}

HTML

CSS




Charakter-Mapping in die »Private Use Area«Keine Verwechslung mit echtem Inhalt durch Suchmaschinen oder Screenreader

QUELLENBeispiele

MOTIVATION


INTEGRATION

QUELLEN

HERSTELLUNG

DEMO

»...pixel-perfect at multiples of 28px...«

EIGENE ICON-FONTS

MOTIVATION


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


Einfache Korrekturen

Download als Vorlage zur weiteren Bearbeitung


Export der gewählten Glyphen

Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)


Webfont (EOT, TTF, WOFF, SVG)

Muster-Seite (HTML, CSS)

Javascript für IE < 7 für Pseudo-Selektoren

Lizenz-Sammlung aller eingesetzen Schriften


Webfont (EOT, TTF, WOFF, SVG)

Muster-Seite (HTML, CSS)

Javascript für IE < 7 für Pseudo-Selektoren

Lizenz-Sammlung aller eingesetzen Schriften


Lokale Installation der TTF-Datei

MAUI 2.0

WARUM


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


VERGLEICH | Bitmap vs Webfont




GEGENÜBERSTELLUNG

CSS-Sprite


Einzeldateien


GEGENÜBERSTELLUNG

CSS-Sprite


Einzeldateien


GEGENÜBERSTELLUNG

Icon-Font

84 skalierbare Glyphen14 – 24 kB je nach Format

CSS320 Byte

CSS-Sprite


Einzeldateien


GEGENÜBERSTELLUNG

Icon-Font

84 skalierbare Glyphen14 – 24 kB je nach Format

CSS320 Byte

CSS-Sprite


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

mailto:[email protected]

mailto:[email protected]

http://www.kochan.de/wbfntdy/icons

http://www.kochan.de/wbfntdy/icons

http://de.slideshare.net/markusgreve/wbfntdy-2012

http://de.slideshare.net/markusgreve/wbfntdy-2012

Date post:	24-May-2015
Category:	Design
Upload:	markus-greve
View:	822 times
Download:	0 times

Wbfntdy 2012

Design