Page 1

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

Google

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

Icons im Web: Roundtrip for a better web experience  

Update meines Vortrags vom #wbfntdy 2012 anlässlich des ersten Treffens der GTUG Munich im Münchner Google Büro 2013. Angesichts weiterer ne...

Read more
Read more
Similar to
Popular now
Just for you