Legacy Browsers - A Nerdery Primer

2,108 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,108
On SlideShare
0
From Embeds
0
Number of Embeds
1,402
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Legacy Browsers - A Nerdery Primer

  1. 1. #BROWSERNERDS
  2. 2. MATT TONAKCOMMUNITY MANAGER #BROWSERNERDS
  3. 3. THE NERDERYHOURS WORKED SINCE 2003 PROJECTS DOGS IN OUR OFFICE BIKE COMMUTERS TWENTY- 61,069,534HOURS WORKED, LAST 12 MONTHS 5093 PEOPLE WHO WORK AT THE NERDERY THREE HUNDRED EIGHTEEN EIGHT AVERAGE JANUARY TEMPERATURE FOUR º WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS HTTP://WWW.NERDERY.COM TWITTER: @THE_NERDERY #BROWSERNERDS
  4. 4. TONY T.PRINCIPAL SOFTWARE ENGINEER #BROWSERNERDS
  5. 5. JOSH A.FRONTEND DEVELOPER #BROWSERNERDS
  6. 6. BROWSERS #BROWSERNERDS
  7. 7. #BROWSERNERDS
  8. 8. #BROWSERNERDS
  9. 9. #BROWSERNERDS
  10. 10. THE HISTORY #BROWSERNERDS
  11. 11. A BRIEF HISTORYOF DESKTOP BROWSERS1991: First Browser Released - WorldWideWeb (Nexus)1994: First Commerical Browser - Netscape Navigator1995: Microsoft releases Internet Explorer 11995-2002: Microsoft dominates the first browser wars2003: Safari is first released by Apple2004: Firefox is first released by Mozilla2008: Chrome is first released by Google #BROWSERNERDS
  12. 12. DESKTOP BROWSERS MARKET SHARE100 755025 0 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 Internet Explorer Netscape Safari Firefox Chrome Mobile Browsers #BROWSERNERDS
  13. 13. INTERNET EXPLORER100 755025 0 2007 2008 2009 2010 2011 2012 IE9 IE8 IE7 IE6 #BROWSERNERDS
  14. 14. A BRIEF HISTORY OF MOBILE BROWSERS1994: First Mobile Browser - PocketWeb for Apple Newton1996: First Commerical Browser - NetHopper2000: Opera Mobile is released2005: Opera Mini is released2007: iPhone is released with Mobile Safari2008: First Android phone is released with Mobile Chrome #BROWSERNERDS
  15. 15. MOBILE BROWSER MARKET SHARE100 755025 0 2009 2010 2011 2012 Opera Mini Android Safari Symbian Blackberry Other #BROWSERNERDS
  16. 16. SELECTING WHICH BROWSERS TO SUPPORTDefine the word supportCheck your own analytics for browser statisticsLook at your budget for the project #BROWSERNERDS
  17. 17. WHAT IS EVERYONE ELSE DOING?Google - Supports the current & prior major releaseFacebook - Supports the current & prior major release37 Signals - Support current major release onlyTarget - Supports the current & prior major release aswell as IE7 #BROWSERNERDS
  18. 18. STRATEGIES FOR LEGACY BROWSER SUPPORTProgressive Enhancement Future Friendly Focused on the capability of the browserCross Browser Pixel Perfection Maximum Effort for a small audience Near impossible #BROWSERNERDS
  19. 19. PROGRESSIVEENHANCEMENT #BROWSERNERDS
  20. 20. CORE PRINCIPLESBasic content should be accessible to all web browsersBasic functionality should be accessible to all web browsersSparse, semantic markup contains all contentEnhanced layout is provided by externally linked CSSEnhanced behavior is provided by unobtrusive, externallylinked JavaScriptEnd-user web browser preferences are respected #BROWSERNERDS
  21. 21. THE BENEFITSFocus on modern browsers and using them to the full extentProviding the best possible experience to each browser byallowing them to behave naturallyEmphasizes accessibility for allCan increase page load speed and efficiencyCan reduce long term maintenance costs #BROWSERNERDS
  22. 22. THE BOSTON GLOBE #BROWSERNERDS
  23. 23. THE BOSTON GLOBE #BROWSERNERDS
  24. 24. THE BOSTON GLOBE #BROWSERNERDS
  25. 25. EXAMPLES #BROWSERNERDS
  26. 26. HTML5Buzz word - often used incorrectly(SVG, Canvas, CSS3, Browser APIs)New elements for structure & semantic meaningBetter accessibilityMore robust browser featuresBetter form handlingVideo & Audio elements #BROWSERNERDS
  27. 27. HTML5 VIDEO #BROWSERNERDS
  28. 28. HTML5 AUDIOMODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  29. 29. HTML5 SEARCH INPUT MODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  30. 30. HTML5 INPUT TYPES #BROWSERNERDS
  31. 31. CSS3 #BROWSERNERDS
  32. 32. BORDER RADIUSMODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  33. 33. GRADIENTSMODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  34. 34. DROP SHADOWSMODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  35. 35. OPACITYMODERN BROWSERS LEGACY BROWSERS #BROWSERNERDS
  36. 36. TRANSITIONS[ VIDEO OF HTTP://CSS3EXP.COM/MOON/ ] #BROWSERNERDS
  37. 37. CSS ANIMATION[ VIDEO OF HTTP://ANIMATABLE.COM/DEMOS/MADMANIMATION/ ] #BROWSERNERDS
  38. 38. CSS (NO) ANIMATION #BROWSERNERDS
  39. 39. BROWSER APIS #BROWSERNERDS
  40. 40. WHAT’S POSSIBLE?GeolocationLocal StorageDrag & DropLive EditingBrowser HistoryFile Handling #BROWSERNERDS
  41. 41. GEOLOCATION #BROWSERNERDS
  42. 42. DRAG & DROP #BROWSERNERDS
  43. 43. #BROWSERNERDS

×