SlideShare a Scribd company logo
1 of 32
Yahoo! Graded Browser Support
The game of global Internet domination
John Kary | johnkary@ku.edu
Web Development & Interface Design
University of Kansas, Information Technology
November 2010 KU Web Developers Meeting
‣   Browser Wars
‣   Yahoo! GBS
‣   GBS at KU
Early Browser Wars




              Image: http://en.wikipedia.org/wiki/Netscape_Navigator
Early Browser Wars




              Image: http://en.wikipedia.org/wiki/Netscape_Navigator
Early Browser Wars




            Image: http://en.wikipedia.org/wiki/History_of_Internet_Explorer
Early Browser Wars




         Image: http://www.teamlalala.com/blog/2009/12/23/best-viewed-in-netscape-3-0/
Current Browser Wars




          Image: http://www.toy-tma.com/learning-toys/board-games/risk-board-game-rule/
Current Browser Wars




                         Image: http://commons.wikimedia.org/wiki/File:Risk_board.svg
           Image: http://www.ashersarlin.com/archives/2004/09/honestly_who_co.php
Current Browser Wars




       ?
  XP
Yahoo! Graded Browser Support
            (or GBS)
What is it?

 Survey
 Select
Advocate
GBS – November 2010




              Source: http://developer.yahoo.com/yui/articles/gbs/
Why?
Supporting GBS means ensuring core content and functionality is...


  1. Accessible without images, CSS or JS
  2. Accessible using only a Keyboard
  3. Accessible by older browsers, but hides
     all advanced functionality prompts are

                 You see the pattern here...
“”
                                               Why?

                                       Availability and accessibility of
                                    content should be our key priority.
What Does “Support” Mean?
http://developer.yahoo.com/yui/articles/gbs/




Expecting two users using different browser software to have an identical
experience fails to embrace or acknowledge the heterogeneous essence of the Web.

                                                                     What Does “Support” Mean?
                                                      http://developer.yahoo.com/yui/articles/gbs/
Support?


         As web developers,
how do we "support" a specific browser?
Support?


We allow every user to consume as much visual and
interactive richness as their environment can support.
                                                  What Does “Support” Mean?
                                   http://developer.yahoo.com/yui/articles/gbs/
How are Grades of Support Determined?


   Identified or Unknown

      Common or Rare

   Capable or Incapable

   Modern vs Antiquated
Grades

C-grade
A-grade
X-grade
C-grade
                 HTML       YES
                 CSS        NO
                 JavaScript NO


Minimum level of support for a guaranteed experience

Content delivered only as semantic HTML
CSS and JS are withheld

Sample of browsers tested
C-grade
    HTML       YES
    CSS        NO
    JavaScript NO
IDENTIFIED   vs   UNKNOWN
COMMON       vs   RARE
CAPABLE      vs   INCAPABLE
MODERN       vs   ANTIQUATED

          IE < 6
       Firefox < 3
A-grade
               HTML       YES
               CSS        YES
               JavaScript YES

Highest level of support

Content is fully delivered

Fully tested
A-grade
    HTML       YES
    CSS        YES
    JavaScript YES
IDENTIFIED   vs   UNKNOWN
COMMON       vs   RARE
CAPABLE      vs   INCAPABLE
MODERN       vs   ANTIQUATED

     Chrome on XP
    IE 8 on XP and 7
X-grade
              HTML       YES
              CSS        YES
              JavaScript YES

Mid-level level of support

Content is fully delivered

NOT tested
X-grade
    HTML       YES
    CSS        YES
    JavaScript YES

IDENTIFIED   vs   UNKNOWN
COMMON       vs   RARE
CAPABLE      vs   INCAPABLE
MODERN       vs   ANTIQUATED
        Maxthon
         Flock
GBS – November 2010




              Source: http://developer.yahoo.com/yui/articles/gbs/
Updates



www.yuiblog.com
   Issued quarterly
Q4 2010 Updates

•   Chrome updates a lot, XP Chrome is best benchmark
•   Added A-grade for WebKit browsers on iOS & Android
•   Move Firefox < 3 to C-grade
•   Forecast A-grade for Firefox 4 & IE9 on Windows 7
    upon release
•   Forecast moving IE6 from A-grade to C-grade in
    Q1 2011


                                    Source: http://yuiblog.com/blog/2010/11/03/gbs-update-2010q4/
GBS at KU

•   We target all A-grade browsers
•   Don’t (currently) withhold CSS/JS from old browsers
•   Will drop IE6 “support” in next template (date unknown)
Browser Stats at KU
          www.ku.edu
      2,000,000 visits per month




36%    32% 24%                     7%
                                   Source: Google Analytics
Browser Stats at KU
       www.ku.edu
   2,000,000 visits per month



                   36%
                IE8     26%
                IE7     8%
                IE6     0.01%   (27,000)



                                           Source: Google Analytics
Questions?




             Source: http://xkcd.com/519/

More Related Content

Similar to YUI Graded Browser Support

Progressive enhancement 2.0 what i'd like to share to designers
Progressive enhancement 2.0  what i'd like to share to designersProgressive enhancement 2.0  what i'd like to share to designers
Progressive enhancement 2.0 what i'd like to share to designers
rita
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
Zoe Gillenwater
 
jQuery From the Ground Up
jQuery From the Ground UpjQuery From the Ground Up
jQuery From the Ground Up
Kevin Griffin
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Netbeans65 Osum Slides
Netbeans65 Osum SlidesNetbeans65 Osum Slides
Netbeans65 Osum Slides
Abhishek Gupta
 

Similar to YUI Graded Browser Support (20)

Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level Overview
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
 
Do you need jQuery in 2019?
Do you need jQuery in 2019?Do you need jQuery in 2019?
Do you need jQuery in 2019?
 
Web browsers and browser version support
Web browsers and browser version supportWeb browsers and browser version support
Web browsers and browser version support
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
 
Progressive enhancement 2.0 what i'd like to share to designers
Progressive enhancement 2.0  what i'd like to share to designersProgressive enhancement 2.0  what i'd like to share to designers
Progressive enhancement 2.0 what i'd like to share to designers
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Reward & Punishment
Reward & PunishmentReward & Punishment
Reward & Punishment
 
jQuery From the Ground Up
jQuery From the Ground UpjQuery From the Ground Up
jQuery From the Ground Up
 
How to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTMLHow to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTML
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Jquery
JqueryJquery
Jquery
 
CSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser CompatibilityCSS With Feature Detection for Cross Browser Compatibility
CSS With Feature Detection for Cross Browser Compatibility
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
 
Netbeans65 Osum Slides
Netbeans65 Osum SlidesNetbeans65 Osum Slides
Netbeans65 Osum Slides
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
TPR4
TPR4TPR4
TPR4
 
TPR4
TPR4TPR4
TPR4
 

Recently uploaded

Recently uploaded (20)

Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 

YUI Graded Browser Support

  • 1. Yahoo! Graded Browser Support The game of global Internet domination John Kary | johnkary@ku.edu Web Development & Interface Design University of Kansas, Information Technology November 2010 KU Web Developers Meeting
  • 2. Browser Wars ‣ Yahoo! GBS ‣ GBS at KU
  • 3. Early Browser Wars Image: http://en.wikipedia.org/wiki/Netscape_Navigator
  • 4. Early Browser Wars Image: http://en.wikipedia.org/wiki/Netscape_Navigator
  • 5. Early Browser Wars Image: http://en.wikipedia.org/wiki/History_of_Internet_Explorer
  • 6. Early Browser Wars Image: http://www.teamlalala.com/blog/2009/12/23/best-viewed-in-netscape-3-0/
  • 7. Current Browser Wars Image: http://www.toy-tma.com/learning-toys/board-games/risk-board-game-rule/
  • 8. Current Browser Wars Image: http://commons.wikimedia.org/wiki/File:Risk_board.svg Image: http://www.ashersarlin.com/archives/2004/09/honestly_who_co.php
  • 10. Yahoo! Graded Browser Support (or GBS)
  • 11. What is it? Survey Select Advocate
  • 12. GBS – November 2010 Source: http://developer.yahoo.com/yui/articles/gbs/
  • 13. Why? Supporting GBS means ensuring core content and functionality is... 1. Accessible without images, CSS or JS 2. Accessible using only a Keyboard 3. Accessible by older browsers, but hides all advanced functionality prompts are You see the pattern here...
  • 14.
  • 15. “” Why? Availability and accessibility of content should be our key priority. What Does “Support” Mean? http://developer.yahoo.com/yui/articles/gbs/ Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. What Does “Support” Mean? http://developer.yahoo.com/yui/articles/gbs/
  • 16. Support? As web developers, how do we "support" a specific browser?
  • 17. Support? We allow every user to consume as much visual and interactive richness as their environment can support. What Does “Support” Mean? http://developer.yahoo.com/yui/articles/gbs/
  • 18. How are Grades of Support Determined? Identified or Unknown Common or Rare Capable or Incapable Modern vs Antiquated
  • 20. C-grade HTML YES CSS NO JavaScript NO Minimum level of support for a guaranteed experience Content delivered only as semantic HTML CSS and JS are withheld Sample of browsers tested
  • 21. C-grade HTML YES CSS NO JavaScript NO IDENTIFIED vs UNKNOWN COMMON vs RARE CAPABLE vs INCAPABLE MODERN vs ANTIQUATED IE < 6 Firefox < 3
  • 22. A-grade HTML YES CSS YES JavaScript YES Highest level of support Content is fully delivered Fully tested
  • 23. A-grade HTML YES CSS YES JavaScript YES IDENTIFIED vs UNKNOWN COMMON vs RARE CAPABLE vs INCAPABLE MODERN vs ANTIQUATED Chrome on XP IE 8 on XP and 7
  • 24. X-grade HTML YES CSS YES JavaScript YES Mid-level level of support Content is fully delivered NOT tested
  • 25. X-grade HTML YES CSS YES JavaScript YES IDENTIFIED vs UNKNOWN COMMON vs RARE CAPABLE vs INCAPABLE MODERN vs ANTIQUATED Maxthon Flock
  • 26. GBS – November 2010 Source: http://developer.yahoo.com/yui/articles/gbs/
  • 27. Updates www.yuiblog.com Issued quarterly
  • 28. Q4 2010 Updates • Chrome updates a lot, XP Chrome is best benchmark • Added A-grade for WebKit browsers on iOS & Android • Move Firefox < 3 to C-grade • Forecast A-grade for Firefox 4 & IE9 on Windows 7 upon release • Forecast moving IE6 from A-grade to C-grade in Q1 2011 Source: http://yuiblog.com/blog/2010/11/03/gbs-update-2010q4/
  • 29. GBS at KU • We target all A-grade browsers • Don’t (currently) withhold CSS/JS from old browsers • Will drop IE6 “support” in next template (date unknown)
  • 30. Browser Stats at KU www.ku.edu 2,000,000 visits per month 36% 32% 24% 7% Source: Google Analytics
  • 31. Browser Stats at KU www.ku.edu 2,000,000 visits per month 36% IE8 26% IE7 8% IE6 0.01% (27,000) Source: Google Analytics
  • 32. Questions? Source: http://xkcd.com/519/