SlideShare ist ein Scribd-Unternehmen logo
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              SVG
                                         T
                                        Webfont

      Proprietäre    Scaleable Vector
                                         Webfonts
     Vektorformate       Graphics
VEKTOREN | Form




            SWF
               f                       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                 durch Pseudo-Selektor
<span
                                        Generisches CSS dank
!     aria-hidden=“true“                HTML5 data-Attribut und
!     data-icon= “&#xE006“>Ort</span>   attribut-basiertem Selektor
                                        Vermeidung von eigener
                                        Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                    Charakter-Mapping in die
    font-family: MyIconFont;
                                        »Private Use Area«
                                        Keine Verwechselung mit echtem
    content: attr(data-icon);
                                        Inhalt durch Suchmaschinen
    speak: none;                        oder Screenreader
}
LÖSUNG

                                     Eigenes Markup erlaubt Einsatz

                   
                                     des aria-hidden Attributs
                                     Semantisch korrekt

                                     content-Erzeugung

                   HTML              durch Pseudo-Selektor
<span
                                     Generisches CSS dank
!     aria-hidden=“true“             HTML5 data-Attribut und
!     data-icon= “&#xE006“></span>   attribut-basiertem Selektor
                                     Vermeidung von eigener
                                     Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                 Charakter-Mapping in die
    font-family: MyIconFont;
                                     »Private Use Area«
                                     Keine Verwechselung mit echtem
    content: attr(data-icon);
                                     Inhalt durch Suchmaschinen
    speak: none;                     oder Screenreader
}
LÖSUNG

                                     Eigenes Markup erlaubt Einsatz

                   
                                     des aria-hidden Attributs
                                     Semantisch korrekt

                                     content-Erzeugung

                   HTML              durch Pseudo-Selektor
<span
                                     Generisches CSS dank
!     aria-hidden=“true“             HTML5 data-Attribut und
!     data-icon= “&#xE006“></span>   attribut-basiertem Selektor
                                     Vermeidung von eigener
                                     Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                 Charakter-Mapping in die
    font-family: MyIconFont;
                                     »Private Use Area«
                                     Keine Verwechselung mit echtem
    content: attr(data-icon);
                                     Inhalt durch Suchmaschinen
    speak: none;                     oder Screenreader
}
LÖSUNG

                                     Eigenes Markup erlaubt Einsatz

                   
                                     des aria-hidden Attributs
                                     Semantisch korrekt

                                     content-Erzeugung

                   HTML              durch Pseudo-Selektor
<span
                                     Generisches CSS dank
!     aria-hidden=“true“             HTML5 data-Attribut und
!     data-icon= “&#xE006“></span>   attribut-basiertem Selektor
                                     Vermeidung von eigener
                                     Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                 Charakter-Mapping in die
    font-family: MyIconFont;
                                     »Private Use Area«
                                     Keine Verwechselung mit echtem
    content: attr(data-icon);
                                     Inhalt durch Suchmaschinen
    speak: none;                     oder Screenreader
}
LÖSUNG

                                     Eigenes Markup erlaubt Einsatz

                   
                                     des aria-hidden Attributs
                                     Semantisch korrekt

                                     content-Erzeugung

                   HTML              durch Pseudo-Selektor
<span
                                     Generisches CSS dank
!     aria-hidden=“true“             HTML5 data-Attribut und
!     data-icon= “&#xE006“></span>   attribut-basiertem Selektor
                                     Vermeidung von eigener
                                     Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                 Charakter-Mapping in die
    font-family: MyIconFont;
                                     »Private Use Area«
                                     Keine Verwechselung mit echtem
    content: attr(data-icon);
                                     Inhalt durch Suchmaschinen
    speak: none;                     oder Screenreader
}
LÖSUNG

                                     Eigenes Markup erlaubt Einsatz

                   
                                     des aria-hidden Attributs
                                     Semantisch korrekt

                                     content-Erzeugung

                   HTML              durch Pseudo-Selektor
<span
                                     Generisches CSS dank
!     aria-hidden=“true“             HTML5 data-Attribut und
!     data-icon= “&#xE006“></span>   attribut-basiertem Selektor
                                     Vermeidung von eigener
                                     Klassen-Deklaration pro Icon
                   CSS
[data-icon]:before {                 Charakter-Mapping in die
    font-family: MyIconFont;
                                     »Private Use Area« (#E000 bis #F8FF)
                                     Keine Verwechslung mit echtem
    content: attr(data-icon);
                                     Inhalt durch Suchmaschinen
    speak: none;                     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Ü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
GEGENÜBERSTELLUNG




CSS-Sprite
                    Icon-Font
74 Icons in 20x20
59 kB               84 skalierbare Glyphen
                    14 – 24 kB je nach Format

Einzeldateien
                    CSS
68 Icons in 43x43   320 Byte
136 kB
GEGENÜBERSTELLUNG




CSS-Sprite
                    Icon-Font
74 Icons in 20x20
59 kB               84 skalierbare Glyphen
                    14 – 24 kB je nach Format

Einzeldateien


                                                            89
                    CSS
68 Icons in 43x43   320 Byte
136 kB                                          Ersparnis    %
VIELEN DANK



Markus Greve                              T +49 89 17860–150
KOCHAN & PARTNER                          E markus.greve@kochan.de
BRAND DESIGN DEVELOPMENT                   @mrmontezuma


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




© 2013 KOCHAN & PARTNER

Weitere ähnliche Inhalte

Ähnlich wie Icons im Web: Roundtrip for a better web experience

121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
Michael Jendryschik
 
FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
Verein FM Konferenz
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
Michael Jendryschik
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013
Markus Greve
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
Christoph Hautzinger
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 
HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013
Markus Greve
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"smueller_sandsmedia
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesigndjesse
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesigndjesse
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
emrox
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 

Ähnlich wie Icons im Web: Roundtrip for a better web experience (20)

121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 

Icons im Web: Roundtrip for a better web experience

  • 1. Icons im Web Roundtrip for a better Web experience Markus Greve GTUG Meetup 16. April 2013
  • 2. Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de  @mrmontezuma Slides http://de.slideshare.net/markusgreve
  • 6. 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)
  • 7.
  • 8.
  • 9.
  • 12. 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.
  • 14. BITMAPS GIF JPEG PNG
  • 16. BITMAPS | Populäre Websites Groupon Google Amazon
  • 17. VEKTOREN | Form f SWF SVG T Webfont Proprietäre Scaleable Vector Webfonts Vektorformate Graphics
  • 18. VEKTOREN | Form SWF f SVG T Webfont + Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
  • 21. 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)
  • 22. 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) ! ! ); }
  • 23. VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! ! color: #eee; ! text-shadow: ! ! 0px -6px 1px #666, ! ! 0px 6px 1px #fff; }
  • 24. 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( ! ! ... }
  • 26. SO BITTE NICHT... Auszug aus einem (ansonsten sehr gutem) »Tutorial«
  • 27. ZIELSETZUNG 1. Möglichst generischer Ansatz (Vermeidung Class-Bloat) 2. So wenig semantischer Overhead wie möglich 3. Screenreader-freundlich (!)
  • 28. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“>Ort</span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« Keine Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 29. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“></span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« Keine Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 30. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“></span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« Keine Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 31. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“></span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« Keine Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 32. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“></span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« Keine Verwechselung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 33. LÖSUNG Eigenes Markup erlaubt Einsatz  des aria-hidden Attributs Semantisch korrekt content-Erzeugung HTML durch Pseudo-Selektor <span Generisches CSS dank ! aria-hidden=“true“ HTML5 data-Attribut und ! data-icon= “&#xE006“></span> attribut-basiertem Selektor Vermeidung von eigener Klassen-Deklaration pro Icon CSS [data-icon]:before { Charakter-Mapping in die font-family: MyIconFont; »Private Use Area« (#E000 bis #F8FF) Keine Verwechslung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 35.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 44. PROZESS | Beispiel Entwurf AI EPS VFB Konvertierung T Webfont
  • 45. PROZESS | Beispiel Entwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont
  • 47. KONVERTIERUNG | IcoMoon Import: SVG-Grafik oder -Font Output: Webfont-Archiv, Muster-Seite
  • 48. KONVERTIERUNG | IcoMoon Einfache Korrekturen Download als Vorlage zur weiteren Bearbeitung
  • 49. KONVERTIERUNG | IcoMoon Export der gewählten Glyphen Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
  • 50. 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
  • 51. 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
  • 54. AUFGABE | Extranet Extranet für Vertriebspartner Anwendungsorientiert, Werkzeug Heterogene Zielgruppe & Ausstattung Internet Explorer ab Version 8 Stationäre PCs und mobile Endgeräte
  • 56. KLASSISCHER ANSATZ | CSS Sprite CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 61. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 62. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 63. GEGENÜBERSTELLUNG CSS-Sprite Icon-Font 74 Icons in 20x20 59 kB 84 skalierbare Glyphen 14 – 24 kB je nach Format Einzeldateien CSS 68 Icons in 43x43 320 Byte 136 kB
  • 64. GEGENÜBERSTELLUNG CSS-Sprite Icon-Font 74 Icons in 20x20 59 kB 84 skalierbare Glyphen 14 – 24 kB je nach Format Einzeldateien 89 CSS 68 Icons in 43x43 320 Byte 136 kB Ersparnis %
  • 65. VIELEN DANK Markus Greve T +49 89 17860–150 KOCHAN & PARTNER E markus.greve@kochan.de BRAND DESIGN DEVELOPMENT  @mrmontezuma Slides http://de.slideshare.net/markusgreve © 2013 KOCHAN & PARTNER