Reward & Punishment

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

description

Elliot Jay Stocks' talk at Oxford Geek Night 3

Transcript of Reward & Punishment

Page 1: Reward & Punishment

Reward & Punishment or Progressive Enhancement & Intentional Degradation

by Elliot Jay Stockselliotjaystocks.com/geeknight

Page 2: Reward & Punishment

What Is a Reward?

Page 3: Reward & Punishment

What Is a Reward?A visual treat for the more capable browser

Page 4: Reward & Punishment

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

Page 5: Reward & Punishment

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)

Page 6: Reward & Punishment

What Is a Punishment?

Page 7: Reward & Punishment

What Is a Punishment?A decision to REMOVE visual treats

Page 8: Reward & Punishment

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

Page 9: Reward & Punishment

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 hackingFeature support can require complex hacks and it’s often not necessary

Page 10: Reward & Punishment

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 hackingFeature support can require complex hacks and it’s often not necessary

• Don’t compromise the neatness of your codeAvoid littering markup with unnecessary classes and IDs

Page 11: Reward & Punishment

Reward & PunishmentIn Practice: elliotjaystocks.com

Page 12: Reward & Punishment

Reward & PunishmentIn Practice: elliotjaystocks.com

To reduce the need for unnecessary class names, more advanced CSS selectors were used.

Page 13: Reward & Punishment

Reward & PunishmentIn 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...

Page 14: Reward & Punishment

Attribute Selectorsul.blogroll li a[href="http://hicksdesign.co.uk"] { background:url(../images/hicksFavicon.ico) }

Page 15: Reward & Punishment

Attribute Selectorsul.blogroll li a[href="http://hicksdesign.co.uk"] { background:url(../images/hicksFavicon.ico) }

Safari IE6

Page 16: Reward & Punishment

Adjacent Sibling Selectorsol.portfolioList li h2+a:hover { border:none }

Page 17: Reward & Punishment

Adjacent Sibling Selectorsol.portfolioList li h2+a:hover { border:none }

Safari IE6

Page 18: Reward & Punishment

Reward & PunishmentIn Practice: stuffandnonsense.co.uk

Safari IE6

Page 19: Reward & Punishment

But Why Reward or Punish?

Page 20: Reward & Punishment

But Why Reward or Punish?

• Encourage users to adopt modern browsers

Page 21: Reward & Punishment

But Why Reward or Punish?

• Encourage users to adopt modern browsers

• Encourage browser vendors to create modern browsers

Page 22: Reward & Punishment

But Why Reward or Punish?

• Encourage users to adopt modern browsers

• Encourage browser vendors to create modern browsers

• Push technology and ideologies forward

Page 23: Reward & Punishment

A Word of Warning

Page 24: Reward & Punishment

A Word of Warning

• Not suitable in some commercial environments

Page 25: Reward & Punishment

A Word of Warning

• Not suitable in some commercial environments

• Pay attention to client requirements

Page 26: Reward & Punishment

A Word of Warning

• Not suitable in some commercial environments

• Pay attention to client requirements

• Adapt to suit your target audience

Page 27: Reward & Punishment

When In Doubt...

Page 28: Reward & Punishment

When In Doubt...... use a badge!

Page 29: Reward & Punishment

Accessibility: Catering For Users Without Resorting To Punishment

Page 30: Reward & Punishment

Accessibility: Catering For Users Without Resorting To PunishmentIn some circumstances, a browser’s lack of support for certain features can ruin the user experience.

Page 31: Reward & Punishment

Accessibility: Catering For Users Without Resorting To PunishmentIn 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.

Page 32: Reward & Punishment

Problem: JS Tab NavigationThe absolute positioning used to display the different information boxes on rollover is rendered useless if the user has Javascript disabled.

Page 33: Reward & Punishment

Solution: Specific Styles For Javascript-Disabled Users

Page 34: Reward & Punishment

Solution: Specific Styles For Javascript-Disabled Users1. Use Javascript to write the class of hasJavascript to the <body> tag. No Javascript? No hasJavascript class!

Page 35: Reward & Punishment

Solution: Specific Styles For Javascript-Disabled Users1. 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 }

Page 36: Reward & Punishment

Solution: Specific Styles For Javascript-Disabled UsersUsers without Javascript see a completely different navigation system. Hurrah!

Page 37: Reward & Punishment

Conclusion

Page 38: Reward & Punishment

Conclusion• Decide whether to reward or punish:

- What are the browser’s capabilities?- Who is the target user / browser?

Page 39: Reward & Punishment

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’

Page 40: Reward & Punishment

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

Page 41: Reward & Punishment

Thank Youelliotjaystocks.com/geeknight