Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    4 Favorites

    Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degradation (Web Directions South 2009) - Presentation Transcript

    1. What are we worried about?
    2. What are we worried about? Some users see ‘broken’ sites.
    3. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar
    4. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand!
    5. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry)
    6. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry) Missing rounded corners don’t matter!
    7. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
    8. Fearful forabeautifulweb.com/s/598
    9. “ ” Great article, thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients. Comments from Smashing Magazine readers on j.mp/smashingcss3
    10. “ ” I hope CSS3 will be a standard in the near future, right now you cant really use anything of it ’cause not every browser supports it. Comments from Smashing Magazine readers on j.mp/smashingcss3
    11. “ CSS 3 rocks. Unfortunately we need to stay at ” least 5 more years with CSS 2.1 if we want to offer the same design to each user (what in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3
    12. “ I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with ” things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being. Comments from Smashing Magazine readers on j.mp/smashingcss3
    13. “ ” CSS3 looks really good however because of IE it will be long time before I start using it. Comments from Smashing Magazine readers on j.mp/smashingcss3
    14. These arguments are complete and utter bullshit
    15. If 98% of the users can’t see a text-shadow, it doesn’t matter, but it’ll be a nice enrichment for the 2% of users who can
    16. Tap Tap Tap taptaptap.com
    17. Tweet CC tweetcc.com
    18. Fusion Ads fusionads.net
    19. Fusion Ads fusionads.net
    20. Progressive means progressive
    21. Progressive means progressive Fall-back solutions (JS on and off?)
    22. Barclaycard online admin barclaycard.co.uk
    23. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them
    24. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them Use progressive enrichment in your dull, corporate sites — the sexy stuff is an add-on, so it’s fine!
    25. Do websites need to look exactly the same in every browser?
    26. dowebsitesneedtolookexactlythesameineverybrowser.com
    27. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers
    28. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way
    29. Jon Tan: “ Designers will use [technologies like Flash, PDF, and hacks like embedding type in images] [...] because they won’t have to deal with painful inconsistencies between user agents; the bane ” of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars. Display Type & the Raster Wars j.mp/jontan
    30. Bookmark these URLs Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Web Typography (Richard Rutter) webtypography.net
    31. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way So stop trying to reach the unreachable! Embrace the differences
    32. Enhancement: reward
    33. Enhancement: reward Visual treats for the more capable browser
    34. Degradation: punishment
    35. Degradation: punishment The removal of a treat
    36. Degradation: punishment The removal of a treat The designer giveth and the designer taketh away!
    37. Intention
    38. Intention An awareness of browser capabilities and the appreciation that sites don’t need to look in the same in each one. Stuff and Nonsense stuffandnonsense.co.uk
    39. Usability vs. aesthetics
    40. Usability vs. aesthetics Usability / accessibility / functionality = very important
    41. Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!
    42. The experience
    43. The experience Beauty is the experience’s visual layer
    44. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience
    45. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion
    46. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer
    47. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer (See Dan Mall’s FOWD presentation: events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)
    48. The experience layer “ Our emotions change the way we think ” and serve as constant guides to appropriate behaviour, steering us away from the bad and guiding us towards the good. Donald Norman, Emotional Design
    49. Variety in web design. I can haz it?
    50. BORING
    51. BORING
    52. BORING
    53. BORING
    54. BORING
    55. BORING
    56. BORING
    57. BORING
    58. BORING
    59. Who’s pushing things forward?
    60. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    61. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    62. Made By Elephant madebyelephant.com
    63. Atebits atebits.com
    64. Atebits atebits.com/tweetie-mac/
    65. 24 Ways 24ways.org
    66. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    67. Stack Overflow stackoverflow.carsonified.com
    68. Carsonified Events events.carsonified.com
    69. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    70. Born Living bornliving.com
    71. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    72. Jason Santa Maria jasonsantamaria.com
    73. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
    74. Squared Eye squaredeye.com/work/featured/family-life-network/
    75. Squared Eye squaredeye.com/work/featured/family-life-network/
    76. Squared Eye squaredeye.com/work/featured/family-life-network/
    77. Squared Eye squaredeye.com/work/featured/family-life-network/
    78. Squared Eye squaredeye.com/work/featured/family-life-network/
    79. Squared Eye squaredeye.com/work/featured/family-life-network/
    80. The nicer your site looks...
    81. The nicer your site looks... ... the longer your visitors will look at it...
    82. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website...
    83. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website... ... and the longer they spend on your website, the easier it will be for you to sell them your product or service
    84. Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.
    85. N G IN l : A R W oversia con tr t at en ! em ing st ch ap p r oa
    86. Validation is irrelevant
    87. Yes, yes. Bear with me...
    88. Yes, yes. Bear with me... New techniques won’t validate...
    89. Validation errors jigsaw.w3.org/css-validator
    90. Validator suggestions css3.info/the-big-css3-validation-debate/
    91. The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/
    92. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error Validator suggestions css3.info/the-big-css3-validation-debate/
    93. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error The validator could mark such code as ‘experimental’ rather than an error or warning Validator suggestions css3.info/the-big-css3-validation-debate/
    94. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!
    95. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation
    96. Jon Hicks hicksdesign.co.uk/journal
    97. Jon Hicks hicksdesign.co.uk/journal
    98. <b>
    99. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } Intentional invalidation in hicksdesign.co.uk/css/layout-9.css
    100. 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
    101. Validation
    102. does
    103. not
    104. equal
    105. conformity
    106. to
    107. Web
    108. Standards
    109. We’re looking at it in the wrong way
    110. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative
    111. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive
    112. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse
    113. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse Ensure a good experience for most; a great one for some
    114. It’s not just about making things look pretty. Forward-thinking code means a future-proof website.
    115. 10%
    116. 10% of users today will be 100% of users tomorrow
    117. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline
    118. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users
    119. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users New CSS techniques will never become mainstream if we designers aren’t using them
    120. @
    121. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
    122. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
    123. A personal typographic journey...
    124. Note: CS3 panel shown Dreamweaver adobe.com/products/dreamweaver
    125. The early days... ... Dreamweaver... ... confusion!
    126. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide
    127. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts
    128. 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
    129. The allure of Flash
    130. The allure of Flash You can use any font you like
    131. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency)
    132. 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
    133. Back to basics: HTML
    134. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing
    135. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing Updatable: the source text dictates the final render
    136. 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!
    137. Image replacement
    138. Image replacement PROS It looks good It gives control over other elements besides type
    139. 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
    140. sIFR at work on Jason Santa Maria’s site jasonsantamaria.com
    141. sIFR
    142. 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
    143. 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
    144. 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
    145. “ 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
    146. “ 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
    147. “ 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
    148. @font-face
    149. @font-face Originated in the CSS2 spec, despite its general association with CSS3
    150. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement
    151. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement Current support: Safari (since 3.1) Firefox 3.5 Opera 10
    152. @font-face Originated in the CSS2 spec, despite its general association with CSS3 Extremely simple to implement Current support: Safari (since 3.1) Firefox 3.5 Opera 10 Has some piracy issues (more on that in a sec!)
    153. Jos Buivenga’s fonts josbuivenga.demon.nl
    154. IE4!!!
    155. Microsoft’s EOT (Embedded Open Type)
    156. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet)
    157. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy
    158. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy EOT was submitted to the W3C for approval as a new standard. As far as I know, it was rejected
    159. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet) Font encoding protects against piracy EOT was submitted to the W3C for approval as a new standard. As far as I know, it was rejected WEFT: Web Embedding Fonts Tool for making .eot files
    160. The issues
    161. The issues Protection is needed for font foundries to counteract font piracy (as with EOT)
    162. 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
    163. 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
    164. What needs to happen?
    165. What needs to happen? Font foundries need to be protected by the technology, as they are with EOT
    166. 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... it now has multiple browser support
    167. 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... it now has multiple browser support Start using font embedding now!
    168. 2009: the year web typography started to grow up
    169. Typekit typekit.com
    170. Fontdeck fontdeck.com
    171. Kernest kernest.com
    172. Typekit, FontDeck, et al Multiple foundries
    173. Typotheque typotheque.com
    174. Typotheque, et al Foundry-specific system
    175. Some recent articles I’ve written on the subject The font-as-service: ilovetypography.com/the-font-as-service/ More reasons to get excited about Typekit: elliotjaystocks.com
    176. .webfont
    177. .webfont This is where it gets exciting!
    178. .webfont This is where it gets exciting! A recommendation for a new standard
    179. .webfont This is where it gets exciting! A recommendation for a new standard Two files: font data + info.xml
    180. .webfont This is where it gets exciting! A recommendation for a new standard Two files: font data + info.xml Built-in copyright protection
    181. Some handy CSS3 features
    182. Some handy CSS3 features Advanced layout
    183. Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip
    184. Some handy CSS3 features Advanced layout Backgrounds
    185. 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
    186. 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
    187. 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
    188. 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
    189. Some handy CSS3 features Advanced layout Backgrounds Borders
    190. div.vcard { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; } Borders: radius
    191. div.vcard { border-image:url(border.png) 10 10 10 10 round round; } Borders: image
    192. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows
    193. div.info { box-shadow:10px 10px 5px #888; } Borders: image
    194. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout
    195. div.article { column-count:2; column-gap:20px } Multiple column layouts
    196. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors
    197. tr:nth-child(odd) td { background:#999 } Nth child selectors
    198. Some handy CSS3 features Advanced layout Backgrounds Borders Box shadows Multi-column layout Selectors Text shadows
    199. p { text-shadow:1px 2px 1px #000 } Text shadows
    200. Sam Brown sam.brown.tc
    201. Tim Van Damme timvandamme.com
    202. Web Directions webdirections.org
    203. All the small things
    204. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier
    205. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors
    206. <ul class="blogroll"> <li> <a href="http://shauninman.com">Shaun Inman</a> </li> <li> <a href="http://mezzoblue.com">Dave Shea</a> </li> <li> <a href="http://hicksdesign.co.uk">Jon Hicks</a> </li> </ul> HTML with no need for class names on each <li>
    207. ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors
    208. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors
    209. Fusion Ads fusionads.net/blog/
    210. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors And if a browser doesn’t support these things... ... so what?
    211. Thomas Silkjær theundersigned.net (Safari)
    212. ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css
    213. Thomas Silkjær theundersigned.net (Firefox)
    214. Progressive “ ” Favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are. dictionary.reference.com/browse/progressive
    215. Don’t fear degradation: plan for it
    216. Slides will be available online at elliotjaystocks.com/speaking/
    217. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251
    218. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint

    + elliotjaystockselliotjaystocks, 1 month ago

    custom

    453 views, 4 favs, 1 embeds more stats

    Slides from my appearance at Web Directions South 0 more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 453
      • 372 on SlideShare
      • 81 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 14
    Most viewed embeds
    • 81 views on http://www.webdirections.org

    more

    All embeds
    • 81 views on http://www.webdirections.org

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories