Icons im Web: Roundtrip for a better web experience

transcript

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 markus.greve@kochan.de @mrmontezuma

MOTIVATION

BITMAPS VS. VEKTOREN

INTEGRATION

QUELLEN

HERSTELLUNG

WARUM?Oder: warum gerade jetzt?

MOTIVATION

INTEGRATION

QUELLEN

HERSTELLUNG

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

INTEGRATION

QUELLEN

HERSTELLUNG

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

+ 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

INTEGRATION

QUELLEN

HERSTELLUNG

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

! aria-hidden=“true“

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

[data-icon]:before {

font-family: MyIconFont;

content: attr(data-icon);

speak: none;

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

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

speak: none;

LÖSUNG

speak: none;

LÖSUNG

speak: none;

LÖSUNG

speak: none;

LÖSUNG

speak: none;

Charakter-Mapping in die »Private Use Area« (#E000 bis #F8FF)Keine Verwechslung mit echtem Inhalt durch Suchmaschinen oder Screenreader

QUELLENBeispiele

MOTIVATION

INTEGRATION

QUELLEN

HERSTELLUNG

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

EIGENE ICON-FONTS

MOTIVATION

INTEGRATION

QUELLEN

HERSTELLUNG

PROZESS | Beispiel

Entwurf

PROZESS | Beispiel

Entwurf

Webfont

Konvertierung

PROZESS | Beispiel

Entwurf

ggf. notwendigeZwischenformate

Webfont

Konvertierung

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

INTEGRATION

QUELLEN

HERSTELLUNG

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

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 markus.greve@kochan.deBRAND DESIGN DEVELOPMENT @mrmontezuma

Slides http://de.slideshare.net/markusgreve

Icons im Web: Roundtrip for a better web experience

Technology