The document discusses building websites that work for all users regardless of browser, operating system, device or connection. It emphasizes building websites using progressive enhancement and graceful degradation to provide core content and functionality to all while enhancing the experience for newer browsers. It also discusses modern browser support and trends, new web standards like HTML5, and taking a "future friendly" approach to support emerging technologies while degrading gracefully.

1. Modern Browser Support
@meeker
Orbitz IDEAS Deep Dive - July 18th, 2012

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 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. 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 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. Battery API

26. Set the WABAC Machine to...

27. 1993

28. 1994

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. NCSA_Mosaic/1.0
Mozilla/1.0

32. 1995

33. Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)

34. 1996
VS.

35. 1997

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
Opera/9.80 (Macintosh; Intel Mac OS X; U; en)
Presto/2.2.15 Version/10.00

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. 5.0
Ajax

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. Behavior (JavaScript)
Presentation (CSS)
Content (HTML)

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

56. 1

57. 2
1

58. 2
1
3

59. 2
1
3 4

60. 2
1
3 4 5

61. Core
Enhanced

62. Enhanced

63. Enhanced

64. Enhanced

66. Core

67. Core Enhanced

68. Blackberry
Presentation (CSS)
Content (HTML)

69. Netscape 3
Content (HTML)

70. Netscape 3

71. Lynx

72. Progressive Enhancement
Behavior (JavaScript)
Presentation (CSS)
Content (HTML)

73. IE7
Good (CSS) Good (JS)
Content (HTML)

74. IE9
Better (CSS)
Good (CSS) Good (JS)
Content (HTML)

76. What did you just see?

78. IE 7 IE 9

79. Safari

80. 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

81. Firefox
Best (JS)
Better (CSS) Better (JS)
Good (CSS) Good (JS)
Content (HTML)

82. Local Storage

83. Chrome
Best (CSS) Best (JS)
Better (CSS) Better (JS)
Good (CSS) Good (JS)
Content (HTML)

84. Feature Detection
function supports_geolocation() {
return 'geolocation' in navigator;
}

85. Geolocation

86. Future Friendly
Best (CSS) Best (JS)
Better (CSS) Better (JS)
Good (CSS) Good (JS)
Content (HTML)

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. NCSA_Mosaic/1.0
Mozilla/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 Moved to C
IE 7
IE 8
IE 9
Firefox 3.6
Firefox Latest
Chrome Latest
Safari OSX 4+
Safari iOS

97. IE6

98. IE6

99. 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

100. Future Friendly
credit: LukeW

102. Learn More...

103. Learn More...
abookapart.com

104. 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/