SlideShare a Scribd company logo
1 of 41
Download to read offline
Reward & Punishment
or Progressive Enhancement & Intentional Degradation

by Elliot Jay Stocks
elliotjaystocks.com/geeknight
What Is a Reward?
What Is a Reward?
A visual treat for the more capable browser
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
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)
What Is a Punishment?
What Is a Punishment?
A decision to REMOVE visual treats
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
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
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
Reward & Punishment
In Practice: elliotjaystocks.com
Reward & Punishment
In Practice: elliotjaystocks.com
To reduce the need for unnecessary class names, more
advanced CSS selectors were used.
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...
Attribute Selectors
ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;]
{ background:url(../images/hicksFavicon.ico) }
Attribute Selectors
ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;]
{ background:url(../images/hicksFavicon.ico) }

     Safari                                 IE6
Adjacent Sibling Selectors
ol.portfolioList li h2+a:hover { border:none }
Adjacent Sibling Selectors
ol.portfolioList li h2+a:hover { border:none }


Safari                       IE6
Reward & Punishment
In Practice: stuffandnonsense.co.uk
Safari               IE6
But Why Reward or Punish?
But Why Reward or Punish?
• Encourage users to adopt modern browsers
But Why Reward or Punish?
• Encourage users to adopt modern browsers
• Encourage browser vendors to create modern browsers
But Why Reward or Punish?
• Encourage users to adopt modern browsers
• Encourage browser vendors to create modern browsers
• Push technology and ideologies forward
A Word of Warning
A Word of Warning
• Not suitable in some commercial environments
A Word of Warning
• Not suitable in some commercial environments
• Pay attention to client requirements
A Word of Warning
• Not suitable in some commercial environments
• Pay attention to client requirements
• Adapt to suit your target audience
When In Doubt...
When In Doubt...
... use a badge!
Accessibility:
Catering For Users Without
Resorting To Punishment
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.
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.
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.
Solution: Specific Styles For
Javascript-Disabled Users
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!
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 }
Solution: Specific Styles For
Javascript-Disabled Users
Users without Javascript see a completely different
navigation system. Hurrah!
Conclusion
Conclusion
• Decide whether to reward or punish:
  - What are the browser’s capabilities?
  - Who is the target user / browser?
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’
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
Thank You
elliotjaystocks.com/geeknight

More Related Content

What's hot

Behavior modification
Behavior modificationBehavior modification
Behavior modificationSushma Rathee
 
BF Skinner- Operant Conditioning
BF Skinner- Operant Conditioning BF Skinner- Operant Conditioning
BF Skinner- Operant Conditioning singhajay92
 
Action Research Concept - PPT
Action Research Concept - PPTAction Research Concept - PPT
Action Research Concept - PPTArun Joseph
 
Learning& behavior-modification
Learning& behavior-modificationLearning& behavior-modification
Learning& behavior-modificationBusines
 
Adlerian Theory of Personality.pdf
Adlerian Theory of Personality.pdfAdlerian Theory of Personality.pdf
Adlerian Theory of Personality.pdfmnmn70607
 
Guidance and counselling services
Guidance and counselling servicesGuidance and counselling services
Guidance and counselling servicesyusnithamerang
 
Behaviorism Theory of Learning
Behaviorism Theory of LearningBehaviorism Theory of Learning
Behaviorism Theory of Learningguestfa5a5c
 
Classical conditioning theory
Classical conditioning theoryClassical conditioning theory
Classical conditioning theoryDr. Manju N D
 
Ethical dilemma in teaching
Ethical dilemma in teachingEthical dilemma in teaching
Ethical dilemma in teachingMOE, Fiji
 
About Aims, Objectives, Goals and Ends
About Aims, Objectives, Goals and EndsAbout Aims, Objectives, Goals and Ends
About Aims, Objectives, Goals and EndsGabriela Catepón
 
Reinforcement in classroom
Reinforcement in classroomReinforcement in classroom
Reinforcement in classroomashimagarg89
 
Classroom action research ppt
Classroom action research pptClassroom action research ppt
Classroom action research pptEndah Nurbedah
 
Evaluation of guidance program
Evaluation of guidance programEvaluation of guidance program
Evaluation of guidance programNazish Jamali
 
ppt 4 module 5 Roe
ppt 4 module 5 Roeppt 4 module 5 Roe
ppt 4 module 5 RoeRASBorja
 
Guidance and counseling
Guidance and counselingGuidance and counseling
Guidance and counselingNinn Jha
 

What's hot (20)

Action research
Action researchAction research
Action research
 
Behavior modification
Behavior modificationBehavior modification
Behavior modification
 
BF Skinner- Operant Conditioning
BF Skinner- Operant Conditioning BF Skinner- Operant Conditioning
BF Skinner- Operant Conditioning
 
Action Research Concept - PPT
Action Research Concept - PPTAction Research Concept - PPT
Action Research Concept - PPT
 
Learning& behavior-modification
Learning& behavior-modificationLearning& behavior-modification
Learning& behavior-modification
 
Adlerian Theory of Personality.pdf
Adlerian Theory of Personality.pdfAdlerian Theory of Personality.pdf
Adlerian Theory of Personality.pdf
 
Guidance and counselling services
Guidance and counselling servicesGuidance and counselling services
Guidance and counselling services
 
Behaviorism Theory of Learning
Behaviorism Theory of LearningBehaviorism Theory of Learning
Behaviorism Theory of Learning
 
Classical conditioning theory
Classical conditioning theoryClassical conditioning theory
Classical conditioning theory
 
Ethical dilemma in teaching
Ethical dilemma in teachingEthical dilemma in teaching
Ethical dilemma in teaching
 
About Aims, Objectives, Goals and Ends
About Aims, Objectives, Goals and EndsAbout Aims, Objectives, Goals and Ends
About Aims, Objectives, Goals and Ends
 
Motivation at work
Motivation at workMotivation at work
Motivation at work
 
Learning
LearningLearning
Learning
 
Reinforcement in classroom
Reinforcement in classroomReinforcement in classroom
Reinforcement in classroom
 
Classroom action research ppt
Classroom action research pptClassroom action research ppt
Classroom action research ppt
 
Evaluation of guidance program
Evaluation of guidance programEvaluation of guidance program
Evaluation of guidance program
 
ppt 4 module 5 Roe
ppt 4 module 5 Roeppt 4 module 5 Roe
ppt 4 module 5 Roe
 
Guidance and counseling
Guidance and counselingGuidance and counseling
Guidance and counseling
 
Career counselling
Career counsellingCareer counselling
Career counselling
 
Coliton_behaviorism
Coliton_behaviorismColiton_behaviorism
Coliton_behaviorism
 

Similar to Reward & Punishment

We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6elliotjaystocks
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web DevelopmentDivya Manian
 
It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3Denise Jacobs
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
Conquering Gef Part2: Building graphical web-apps with Eclipse
Conquering Gef Part2: Building graphical web-apps with EclipseConquering Gef Part2: Building graphical web-apps with Eclipse
Conquering Gef Part2: Building graphical web-apps with EclipseVineet Sinha
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-frameworkDamien Oh
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptKevin Read
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Kevin Read
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backDenise Jacobs
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Mythselliotjaystocks
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...Marco Cedaro
 
Building Your Own Native App Visual Testing Module with Appium by Wim Selles
Building Your Own Native App Visual Testing Module with Appium by Wim SellesBuilding Your Own Native App Visual Testing Module with Appium by Wim Selles
Building Your Own Native App Visual Testing Module with Appium by Wim SellesSauce Labs
 
Building Your Own Native App Visual Testing Module with Appium
Building Your Own Native App  Visual Testing Module with AppiumBuilding Your Own Native App  Visual Testing Module with Appium
Building Your Own Native App Visual Testing Module with AppiumWim Selles
 
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...railsconf
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 

Similar to Reward & Punishment (20)

We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web Development
 
It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
CSS 3
CSS 3CSS 3
CSS 3
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Conquering Gef Part2: Building graphical web-apps with Eclipse
Conquering Gef Part2: Building graphical web-apps with EclipseConquering Gef Part2: Building graphical web-apps with Eclipse
Conquering Gef Part2: Building graphical web-apps with Eclipse
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking back
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Building Your Own Native App Visual Testing Module with Appium by Wim Selles
Building Your Own Native App Visual Testing Module with Appium by Wim SellesBuilding Your Own Native App Visual Testing Module with Appium by Wim Selles
Building Your Own Native App Visual Testing Module with Appium by Wim Selles
 
Building Your Own Native App Visual Testing Module with Appium
Building Your Own Native App  Visual Testing Module with AppiumBuilding Your Own Native App  Visual Testing Module with Appium
Building Your Own Native App Visual Testing Module with Appium
 
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 

More from elliotjaystocks

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessmanelliotjaystocks
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designerselliotjaystocks
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)elliotjaystocks
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...elliotjaystocks
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)elliotjaystocks
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effectselliotjaystocks
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks
 

More from elliotjaystocks (14)

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessman
 
The Story of 8 Faces
The Story of 8 FacesThe Story of 8 Faces
The Story of 8 Faces
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effects
 
I Care Because You Do
I Care Because You DoI Care Because You Do
I Care Because You Do
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
Print Is The New Web
Print Is The New WebPrint Is The New Web
Print Is The New Web
 
FOWD November 2007
FOWD November 2007FOWD November 2007
FOWD November 2007
 

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Recently uploaded (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

Reward & Punishment

  • 1. Reward & Punishment or Progressive Enhancement & Intentional Degradation by 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 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
  • 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!
  • 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