Reward & Punishment

of 41/41
Reward & Punishment or Progressive Enhancement & Intentional Degradation by Elliot Jay Stocks elliotjaystocks.com/geeknight
  • date post

    10-Dec-2014
  • Category

    Technology

  • view

    9.249
  • download

    3

Embed Size (px)

description

Elliot Jay Stocks' talk at Oxford Geek Night 3

Transcript of Reward & Punishment

  • 1. Reward & Punishment or Progressive Enhancement & Intentional Degradationby Elliot Jay Stocks elliotjaystocks.com/geeknight

2. What Is a Reward? 3. What Is a Reward? A visual treat for the more capable browser 4. What Is a Reward? A visual treat for the more capable browser, e.g:Drop shadows on text (CSS3 spec, Safari / Opera 9.5) Full PNG alpha transparency (no IE6 without hack)si8.shauninman.com 5. What Is a Reward? A visual treat for the more capable browser, e.g:Drop shadows on text (CSS3 spec, Safari / Opera 9.5) Full PNG alpha transparency (no IE6 without hack) 6. What Is a Punishment? 7. What Is a Punishment? A decision to REMOVE visual treats 8. What Is a Punishment? A decision to REMOVE visual treats The designer giveth... and the designer taketh away! Just because a browser supports a feature doesnt mean you have to offer it 9. What Is a Punishment? A decision to REMOVE visual treats The designer giveth... and the designer taketh away! Just because a browser supports a feature doesnt mean you have to offer it Dont be forced into hacking Feature support can require complex hacks and its often not necessary 10. What Is a Punishment? A decision to REMOVE visual treats The designer giveth... and the designer taketh away! Just because a browser supports a feature doesnt mean you have to offer it Dont be forced into hacking Feature support can require complex hacks and its often not necessary Dont compromise the neatness of your code Avoid littering markup with unnecessary classes and IDs 11. Reward & Punishment In Practice: elliotjaystocks.com 12. Reward & Punishment In Practice: elliotjaystocks.com To reduce the need for unnecessary class names, more advanced CSS selectors were used. 13. Reward & Punishment In Practice: elliotjaystocks.com To reduce the need for unnecessary class names, more advanced CSS selectors were used.These selectors are not supported by IE6 and as a result it lacks some of the visual treats... 14. Attribute Selectors ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;] { background:url(../images/hicksFavicon.ico) } 15. Attribute Selectors ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;] { background:url(../images/hicksFavicon.ico) } Safari IE6 16. Adjacent Sibling Selectors ol.portfolioList li h2+a:hover { border:none } 17. Adjacent Sibling Selectors ol.portfolioList li h2+a:hover { border:none } Safari IE6 18. Reward & Punishment In Practice: stuffandnonsense.co.uk Safari IE6 19. But Why Reward or Punish? 20. But Why Reward or Punish? Encourage users to adopt modern browsers 21. But Why Reward or Punish? Encourage users to adopt modern browsers Encourage browser vendors to create modern browsers 22. But Why Reward or Punish? Encourage users to adopt modern browsers Encourage browser vendors to create modern browsers Push technology and ideologies forward 23. A Word of Warning 24. A Word of Warning Not suitable in some commercial environments 25. A Word of Warning Not suitable in some commercial environments Pay attention to client requirements 26. A Word of Warning Not suitable in some commercial environments Pay attention to client requirements Adapt to suit your target audience 27. When In Doubt... 28. When In Doubt... ... use a badge! 29. Accessibility: Catering For Users Without Resorting To Punishment 30. Accessibility: Catering For Users Without Resorting To Punishment In some circumstances, a browsers lack of support for certain features can ruin the user experience. 31. Accessibility: Catering For Users Without Resorting To Punishment In some circumstances, a browsers lack of support for certain features can ruin the user experience.In this instance, alternative display systems should be considered. 32. Problem: JS Tab Navigation The absolute positioning used to display the different information boxes on rollover is rendered useless if the user has Javascript disabled. 33. Solution: Specific Styles For Javascript-Disabled Users 34. Solution: Specific Styles For Javascript-Disabled Users 1. Use Javascript to write the class of hasJavascript to the tag. No Javascript? No hasJavascript class! 35. Solution: Specific Styles For Javascript-Disabled Users 1. Use Javascript to write the class of hasJavascript to the tag. No Javascript? No hasJavascript class!2. Use CSS to style descendants of hasJavascript differently; e.g: body div { background:#000 } body.hasJavascript div { background:#fff } 36. Solution: Specific Styles For Javascript-Disabled Users Users without Javascript see a completely different navigation system. Hurrah! 37. Conclusion 38. Conclusion Decide whether to reward or punish: - What are the browsers capabilities? - Who is the target user / browser? 39. Conclusion Decide whether to reward or punish: - What are the browsers capabilities? - Who is the target user / browser? Be gentle: - Proceed with caution - Consider displaying a warning badge 40. Conclusion Decide whether to reward or punish: - What are the browsers capabilities? - Who is the target user / browser? Be gentle: - Proceed with caution - Consider displaying a warning badge Stay accessible: - Usability is more important than punishment - If necessary, offer alternative styling for different browsers 41. Thank You elliotjaystocks.com/geeknight