Progressive Enhancement & Intentional Degradation 2

8,275 views

Published on

Published in: Technology, Art & Photos
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,275
On SlideShare
0
From Embeds
0
Number of Embeds
321
Actions
Shares
0
Downloads
88
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

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
  3. 1 Enhancement & Degradation
  4. Enhancement: reward
  5. Enhancement: reward Visual treats for the more capable browser
  6. Degradation: punishment
  7. Degradation: punishment The removal of a treat
  8. Degradation: punishment The removal of a treat The designer giveth and the designer taketh away!
  9. Intention
  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?
  13. shouldwebsiteslookthesameinallbrowsers.com
  14. 2 A personal typographic journey
  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
  24. Back to basics: HTML
  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!
  28. Image replacement
  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
  39. Font embedding
  40. Font embedding Browser-supported font embedding is, I believe, the future of web typography.
  41. 3 The future of web typography
  42. @font-face
  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
  48. Microsoft’s EOT (Embedded Open Type)
  49. Microsoft’s EOT (Embedded Open Type) Supported since IE4
  50. 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
  60. 4 We have issues
  61. The issues
  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!
  69. 5 New possibilities with CSS3
  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
  74. Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip
  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
  91. 6 Start using it NOW
  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
  93. Thomas Silkjær theundersigned.net (Safari)
  94. ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css
  95. Thomas Silkjær theundersigned.net (Firefox)
  96. Sam Brown sam.brown.tc
  97. 24 Ways 24ways.org
  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
  104. 7 Controversial parting thought
  105. Validation is irrelevant
  106. Yes, yes, bear with me...
  107. Yes, yes, bear with me... New techniques won’t validate...
  108. Validation errors jigsaw.w3.org/css-validator
  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
  111. Jon Hicks hicksdesign.co.uk/journal
  112. Jon Hicks hicksdesign.co.uk/journal
  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
  116. Validation
  117. does
  118. not
  119. equal
  120. conformity
  121. to
  122. Web
  123. Standards
  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

×