Progressive Enhancement & Intentional Degradation 2Font Embedding & New Design Possibilities

by Elliot Jay Stockselliotjaystocks.com | twitter.com/elliotjaystocks

1

2

3

4

5

6

7

Enhancement & degradation

A personal typographic journey

Enhancing web typography

We have issues

New possibilities with CSS3

Start using it NOW

Controversial parting thought

1Enhancement & 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

Shouldwebsites lookthe same in

all browsers?

shouldwebsiteslookthesameinallbrowsers.com

2A 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 replacementPROS

It looks goodIt gives control over other elements besides type

Image replacementPROS

It looks goodIt gives control over other elements besides type

CONS

Difficult to updateInaccessible in some situationsPotentially 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

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

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

“

”

Font embedding

Font embedding

Browser-supported font embedding is, I believe, the future of web typography.

The future of web typography3

@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.1Firefox 3.1Opera 10

@font-face

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

Extremely simple to implement.

Current support:Safari 3.1Firefox 3.1Opera 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="text/css" media="screen">

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

</style>

<!--[if IE]><style type="text/css" media="screen">

@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="text/css" media="screen">

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

</style>

<!--[if IE]><style type="text/css" media="screen">

@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="text/css" media="screen">

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

</style>

<!--[if IE]><style type="text/css" media="screen">

@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="text/css" media="screen">

@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="text/css" media="screen">

@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="text/css" media="screen">

@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

4We 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!

5New 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 layoutBackgrounds

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

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 }

Some of the new features

Advanced layoutBackgroundsBorders

Borders: radius

div.vcard { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }

Borders: image

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

Some of the new features

Advanced layoutBackgroundsBordersBox shadows

Borders: image

div.info { box-shadow:10px 10px 5px #888; }

Some of the new features

Advanced layoutBackgroundsBordersBox shadowsMulti-column layout

Multiple column layouts

div.article { column-count:2; column-gap:20px }

Some of the new features

Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectors

Nth child selectors

tr:nth-child(odd) td { background:#999 }

Some of the new features

Advanced layoutBackgroundsBordersBox shadowsMulti-column layoutSelectorsText shadows

Text shadows

p { text-shadow:1px 2px 1px #000 }

6Start using it NOW

dictionary.reference.com/browse/progressive

“”

Progressive

Favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are.

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

7Controversial parting thought

Validationis 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 1CSS3.info css3.info

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

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

Jina Bolton: Creating Sexy Stylesheetshttp://creatingsexystylesheets.com

Jina Bolton: CSS3 and what could becreatingsexystylesheets.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 closerwebdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer

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

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

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

Richard Rutter: The future of web font embeddingclagnut.com/blog/2166

Further reading, part 2W3C: CSS3 module: Web Fontsw3.org/TR/css3-webfonts

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

Web Fonts: Fonts available for @font-face embeddingwebfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding

Sexy Web Designby Elliot Jay StocksExpert reviewers: Jina Bolton & Dan Rubin

Published by SitePoint in March

Shameless plug!

Thank you!

elliotjaystocks.com | twitter.com/elliotjaystocks

Cover background image by Samantha Cliffe - samanthacliffe.comChapter background image from ilovetypography.com/lovePin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158Additional imagery by me