Successfully reported this slideshow.
Your SlideShare is downloading. ×

Modern Browser Support

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 104 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Modern Browser Support

  1. 1. Modern Browser Support @meeker Orbitz IDEAS Deep Dive - July 18th, 2012
  2. 2. Alternate Title How do you build a major website that works for everyone and I do mean everyone - any browser, any OS (ok, Linux), small screens, no keyboards, with cookies blocked, JavaScript disabled, blind, colorblind, thinks Flash is evil, thinks Silverlight is worse, uses an old browser, stuck on a slow connection (so has an iPhone on AT&T), or is using some new device or browser that no one knew about yesterday. Oh yeah, and do it while using all the cool new HTML5 stuff I keep hearing about.
  3. 3. Alternate Title How do you build a major website that works for everyone and I do mean everyone - any browser, any OS (ok, Linux), small screens, no keyboards, with cookies blocked, JavaScript disabled, blind, colorblind, thinks Flash is evil, thinks Silverlight is worse, uses an old browser, stuck on a slow connection (so has an iPhone on AT&T), or is using some new device or browser that no one knew about yesterday. Oh yeah, and do it while using all the cool new HTML5 stuff I keep hearing about.
  4. 4. Or...
  5. 5. Quirksmode.org
  6. 6. How Many Browsers?
  7. 7. Kindle
  8. 8. Last Week W M XP Vi iO in ac st S 7 a IE Sa IE Ch Fi IE 9 fa 8 r re 7 r om fo i e x
  9. 9. Release Dates 6: August 27, 2001 7: October 18, 2006 8: March 19, 2009 9: March 14, 2011 10: This year, sometime?
  10. 10. Release Dates 3.6: January 21, 2010 4: March 22, 2011 5: June 21, 2011 ... (6 week release cycle) 14: June 26, 2012
  11. 11. @_ChromeReleases
  12. 12. So why the change? We have three fundamental goals in reducing the cycle time: 1. Shorten the release cycle and still get great features in front of users when they are ready 2. Make the schedule more predictable and easier to scope 3. Reduce the pressure on engineering to “make” a release Chrome Blog
  13. 13. Development Versions
  14. 14. NYT and HTML5
  15. 15. Mozilla
  16. 16. Google: html5rocks.com
  17. 17. Not Google: html5r0cks.com
  18. 18. Opera
  19. 19. Apple
  20. 20. Microsoft
  21. 21. New Elements
  22. 22. New Input Types
  23. 23. CSS3 CSS Selectors Rounded Corners Client-Side storage Gradients Webworkers Transitions Drag and Drop Animations Geolocation Multiple background Device APIs Opacity History Management Flexbox Web Timing API Shadows Touch Events JavaScript
  24. 24. Battery API
  25. 25. Set the WABAC Machine to...
  26. 26. 1993
  27. 27. 1994
  28. 28. In '93 to '94, every browser had its own flavor of HTML. So it was very difficult to know what you could put in a Web page and reliably have most of your readership see it. -Tim Berners-Lee
  29. 29. Frame no frame
  30. 30. NCSA_Mosaic/1.0 Mozilla/1.0
  31. 31. 1995
  32. 32. Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
  33. 33. 1996 VS.
  34. 34. 1997
  35. 35. Today Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US) Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8pre) Gecko/20071015 Firefox/2.0.0.7 Navigator/9.0 Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/4.0 (.NET CLR 3.5.30729) Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27 Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.17 (KHTML, like Gecko) Chrome/11.0.654.0 Safari/534.17
  36. 36. Opera Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00
  37. 37. Best viewed in...
  38. 38. "Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network." -Tim Berners-Lee
  39. 39. 5.0 Ajax
  40. 40. Mr. Owl, do websites need to look exactly the same in every browser?
  41. 41. http://dowebsitesneedtolookexactlythesameineverybrowser.com
  42. 42. Graceful Degradation
  43. 43. Progressive Enhancement
  44. 44. credit: alistapart.com
  45. 45. Behavior (JavaScript) Presentation (CSS) Content (HTML)
  46. 46. Benefits 1. Separation of layers 2. Phased development 3. Easier to validate and unit test 4. Increased reuse of styles and behavior 5. Forced to focus on core content 6. Handles errors gracefully
  47. 47. 1
  48. 48. 2 1
  49. 49. 2 1 3
  50. 50. 2 1 3 4
  51. 51. 2 1 3 4 5
  52. 52. Core Enhanced
  53. 53. Enhanced
  54. 54. Enhanced
  55. 55. Enhanced
  56. 56. Core
  57. 57. Core Enhanced
  58. 58. Blackberry Presentation (CSS) Content (HTML)
  59. 59. Netscape 3 Content (HTML)
  60. 60. Netscape 3
  61. 61. Lynx
  62. 62. Progressive Enhancement Behavior (JavaScript) Presentation (CSS) Content (HTML)
  63. 63. IE7 Good (CSS) Good (JS) Content (HTML)
  64. 64. IE9 Better (CSS) Good (CSS) Good (JS) Content (HTML)
  65. 65. What did you just see?
  66. 66. IE 7 IE 9
  67. 67. Safari
  68. 68. CSS3 -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; The “old” Way <span><span><span><span>/* button code */</span></span></span></span> x 100 buttons on PKG200
  69. 69. Firefox Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  70. 70. Local Storage
  71. 71. Chrome Best (CSS) Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  72. 72. Feature Detection function supports_geolocation() { return 'geolocation' in navigator; }
  73. 73. Geolocation
  74. 74. Future Friendly Best (CSS) Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  75. 75. Battery API
  76. 76. Touch/Swipe Events
  77. 77. Graded Browser Support
  78. 78. 3 Grade Levels Grading the experience, not the browser.
  79. 79. A Grade Fully supported Fully tested Top level experience Decided by traffic numbers Not feature /pixel parity
  80. 80. X Grade Unknown browsers Not significant traffic Assume will work Depends on feature detection and graceful degradation Get more traffic? Move to A Get complaints? Move to C
  81. 81. C Grade Known browsers Not significant traffic Know major issues in CSS or JS Delivered Core experience
  82. 82. NCSA_Mosaic/1.0 Mozilla/1.0
  83. 83. Graded Browser Support Desktop A Grade IE 6 IE 7 IE 8 IE 9 Firefox 3.6 Firefox Latest Chrome Latest Safari OSX 4+ Safari iOS
  84. 84. Graded Browser Support Desktop A Grade IE 6 Moved to C IE 7 IE 8 IE 9 Firefox 3.6 Firefox Latest Chrome Latest Safari OSX 4+ Safari iOS
  85. 85. IE6
  86. 86. IE6
  87. 87. Graded Browser Support Desktop A Grade IE 6 Moved to C IE 7 IE 8 IE 9 Firefox 3.6 Moved to X Firefox Latest Chrome Latest Safari OSX 4+ Safari iOS
  88. 88. Future Friendly credit: LukeW
  89. 89. Learn More...
  90. 90. Learn More... abookapart.com
  91. 91. Photo Credits http://www.flickr.com/photos/61056899@N06/5751301741/ http://www.flickr.com/photos/mako_side_b/2897963567/ http://www.flickr.com/photos/lauro/237784837/ http://www.flickr.com/photos/voxpelli/2954947277/ http://www.flickr.com/photos/slazebni/137659913/ http://www.flickr.com/photos/octavaria/5674960372/ http://www.flickr.com/photos/rheaney/4397863376/ http://www.flickr.com/photos/dullhunk/5449218572/

×