Your SlideShare is downloading. ×
0
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Modern Browser Support
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modern Browser Support

1,102

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,102
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Modern Browser Support@meeker Orbitz IDEAS Deep Dive - July 18th, 2012
  • 2. Alternate TitleHow do you build a major website that works foreveryone and I do mean everyone - any browser, anyOS (ok, Linux), small screens, no keyboards, withcookies blocked, JavaScript disabled, blind,colorblind, thinks Flash is evil, thinks Silverlight isworse, uses an old browser, stuck on a slowconnection (so has an iPhone on AT&T), or is usingsome new device or browser that no one knewabout yesterday. Oh yeah, and do it while using allthe cool new HTML5 stuff I keep hearing about.
  • 3. Alternate TitleHow do you build a major website that works foreveryone and I do mean everyone - any browser, anyOS (ok, Linux), small screens, no keyboards, withcookies blocked, JavaScript disabled, blind,colorblind, thinks Flash is evil, thinks Silverlight isworse, uses an old browser, stuck on a slowconnection (so has an iPhone on AT&T), or is usingsome new device or browser that no one knewabout yesterday. Oh yeah, and do it while using allthe 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 fundamentalgoals in reducing the cycle time:1. Shorten the release cycle and still get greatfeatures in front of users when they are ready2. Make the schedule more predictable and easierto scope3. 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. CSS3CSS SelectorsRounded Corners Client-Side storageGradients WebworkersTransitions Drag and DropAnimations GeolocationMultiple background Device APIsOpacity History ManagementFlexbox Web Timing APIShadows Touch Events JavaScript
  • 24. Battery API
  • 25. Set the WABAC Machine to...
  • 26. 1993
  • 27. 1994
  • 28. In 93 to 94, every browser hadits own flavor of HTML. So it wasvery difficult to know what youcould put in a Web page andreliably have most of yourreadership see it. -Tim Berners-Lee
  • 29. Frame no frame
  • 30. NCSA_Mosaic/1.0Mozilla/1.0
  • 31. 1995
  • 32. Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
  • 33. 1996 VS.
  • 34. 1997
  • 35. TodayMozilla/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.0Mozilla/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.4Safari/533.20.27Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US)AppleWebKit/534.17 (KHTML, like Gecko) Chrome/11.0.654.0Safari/534.17
  • 36. Opera Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00
  • 37. Best viewed in...
  • 38. "Anyone who slaps a this pageis best viewed with Browser Xlabel on a Web page appears tobe yearning for the bad olddays, before the Web, when youhad very little chance of readinga document written on anothercomputer, another wordprocessor, or another network." -Tim Berners-Lee
  • 39. 5.0 Ajax
  • 40. Mr. Owl, dowebsites need tolook exactly the same in every browser?
  • 41. http://dowebsitesneedtolookexactlythesameineverybrowser.com
  • 42. Graceful Degradation
  • 43. Progressive Enhancement
  • 44. credit: alistapart.com
  • 45. Behavior (JavaScript) Presentation (CSS) Content (HTML)
  • 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. 1
  • 48. 21
  • 49. 213
  • 50. 213 4
  • 51. 213 4 5
  • 52. CoreEnhanced
  • 53. Enhanced
  • 54. Enhanced
  • 55. Enhanced
  • 56. Core
  • 57. Core Enhanced
  • 58. Blackberry Presentation (CSS) Content (HTML)
  • 59. Netscape 3 Content (HTML)
  • 60. Netscape 3
  • 61. Lynx
  • 62. Progressive Enhancement Behavior (JavaScript) Presentation (CSS) Content (HTML)
  • 63. IE7 Good (CSS) Good (JS) Content (HTML)
  • 64. IE9 Better (CSS) Good (CSS) Good (JS) Content (HTML)
  • 65. What did you just see?
  • 66. IE 7 IE 9
  • 67. Safari
  • 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. Firefox Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  • 70. Local Storage
  • 71. Chrome Best (CSS) Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  • 72. Feature Detection function supports_geolocation() { return geolocation in navigator; }
  • 73. Geolocation
  • 74. Future Friendly Best (CSS) Best (JS) Better (CSS) Better (JS) Good (CSS) Good (JS) Content (HTML)
  • 75. Battery API
  • 76. Touch/Swipe Events
  • 77. Graded Browser Support
  • 78. 3 Grade LevelsGrading the experience,not the browser.
  • 79. A GradeFully supportedFully testedTop level experienceDecided by traffic numbersNot feature /pixel parity
  • 80. X GradeUnknown browsersNot significant trafficAssume will workDepends on feature detection andgraceful degradationGet more traffic? Move to AGet complaints? Move to C
  • 81. C GradeKnown browsersNot significant trafficKnow major issues in CSS or JSDelivered Core experience
  • 82. NCSA_Mosaic/1.0Mozilla/1.0
  • 83. Graded Browser Support Desktop A GradeIE 6IE 7IE 8IE 9Firefox 3.6Firefox LatestChrome LatestSafari OSX 4+Safari iOS
  • 84. Graded Browser Support Desktop A GradeIE 6 Moved to CIE 7IE 8IE 9Firefox 3.6Firefox LatestChrome LatestSafari OSX 4+Safari iOS
  • 85. IE6
  • 86. IE6
  • 87. Graded Browser Support Desktop A GradeIE 6 Moved to CIE 7IE 8IE 9Firefox 3.6 Moved to XFirefox LatestChrome LatestSafari OSX 4+Safari iOS
  • 88. Future Friendly credit: LukeW
  • 89. Learn More...
  • 90. Learn More... abookapart.com
  • 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/

×