Modern Browser Support

Orbitz IDEAS - July, 2012

Transcript

1. Orbitz'IDEAS' July,'2012 Mark'Meeker' @meeker MODERN BROWSER SUPPORT
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. 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. Or...
5. Quirksmode.org
6. How Many Browsers?
7. Kindle
8. Last Week W in 7 M ac XP Vista iOS IE9 Safari IE8 Chrom e Firefox IE7
9. Release Dates 6: August 27, 2001 7: October 18, 2006 8: March 19, 2009 9: March 14, 2011 10: This year, sometime?
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. @_ChromeReleases
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. Development Versions
14. NYT and HTML5
15. Mozilla
16. Google: html5rocks.com
17. Not Google: html5r0cks.com
18. Opera
19. Apple
20. Microsoft
21. New Elements
22. New Input Types
23. CSS3 CSS Selectors Rounded Corners Gradients Transitions Animations Multiple background Opacity Flexbox Shadows JavaScript Client-Side storage Webworkers Drag and Drop Geolocation Device APIs History Management Web Timing API Touch Events
24. Battery API
26. Set the WABAC Machine to...
29. 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
30. Frame no frame
31. Mozilla/1.0 NCSA_Mosaic/1.0
33. Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
34. 1996 VS.
36. 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
37. Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 Opera
41. Best viewed in...
42. "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
43. Ajax 5.0
44. Mr. Owl, do websites need to look exactly the same in every browser?
45. http://dowebsitesneedtolookexactlythesameineverybrowser.com
47. Graceful Degradation
48. Progressive Enhancement
50. credit: alistapart.com
51. Content (HTML) Presentation (CSS) Behavior (JavaScript)
54. 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
57. 1 2
58. 1 2 3
59. 1 2 3 4
60. 1 2 3 4 5
61. Core Enhanced
62. Enhanced
63. Enhanced
64. Enhanced
66. Core
67. Core Enhanced
68. Content (HTML) Presentation (CSS) Blackberry
69. Content (HTML) Netscape 3
70. Netscape 3
71. Lynx
72. Content (HTML) Presentation (CSS) Behavior (JavaScript) Progressive Enhancement
73. Content (HTML) Good (CSS) Good (JS) IE7
74. Content (HTML) Good (CSS) Good (JS) Better (CSS) IE9
76. What did you just see?
78. IE 7 IE 9
79. Safari
80. -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; CSS3 The “old” Way <span><span><span><span>/* button code */</span></span></span></span> x 100 buttons on PKG200
81. Content (HTML) Good (CSS) Good (JS) Better (CSS) Better (JS) Best (JS) Firefox
82. Local Storage
83. Content (HTML) Good (CSS) Good (JS) Better (CSS) Best (CSS) Better (JS) Best (JS) Chrome
84. Feature Detection function supports_geolocation() { return 'geolocation' in navigator; }
85. Geolocation
86. Content (HTML) Good (CSS) Good (JS) Better (CSS) Best (CSS) Better (JS) Best (JS) Future Friendly
87. Battery API
88. Touch/Swipe Events
89. Graded Browser Support
90. 3 Grade Levels Grading the experience, not the browser.
91. A Grade Fully supported Fully tested Top level experience Decided by traffic numbers Not feature /pixel parity
92. 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
93. C Grade Known browsers Not significant traffic Know major issues in CSS or JS Delivered Core experience
94. Mozilla/1.0 NCSA_Mosaic/1.0
95. 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
96. 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 Moved to C
97. IE6
98. IE6
99. 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 Moved to C Moved to X
100. Future Friendly credit: LukeW
102. Learn More...
103. Learn More... abookapart.com
104. 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/ Photo Credits