SlideShare ist ein Scribd-Unternehmen logo
Typographische Gesellschaft München




                    (Bild)Zeichen erobern
                     die Webtypografie ...

                                      Ein Überblick


Markus Greve
Zum Webfontday 2012 »Type goes Interface«
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO
MOTIVATION
BITMAPS VS. VEKTOREN
INTEGRATION
QUELLEN
HERSTELLUNG
DEMO




                WARUM?
       Oder: warum gerade jetzt?
DISPLAY-ENTWICKLUNG




             2012
DISPLAY-ENTWICKLUNG




          2012
          November – 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


          2012
          November – 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)
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Was kommt
als nächstes?
4K
3.280 x 2.160
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«
                                     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
Wbfntdy 2012
»...pixel-perfect at
multiples of 28px...«
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
Wbfntdy 2012
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
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


Demos, Links, Ressourcen  http://www.kochan.de/wbfntdy/iconfonts/
Slides  http://de.slideshare.net/markusgreve/wbfntdy-2012




© 2012 KOCHAN & PARTNER

Weitere ähnliche Inhalte

Ähnlich wie Wbfntdy 2012

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
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
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
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
emrox
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
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 webdesign
djesse
 
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
Patrick Lauke
 
XHTML
XHTMLXHTML
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
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
 
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
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
Fabian Jakobs
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Infopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsInfopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on Rails
JustRelate
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
Daniel Fisher
 

Ähnlich wie Wbfntdy 2012 (20)

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)
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
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
 
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
 
XHTML
XHTMLXHTML
XHTML
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
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)
 
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
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Infopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsInfopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on Rails
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 

Mehr von Markus Greve

Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen Web
Markus Greve
 
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionierenMobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Markus Greve
 
HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014
Markus Greve
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 
A Firefox OS app in five minutes
A Firefox OS app in five minutesA Firefox OS app in five minutes
A Firefox OS app in five minutes
Markus Greve
 
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
 
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
 

Mehr von Markus Greve (7)

Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen Web
 
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionierenMobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
 
HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
A Firefox OS app in five minutes
A Firefox OS app in five minutesA Firefox OS app in five minutes
A Firefox OS app in five minutes
 
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
 
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
 

Wbfntdy 2012

  • 1. Typographische Gesellschaft München (Bild)Zeichen erobern die Webtypografie ... Ein Überblick Markus Greve Zum Webfontday 2012 »Type goes Interface«
  • 5. DISPLAY-ENTWICKLUNG 2012 November – 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)
  • 6. DISPLAY-ENTWICKLUNG 2012 November – 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)
  • 13. BITMAPS GIF JPEG PNG
  • 15. BITMAPS | Populäre Websites Groupon Google Amazon
  • 16. VEKTOREN | Form f SWF SVG T Webfont Proprietäre Scaleable Vector Webfonts Vektorformate Graphics
  • 17. VEKTOREN | Form SWF f SVG T Webfont + Keine PlugIns erforderlich Plattform-übergreifend verfügbar Zusammenfassung verschiedener Formen in einer Datei
  • 20. 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)
  • 21. 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) ! ! ); }
  • 22. VEKTOREN | CSS3 – Text-Effekte .basics { ... } .background { ... }! .foreground {! ! color: #eee; ! text-shadow: ! ! 0px -6px 1px #666, ! ! 0px 6px 1px #fff; }
  • 23. 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( ! ! ... }
  • 25. SO BITTE NICHT... Auszug aus einem (ansonsten sehr gutem) »Tutorial«
  • 26. ZIELSETZUNG 1. Möglichst generischer Ansatz (Vermeidung »Class-Bloat«) 2. So wenig semantischer Overhead wie möglich 3. Screenreader-freundlich (!)
  • 27. 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 }
  • 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“></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 Verwechslung mit echtem content: attr(data-icon); Inhalt durch Suchmaschinen speak: none; oder Screenreader }
  • 43. PROZESS | Beispiel Entwurf AI EPS VFB Konvertierung T Webfont
  • 44. PROZESS | Beispiel Entwurf ggf. notwendige Zwischenformate AI EPS VFB SVG Konvertierung T Webfont
  • 46. KONVERTIERUNG | IcoMoon Import: SVG-Grafik oder -Font Output: Webfont-Archiv, Muster-Seite
  • 47. KONVERTIERUNG | IcoMoon Einfache Korrekturen Download als Vorlage zur weiteren Bearbeitung
  • 48. KONVERTIERUNG | IcoMoon Export der gewählten Glyphen Encoding wahlweise »Basic Latin« oder »Private Use Area« (Default)
  • 49. 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
  • 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
  • 53. AUFGABE | Extranet Extranet für Vertriebspartner Anwendungsorientiert, Werkzeug Heterogene Zielgruppe & Ausstattung Internet Explorer ab Version 8 Stationäre PCs und mobile Endgeräte
  • 54. KLASSISCHER ANSATZ | CSS Sprite CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 59. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 60. GEGENÜBERSTELLUNG CSS-Sprite 74 Icons in 20x20 59 kB Einzeldateien 68 Icons in 43x43 136 kB
  • 61. 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
  • 62. 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 %
  • 63.  VIELEN DANK Markus Greve T +49 89 17860–150 KOCHAN & PARTNER E markus.greve@kochan.de BRAND DESIGN DEVELOPMENT  @mrmontezuma Demos, Links, Ressourcen  http://www.kochan.de/wbfntdy/iconfonts/ Slides  http://de.slideshare.net/markusgreve/wbfntdy-2012 © 2012 KOCHAN & PARTNER