The document discusses strategies for web designers to handle support for different browsers using techniques of "reward and punishment". Rewarding involves using advanced features only in modern browsers, while punishment removes visual features from outdated browsers like IE6. However, accessibility is important, so alternative designs may be needed to ensure a good experience for all users. The key is deciding which browsers to support based on capabilities and intended audience, then implementing strategies gently and with consideration for usability across browsers.

1. We need to talk about IE6
Support and non-support in a Standards-aware world
by Elliot Jay Stocks
elliotjaystocks.com/skillswap

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 doesn’t 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 doesn’t mean
you have to offer it
• Don’t be forced into hacking
Feature support can require complex hacks and it’s 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 doesn’t mean
you have to offer it
• Don’t be forced into hacking
Feature support can require complex hacks and it’s often
not necessary
• Don’t 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 browser’s lack of support
for certain features can ruin the user experience.

31. Accessibility:
Catering For Users Without
Resorting To Punishment
In some circumstances, a browser’s 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 <body> 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 <body> 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 browser’s capabilities?
- Who is the target user / browser?

39. Conclusion
• Decide whether to reward or punish:
- What are the browser’s 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 browser’s 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