Date post: | 10-Dec-2014 |
Category: |
Technology |
Upload: | elliotjaystocks |
View: | 5,984 times |
Download: | 1 times |
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