SlideShare a Scribd company logo
Progressive Enhancement &
Intentional Degradation 2
Font Embedding & New Design Possibilities




by Elliot Jay Stocks
elliotjaystocks.com | twitter.com/elliotjaystocks
1   Enhancement & degradation

2   A personal typographic journey

3   Enhancing web typography

4   We have issues

5   New possibilities with CSS3

6   Start using it NOW

7   Controversial parting thought
1
Enhancement & Degradation
Enhancement: reward
Enhancement: reward

Visual treats for the more capable browser
Degradation: punishment
Degradation: punishment

The removal of a treat
Degradation: punishment

The removal of a treat

The designer giveth and the designer taketh away!
Intention
Intention

An awareness of browser capabilities and the
appreciation that sites don’t need to look in
the same in each one.
Intention

An awareness of browser capabilities and the
appreciation that sites don’t need to look in
the same in each one.
Safari                            IE6




Stuff and Nonsense stuffandnonsense.co.uk
Should
websites look
 the same in
all browsers?
shouldwebsiteslookthesameinallbrowsers.com
2
A personal typographic journey
The early days...
... Dreamweaver...
... confusion!
The early days...
... Dreamweaver...
... confusion!

The choice of fonts appeared
to be system-wide
Note: CS3 panel shown




Dreamweaver adobe.com/products/dreamweaver
The early days...
... Dreamweaver...
... confusion!

The choice of fonts appeared
to be system-wide

It wasn’t clear about web-safe fonts
The early days...
... Dreamweaver...
... confusion!

The choice of fonts appeared
to be system-wide

It wasn’t clear about web-safe fonts

To an extent, Dreamweaver
is still guilty
The allure of Flash
The allure of Flash

You can use any font you liked
The allure of Flash

You can use any font you like

Layout freedom, a la print design
(vs. HTML inconsistency)
The allure of Flash

You can use any font you like

Layout freedom, a la print design
(vs. HTML inconsistency)

Hence type can be presented
as intended
Back to basics: HTML
Back to basics: HTML

Accessible:
screenreader-friendly and allows for resizing
Back to basics: HTML

Accessible:
screenreader-friendly and allows for resizing

Updatable:
the source text dictates the final render
Back to basics: HTML

Accessible:
screenreader-friendly and allows for resizing

Updatable:
the source text dictates the final render

Simple:
HTML and CSS — that’s it!
Image replacement
Image replacement
PROS

  It looks good
  It gives control over other elements besides type
Image replacement
PROS

  It looks good
  It gives control over other elements besides type


CONS

  Difficult to update
  Inaccessible in some situations
  Potentially it differs from the source code
sIFR
sIFR at work on Jason Santa Maria’s site jasonsantamaria.com
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.




* = Layout is still determined by HTML
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.

Gracefully degrades for users without Flash / JS.




* = Layout is still determined by HTML
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.

Gracefully degrades for users without Flash / JS.

It’s brilliant, but essentially it’s a hack; not a
solution.


* = Layout is still determined by HTML
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is but a nice stopgap for people who value the
    importance of typography and don’t want to wait 1, 5,
    or 10 years for browser makers, OS vendors, and type
    foundries to figure out a better solution.

    The moment that happens however, sIFR will lift right


                                                                 ”
    out and give way to whatever other method is available.

    ~ Mike Davidson



    Mike Davidson, mikeindustries.com/blog/sifr
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is but a nice stopgap for people who value the
    importance of typography and don’t want to wait 1, 5,
    or 10 years for browser makers, OS vendors, and type
    foundries to figure out a better solution.

    The moment that happens however, sIFR will lift right


                                                                 ”
    out and give way to whatever other method is available.

    ~ Mike Davidson



    Mike Davidson, mikeindustries.com/blog/sifr
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is but a nice stopgap for people who value the
    importance of typography and don’t want to wait 1, 5,
    or 10 years for browser makers, OS vendors, and type
    foundries to figure out a better solution.

    The moment that happens however, sIFR will lift right


                                                                 ”
    out and give way to whatever other method is available.

    ~ Mike Davidson



    Mike Davidson, mikeindustries.com/blog/sifr
Font embedding
Font embedding

Browser-supported font embedding is, I believe,
the future of web typography.
3
The future of web typography
@font-face
@font-face

Originated in the CSS2 spec, despite its general
association with CSS3.
@font-face

Originated in the CSS2 spec, despite its general
association with CSS3.

Extremely simple to implement.
@font-face

Originated in the CSS2 spec, despite its general
association with CSS3.

Extremely simple to implement.

Current support:
   Safari 3.1
   Firefox 3.1
   Opera 10
@font-face

Originated in the CSS2 spec, despite its general
association with CSS3.

Extremely simple to implement.

Current support:
   Safari 3.1
   Firefox 3.1
   Opera 10

Has some piracy issues. (More on that in a sec!)
Jos Buivenga’s fonts josbuivenga.demon.nl
Microsoft’s EOT
(Embedded Open Type)
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4
IE4!!!
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4 (but not in IE8 yet).

Font encoding protects against piracy.
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4 (but not in IE8 yet).

Font encoding protects against piracy.

EOT has been submitted to the W3C for approval
as a new standard. Discussions are still underway.
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4 (but not in IE8 yet).

Font encoding protects against piracy.

EOT has been submitted to the W3C for approval
as a new standard. Discussions are still underway.

WEFT: Web Embedding Fonts Tool for making
.eot files.
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       }

</style>
<![endif]-->



jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       }

</style>
<![endif]-->



jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       }

</style>
<![endif]-->



jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src: url('Fontin-Regular.eot');
       src: url('Fontin-Regular.otf') format('opentype');
       }

</style>




Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
4
We have issues
The issues
The issues

Protection is needed for font foundries to
counteract font piracy (as with EOT).
The issues

Protection is needed for font foundries to
counteract font piracy (as with EOT).

How do we cope with licenses? Mozilla proposes
including license data in HTTP headers.
The issues

Protection is needed for font foundries to
counteract font piracy (as with EOT).

How do we cope with licenses? Mozilla proposes
including license data in HTTP headers.

More fonts need to be made available so that the
choice can improve. In its current state, the
limited choice is turning into not much more than
an alternative list of web-safe fonts.
What needs to happen?
What needs to happen?

Font foundries need to be protected by the
technology, as they are with EOT.
What needs to happen?

Font foundries need to be protected by the
technology, as they are with EOT.

Font embedding is the path to typographic
enlightenment on the web... when it eventually
receives multiple browser support.
What needs to happen?

Font foundries need to be protected by the
technology, as they are with EOT.

Font embedding is the path to typographic
enlightenment on the web... when it eventually
receives multiple browser support.

Start using font embedding now!
5
New possibilities with CSS3
I won’t say too much
I won’t say too much

But there are some exciting bits...
Some of the new features
Some of the new features

Advanced layout
Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip
Some of the new features

Advanced layout
Backgrounds
div.shoutbox {
background:
    url(top.gif) top left no-repeat,
    url(middle.gif) left repeat-y,
    url(bottom.gif) bottom left no-repeat
    }




Multiple background images
div.shoutbox {
background:
    url(top.gif) top left no-repeat,
    url(middle.gif) left repeat-y,
    url(bottom.gif) bottom left no-repeat
    }




Multiple background images
div.shoutbox {
background:
    url(top.gif) top left no-repeat,
    url(middle.gif) left repeat-y,
    url(bottom.gif) bottom left no-repeat
    }




Multiple background images
div.shoutbox {
background:
    url(top.gif) top left no-repeat,
    url(middle.gif) left repeat-y,
    url(bottom.gif) bottom left no-repeat
    }




Multiple background images
Some of the new features

Advanced layout
Backgrounds
Borders
div.vcard {
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    }




Borders: radius
div.vcard {
    border-image:url(border.png) 10 10 10 10 round round;
    }




Borders: image
Some of the new features

Advanced layout
Backgrounds
Borders
Box shadows
div.info {
    box-shadow:10px 10px 5px #888;
    }




Borders: image
Some of the new features

Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
div.article {
    column-count:2;
    column-gap:20px
    }




Multiple column layouts
Some of the new features

Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
tr:nth-child(odd) td {
    background:#999
    }




Nth child selectors
Some of the new features

Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
Text shadows
p{
     text-shadow:1px 2px 1px #000
     }




Text shadows
6
Start using it NOW
Progressive


“
        Favoring or advocating progress, change,
        improvement, or reform, as opposed to


                                              ”
        wishing to maintain things as they are.




dictionary.reference.com/browse/progressive
Thomas Silkjær theundersigned.net (Safari)
ul.gallery li:hover {
    webkit-transform:rotate:(-2.5deg);
    }




theundersigned.net/wp-content/themes/default/style.css
Thomas Silkjær theundersigned.net (Firefox)
Sam Brown sam.brown.tc
24 Ways 24ways.org
Tim Van Damme timvandamme.com
Web Directions North north.webdirections.org
Website don’t need to look
the same in every browser
Website don’t need to look
the same in every browser

At the basic level, your site should look
acceptable in most browsers, especially
the target ones
Website don’t need to look
the same in every browser

At the basic level, your site should look
acceptable in most browsers, especially
the target ones

Add enhancements for newer browsers
Website don’t need to look
the same in every browser

At the basic level, your site should look
acceptable in most browsers, especially
the target ones

Add enhancements for newer browsers

Don’t fear degradation - plan for it
7
Controversial parting thought
Validation
is irrelevant
Yes, yes, bear with me...
Yes, yes, bear with me...

New techniques won’t validate...
Validation errors jigsaw.w3.org/css-validator
Yes, yes, bear with me...

New techniques won’t validate...

... and it doesn’t matter!
Yes, yes, bear with me...

New techniques won’t validate...

... and it doesn’t matter!

Recognise the value of intentional invalidation
Jon Hicks hicksdesign.co.uk/journal
Jon Hicks hicksdesign.co.uk/journal
#tops b {
    display:block;
    float:right;
    width:333px;
    height:15px;
    background:url(/images/paulsmith.gif) no-repeat;
    }




hicksdesign.co.uk/css/layout-9.css
<b>
Yes, yes, bear with me...

New techniques won’t validate...

... and it doesn’t matter!

Recognise the value of intentional invalidation

Validation does not equal conformity to Web
Standards: you can build a site with tables and a
complete lack of semantics yet still have it
validate
Validation
does
not
equal
conformity
to
Web
Standards
Further reading, part 1
CSS3.info
css3.info

Design Shack: Introduction to CSS3
designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

Elliot Jay Stocks Progressive Enhancement & Intentional Degradation 1
elliotjaystocks.com/geeknight

Jina Bolton: Creating Sexy Stylesheets
http://creatingsexystylesheets.com

Jina Bolton: CSS3 and what could be
creatingsexystylesheets.com/css3andwhatcouldbe.zip

Jon Allsopp: The return of font embedding to the web?
webdirections.org/blog/the-return-of-font-embedding-to-the-web

Jon Allsopp: Ubiquitous web font embedding just got a step closer
webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer

Jon Tan: @font-face in IE: Making Web Fonts Work
jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

Microsoft: Font embedding in IE4
msdn.microsoft.com/en-us/library/ms533034.aspx

Microsoft: WEFT 3
microsoft.com/typography/web/embedding/weft3/default.htm

Richard Rutter: The future of web font embedding
clagnut.com/blog/2166
Further reading, part 2
W3C: CSS3 module: Web Fonts
w3.org/TR/css3-webfonts

W3C: For & against standardizing font embedding
w3.org/Fonts/Misc/eot-report-2008

Web Fonts: Fonts available for @font-face embedding
webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
Shameless plug!

Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin


Published by SitePoint in March
Thank you!



elliotjaystocks.com | twitter.com/elliotjaystocks
Cover background image by Samantha Cliffe - samanthacliffe.com
Chapter background image from ilovetypography.com/love
Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158
Additional imagery by me

More Related Content

Viewers also liked

Catedra dialectica
Catedra dialectica Catedra dialectica
Catedra dialectica
fabian1070
 
Phoenix Fashion Week 2015 Sponsor Deck
Phoenix Fashion Week 2015 Sponsor DeckPhoenix Fashion Week 2015 Sponsor Deck
Phoenix Fashion Week 2015 Sponsor Deck
TecnoKal International Marketing and Technology Consulting
 
Las 3X's de Harel
Las 3X's de HarelLas 3X's de Harel
Las 3X's de Harel
migueldelgado
 
Deloitte Digital Democracy Survey
Deloitte Digital Democracy SurveyDeloitte Digital Democracy Survey
Deloitte Digital Democracy Survey
OptimediaSpain
 
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
FollowAnalytics
 
My ATD Webcast with Qstream: Stop Wasting Money on Sales Training
My ATD Webcast with Qstream: Stop Wasting Money on Sales TrainingMy ATD Webcast with Qstream: Stop Wasting Money on Sales Training
My ATD Webcast with Qstream: Stop Wasting Money on Sales Training
Mike Kunkle
 
Kinesthetic and Visual Learning In The Math Classroom
Kinesthetic and Visual Learning In The Math ClassroomKinesthetic and Visual Learning In The Math Classroom
Kinesthetic and Visual Learning In The Math Classroom
Benjamin Hanson
 
WLAN (Wireless Local Area Network)
WLAN (Wireless Local Area Network)WLAN (Wireless Local Area Network)
WLAN (Wireless Local Area Network)
malepaz14
 
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
CMX
 
SISTEMA SOLAR-FERRAN-2014
SISTEMA SOLAR-FERRAN-2014SISTEMA SOLAR-FERRAN-2014
SISTEMA SOLAR-FERRAN-2014
nacladera
 
Cantos amigonianos
Cantos amigonianosCantos amigonianos
Cantos amigonianos
embfr
 
Mundo phonak
Mundo phonakMundo phonak
Mundo phonak
Marta Montoro
 
Business Analytics as a Service
Business Analytics as a ServiceBusiness Analytics as a Service
Business Analytics as a Service
Arrow ECS UK
 
Proyecto Solidario Con Ta Hen, CAMBOYA
Proyecto Solidario Con Ta Hen, CAMBOYAProyecto Solidario Con Ta Hen, CAMBOYA
Proyecto Solidario Con Ta Hen, CAMBOYA
guestf7e47
 
F4 leccion3 2
F4 leccion3 2F4 leccion3 2
F4 leccion3 2
Ulises Metallero
 
Ejemplo 2 aurora serrano
Ejemplo 2 aurora serranoEjemplo 2 aurora serrano
Ejemplo 2 aurora serrano
honey_aurora
 
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
Al Marge. espai d'art
 
Pastor aleman
Pastor alemanPastor aleman
Pastor aleman
sarcorp
 
Leoni Plus PräSent Hfo Eng
Leoni Plus PräSent Hfo EngLeoni Plus PräSent Hfo Eng
Leoni Plus PräSent Hfo Eng
rushdir
 
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
Herrera Paulina
 

Viewers also liked (20)

Catedra dialectica
Catedra dialectica Catedra dialectica
Catedra dialectica
 
Phoenix Fashion Week 2015 Sponsor Deck
Phoenix Fashion Week 2015 Sponsor DeckPhoenix Fashion Week 2015 Sponsor Deck
Phoenix Fashion Week 2015 Sponsor Deck
 
Las 3X's de Harel
Las 3X's de HarelLas 3X's de Harel
Las 3X's de Harel
 
Deloitte Digital Democracy Survey
Deloitte Digital Democracy SurveyDeloitte Digital Democracy Survey
Deloitte Digital Democracy Survey
 
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
Unify Your Email and Push Strategies to Build Amazing, Seamless Customer Expe...
 
My ATD Webcast with Qstream: Stop Wasting Money on Sales Training
My ATD Webcast with Qstream: Stop Wasting Money on Sales TrainingMy ATD Webcast with Qstream: Stop Wasting Money on Sales Training
My ATD Webcast with Qstream: Stop Wasting Money on Sales Training
 
Kinesthetic and Visual Learning In The Math Classroom
Kinesthetic and Visual Learning In The Math ClassroomKinesthetic and Visual Learning In The Math Classroom
Kinesthetic and Visual Learning In The Math Classroom
 
WLAN (Wireless Local Area Network)
WLAN (Wireless Local Area Network)WLAN (Wireless Local Area Network)
WLAN (Wireless Local Area Network)
 
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
Matthew Brimer, Founder of General Assembly, on Creating Amazing Community Ev...
 
SISTEMA SOLAR-FERRAN-2014
SISTEMA SOLAR-FERRAN-2014SISTEMA SOLAR-FERRAN-2014
SISTEMA SOLAR-FERRAN-2014
 
Cantos amigonianos
Cantos amigonianosCantos amigonianos
Cantos amigonianos
 
Mundo phonak
Mundo phonakMundo phonak
Mundo phonak
 
Business Analytics as a Service
Business Analytics as a ServiceBusiness Analytics as a Service
Business Analytics as a Service
 
Proyecto Solidario Con Ta Hen, CAMBOYA
Proyecto Solidario Con Ta Hen, CAMBOYAProyecto Solidario Con Ta Hen, CAMBOYA
Proyecto Solidario Con Ta Hen, CAMBOYA
 
F4 leccion3 2
F4 leccion3 2F4 leccion3 2
F4 leccion3 2
 
Ejemplo 2 aurora serrano
Ejemplo 2 aurora serranoEjemplo 2 aurora serrano
Ejemplo 2 aurora serrano
 
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
Al Marge.espai d'art". Vicente Colom, Javier Chapa, Horacio Silva,
 
Pastor aleman
Pastor alemanPastor aleman
Pastor aleman
 
Leoni Plus PräSent Hfo Eng
Leoni Plus PräSent Hfo EngLeoni Plus PräSent Hfo Eng
Leoni Plus PräSent Hfo Eng
 
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
Contabilidad financiera resumen de las unidades 1, 2, 3, 4, 5 y 6
 

Similar to Progressive Enhancement & Intentional Degradation 2

Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
Trent Walton
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
Jeffrey Barke
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
Zohar Arad
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
RZasadzinski
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
Monotype
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
Yves Van Goethem
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
Jenn Lukas
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
Rich Quick
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Jenn Lukas
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
elliotjaystocks
 
Hardboiled Web Design - English
Hardboiled Web Design - EnglishHardboiled Web Design - English
Hardboiled Web Design - English
CIWire s.r.o.
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
elliotjaystocks
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
elliotjaystocks
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
Rich Quick
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
brinsknaps
 
Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
Simratpreet Singh
 
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
Ovadiah Myrgorod
 
Migrating Web SDK from JS to TS
Migrating Web SDK from JS to TSMigrating Web SDK from JS to TS
Migrating Web SDK from JS to TS
Grigory Petrov
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 

Similar to Progressive Enhancement & Intentional Degradation 2 (20)

Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
 
Hardboiled Web Design - English
Hardboiled Web Design - EnglishHardboiled Web Design - English
Hardboiled Web Design - English
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
 
Migrating Web SDK from JS to TS
Migrating Web SDK from JS to TSMigrating Web SDK from JS to TS
Migrating Web SDK from JS to TS
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 

More from elliotjaystocks

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessman
elliotjaystocks
 
The Story of 8 Faces
The Story of 8 FacesThe Story of 8 Faces
The Story of 8 Faces
elliotjaystocks
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
elliotjaystocks
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
elliotjaystocks
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effects
elliotjaystocks
 
I Care Because You Do
I Care Because You DoI Care Because You Do
I Care Because You Do
elliotjaystocks
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
elliotjaystocks
 
Print Is The New Web
Print Is The New WebPrint Is The New Web
Print Is The New Web
elliotjaystocks
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
elliotjaystocks
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
elliotjaystocks
 
Reward & Punishment
Reward & PunishmentReward & Punishment
Reward & Punishment
elliotjaystocks
 
FOWD November 2007
FOWD November 2007FOWD November 2007
FOWD November 2007
elliotjaystocks
 

More from elliotjaystocks (12)

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessman
 
The Story of 8 Faces
The Story of 8 FacesThe Story of 8 Faces
The Story of 8 Faces
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effects
 
I Care Because You Do
I Care Because You DoI Care Because You Do
I Care Because You Do
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
Print Is The New Web
Print Is The New WebPrint Is The New Web
Print Is The New Web
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
 
Reward & Punishment
Reward & PunishmentReward & Punishment
Reward & Punishment
 
FOWD November 2007
FOWD November 2007FOWD November 2007
FOWD November 2007
 

Recently uploaded

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdfARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
Inglês no Mundo Digital
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 

Recently uploaded (20)

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdfARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 

Progressive Enhancement & Intentional Degradation 2

  • 1. Progressive Enhancement & Intentional Degradation 2 Font Embedding & New Design Possibilities by Elliot Jay Stocks elliotjaystocks.com | twitter.com/elliotjaystocks
  • 2. 1 Enhancement & degradation 2 A personal typographic journey 3 Enhancing web typography 4 We have issues 5 New possibilities with CSS3 6 Start using it NOW 7 Controversial parting thought
  • 5. Enhancement: reward Visual treats for the more capable browser
  • 8. Degradation: punishment The removal of a treat The designer giveth and the designer taketh away!
  • 10. Intention An awareness of browser capabilities and the appreciation that sites don’t need to look in the same in each one.
  • 11. Intention An awareness of browser capabilities and the appreciation that sites don’t need to look in the same in each one. Safari IE6 Stuff and Nonsense stuffandnonsense.co.uk
  • 12. Should websites look the same in all browsers?
  • 15. The early days... ... Dreamweaver... ... confusion!
  • 16. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide
  • 17. Note: CS3 panel shown Dreamweaver adobe.com/products/dreamweaver
  • 18. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts
  • 19. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts To an extent, Dreamweaver is still guilty
  • 20. The allure of Flash
  • 21. The allure of Flash You can use any font you liked
  • 22. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency)
  • 23. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency) Hence type can be presented as intended
  • 25. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing
  • 26. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing Updatable: the source text dictates the final render
  • 27. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing Updatable: the source text dictates the final render Simple: HTML and CSS — that’s it!
  • 29. Image replacement PROS It looks good It gives control over other elements besides type
  • 30. Image replacement PROS It looks good It gives control over other elements besides type CONS Difficult to update Inaccessible in some situations Potentially it differs from the source code
  • 31. sIFR
  • 32. sIFR at work on Jason Santa Maria’s site jasonsantamaria.com
  • 33. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of)* the benefits of Flash-based rendering. * = Layout is still determined by HTML
  • 34. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of)* the benefits of Flash-based rendering. Gracefully degrades for users without Flash / JS. * = Layout is still determined by HTML
  • 35. sIFR The best of both worlds: the accessibility and ‘selectability’ of HTML but with (some of)* the benefits of Flash-based rendering. Gracefully degrades for users without Flash / JS. It’s brilliant, but essentially it’s a hack; not a solution. * = Layout is still determined by HTML
  • 36. While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right ” out and give way to whatever other method is available. ~ Mike Davidson Mike Davidson, mikeindustries.com/blog/sifr
  • 37. While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right ” out and give way to whatever other method is available. ~ Mike Davidson Mike Davidson, mikeindustries.com/blog/sifr
  • 38. While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right ” out and give way to whatever other method is available. ~ Mike Davidson Mike Davidson, mikeindustries.com/blog/sifr
  • 40. Font embedding Browser-supported font embedding is, I believe, the future of web typography.
  • 41. 3 The future of web typography
  • 43. @font-face Originated in the CSS2 spec, despite its general association with CSS3.
  • 44. @font-face Originated in the CSS2 spec, despite its general association with CSS3. Extremely simple to implement.
  • 45. @font-face Originated in the CSS2 spec, despite its general association with CSS3. Extremely simple to implement. Current support: Safari 3.1 Firefox 3.1 Opera 10
  • 46. @font-face Originated in the CSS2 spec, despite its general association with CSS3. Extremely simple to implement. Current support: Safari 3.1 Firefox 3.1 Opera 10 Has some piracy issues. (More on that in a sec!)
  • 47. Jos Buivenga’s fonts josbuivenga.demon.nl
  • 49. Microsoft’s EOT (Embedded Open Type) Supported since IE4
  • 51. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy.
  • 52. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy. EOT has been submitted to the W3C for approval as a new standard. Discussions are still underway.
  • 53. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy. EOT has been submitted to the W3C for approval as a new standard. Discussions are still underway. WEFT: Web Embedding Fonts Tool for making .eot files.
  • 54. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.otf') format('opentype'); } </style> <!--[if IE]> <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); } </style> <![endif]--> jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  • 55. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.otf') format('opentype'); } </style> <!--[if IE]> <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); } </style> <![endif]--> jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  • 56. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.otf') format('opentype'); } </style> <!--[if IE]> <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); } </style> <![endif]--> jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  • 57. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); src: url('Fontin-Regular.otf') format('opentype'); } </style> Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
  • 58. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); src: url('Fontin-Regular.otf') format('opentype'); } </style> Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
  • 59. <style type=quot;text/cssquot; media=quot;screenquot;> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); src: url('Fontin-Regular.otf') format('opentype'); } </style> Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web
  • 62. The issues Protection is needed for font foundries to counteract font piracy (as with EOT).
  • 63. The issues Protection is needed for font foundries to counteract font piracy (as with EOT). How do we cope with licenses? Mozilla proposes including license data in HTTP headers.
  • 64. The issues Protection is needed for font foundries to counteract font piracy (as with EOT). How do we cope with licenses? Mozilla proposes including license data in HTTP headers. More fonts need to be made available so that the choice can improve. In its current state, the limited choice is turning into not much more than an alternative list of web-safe fonts.
  • 65. What needs to happen?
  • 66. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT.
  • 67. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT. Font embedding is the path to typographic enlightenment on the web... when it eventually receives multiple browser support.
  • 68. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT. Font embedding is the path to typographic enlightenment on the web... when it eventually receives multiple browser support. Start using font embedding now!
  • 70. I won’t say too much
  • 71. I won’t say too much But there are some exciting bits...
  • 72. Some of the new features
  • 73. Some of the new features Advanced layout
  • 75. Some of the new features Advanced layout Backgrounds
  • 76. div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat } Multiple background images
  • 77. div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat } Multiple background images
  • 78. div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat } Multiple background images
  • 79. div.shoutbox { background: url(top.gif) top left no-repeat, url(middle.gif) left repeat-y, url(bottom.gif) bottom left no-repeat } Multiple background images
  • 80. Some of the new features Advanced layout Backgrounds Borders
  • 81. div.vcard { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; } Borders: radius
  • 82. div.vcard { border-image:url(border.png) 10 10 10 10 round round; } Borders: image
  • 83. Some of the new features Advanced layout Backgrounds Borders Box shadows
  • 84. div.info { box-shadow:10px 10px 5px #888; } Borders: image
  • 85. Some of the new features Advanced layout Backgrounds Borders Box shadows Multi-column layout
  • 86. div.article { column-count:2; column-gap:20px } Multiple column layouts
  • 87. Some of the new features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors
  • 88. tr:nth-child(odd) td { background:#999 } Nth child selectors
  • 89. Some of the new features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors Text shadows
  • 90. p{ text-shadow:1px 2px 1px #000 } Text shadows
  • 92. Progressive “ Favoring or advocating progress, change, improvement, or reform, as opposed to ” wishing to maintain things as they are. dictionary.reference.com/browse/progressive
  • 94. ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css
  • 98. Tim Van Damme timvandamme.com
  • 99. Web Directions North north.webdirections.org
  • 100. Website don’t need to look the same in every browser
  • 101. Website don’t need to look the same in every browser At the basic level, your site should look acceptable in most browsers, especially the target ones
  • 102. Website don’t need to look the same in every browser At the basic level, your site should look acceptable in most browsers, especially the target ones Add enhancements for newer browsers
  • 103. Website don’t need to look the same in every browser At the basic level, your site should look acceptable in most browsers, especially the target ones Add enhancements for newer browsers Don’t fear degradation - plan for it
  • 106. Yes, yes, bear with me...
  • 107. Yes, yes, bear with me... New techniques won’t validate...
  • 109. Yes, yes, bear with me... New techniques won’t validate... ... and it doesn’t matter!
  • 110. Yes, yes, bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation
  • 113. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } hicksdesign.co.uk/css/layout-9.css
  • 114. <b>
  • 115. Yes, yes, bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation Validation does not equal conformity to Web Standards: you can build a site with tables and a complete lack of semantics yet still have it validate
  • 117. does
  • 118. not
  • 119. equal
  • 121. to
  • 122. Web
  • 124. Further reading, part 1 CSS3.info css3.info Design Shack: Introduction to CSS3 designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it Elliot Jay Stocks Progressive Enhancement & Intentional Degradation 1 elliotjaystocks.com/geeknight Jina Bolton: Creating Sexy Stylesheets http://creatingsexystylesheets.com Jina Bolton: CSS3 and what could be creatingsexystylesheets.com/css3andwhatcouldbe.zip Jon Allsopp: The return of font embedding to the web? webdirections.org/blog/the-return-of-font-embedding-to-the-web Jon Allsopp: Ubiquitous web font embedding just got a step closer webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer Jon Tan: @font-face in IE: Making Web Fonts Work jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work Microsoft: Font embedding in IE4 msdn.microsoft.com/en-us/library/ms533034.aspx Microsoft: WEFT 3 microsoft.com/typography/web/embedding/weft3/default.htm Richard Rutter: The future of web font embedding clagnut.com/blog/2166
  • 125. Further reading, part 2 W3C: CSS3 module: Web Fonts w3.org/TR/css3-webfonts W3C: For & against standardizing font embedding w3.org/Fonts/Misc/eot-report-2008 Web Fonts: Fonts available for @font-face embedding webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
  • 126. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint in March
  • 127. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Cover background image by Samantha Cliffe - samanthacliffe.com Chapter background image from ilovetypography.com/love Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158 Additional imagery by me