legacy browsers - a nerdery primer
DESCRIPTION
TRANSCRIPT
#BROWSERNERDS
#BROWSERNERDS
MATT TONAKCOMMUNITY MANAGER
#BROWSERNERDS
THE NERDERY
WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS
HTTP://WWW.NERDERY.COMTWITTER: @THE_NERDERY
1,069,534 5093HOURS WORKED SINCE 2003 PROJECTS DOGS IN OUR OFFICE BIKE COMMUTERS
HOURS WORKED, LAST 12 MONTHS
PEOPLE WHO WORK AT THE NERDERY
AVERAGE JANUARY TEMPERATURE
THREE HUNDRED EIGHTEEN
TWENTY-EIGHT
6
FOURº
#BROWSERNERDS
TONY T.PRINCIPAL SOFTWARE ENGINEER
#BROWSERNERDS
JOSH A.FRONTEND DEVELOPER
#BROWSERNERDS
BROWSERS
#BROWSERNERDS
#BROWSERNERDS
#BROWSERNERDS
#BROWSERNERDS
THE HISTORY
#BROWSERNERDS
A BRIEF HISTORYOF DESKTOP BROWSERS
1991: First Browser Released - WorldWideWeb (Nexus)
1994: First Commerical Browser - Netscape Navigator
1995: Microsoft releases Internet Explorer 1
1995-2002: Microsoft dominates the first browser wars
2003: Safari is first released by Apple
2004: Firefox is first released by Mozilla
2008: Chrome is first released by Google
#BROWSERNERDS
DESKTOP BROWSERS MARKET SHARE
0
25
50
75
100
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
Internet Explorer NetscapeSafari FirefoxChrome Mobile Browsers
#BROWSERNERDS
INTERNET EXPLORER
0
25
50
75
100
2007 2008 2009 2010 2011 2012
IE9 IE8 IE7 IE6
#BROWSERNERDS
A BRIEF HISTORYOF MOBILE BROWSERS
1994: First Mobile Browser - PocketWeb for Apple Newton
1996: First Commerical Browser - NetHopper
2000: Opera Mobile is released
2005: Opera Mini is released
2007: iPhone is released with Mobile Safari
2008: First Android phone is released with Mobile Chrome
#BROWSERNERDS
MOBILE BROWSERMARKET SHARE
0
25
50
75
100
2009 2010 2011 2012
Opera Mini Android Safari SymbianBlackberry Other
#BROWSERNERDS
SELECTING WHICH BROWSERS TO SUPPORT
Define the word support
Check your own analytics for browser statistics
Look at your budget for the project
#BROWSERNERDS
WHAT IS EVERYONEELSE DOING?
Google - Supports the current & prior major release
Facebook - Supports the current & prior major release
37 Signals - Support current major release only
Target - Supports the current & prior major release as well as IE7
#BROWSERNERDS
STRATEGIES FOR LEGACY BROWSER SUPPORT
Progressive Enhancement
Future Friendly
Focused on the capability of the browser
Cross Browser Pixel Perfection
Maximum Effort for a small audience
Near impossible
#BROWSERNERDS
PROGRESSIVE ENHANCEMENT
#BROWSERNERDS
CORE PRINCIPLESBasic content should be accessible to all web browsers
Basic functionality should be accessible to all web browsers
Sparse, semantic markup contains all content
Enhanced layout is provided by externally linked CSS
Enhanced behavior is provided by unobtrusive, externally linked JavaScript
End-user web browser preferences are respected
#BROWSERNERDS
THE BENEFITS
Focus on modern browsers and using them to the full extent
Providing the best possible experience to each browser by allowing them to behave naturally
Emphasizes accessibility for all
Can increase page load speed and efficiency
Can reduce long term maintenance costs
#BROWSERNERDS
THE BOSTON GLOBE
#BROWSERNERDS
THE BOSTON GLOBE
#BROWSERNERDS
THE BOSTON GLOBE
#BROWSERNERDS
EXAMPLES
#BROWSERNERDS
HTML5Buzz word - often used incorrectly(SVG, Canvas, CSS3, Browser APIs)
New elements for structure & semantic meaning
Better accessibility
More robust browser features
Better form handling
Video & Audio elements
#BROWSERNERDS
HTML5 VIDEO
#BROWSERNERDS
HTML5 AUDIO
MODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
HTML5 SEARCH INPUT
MODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
HTML5 INPUT TYPES
#BROWSERNERDS
CSS3
#BROWSERNERDS
BORDER RADIUS
MODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
GRADIENTS
MODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
DROP SHADOWSMODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
OPACITYMODERN BROWSERS LEGACY BROWSERS
#BROWSERNERDS
TRANSITIONS[ VIDEO OF HTTP://CSS3EXP.COM/MOON/ ]
#BROWSERNERDS
CSS ANIMATION[ VIDEO OF HTTP://ANIMATABLE.COM/DEMOS/MADMANIMATION/ ]
#BROWSERNERDS
CSS (NO) ANIMATION
#BROWSERNERDS
BROWSER APIS
#BROWSERNERDS
WHAT’S POSSIBLE?Geolocation
Local Storage
Drag & Drop
Live Editing
Browser History
File Handling
#BROWSERNERDS
GEOLOCATION
#BROWSERNERDS
DRAG & DROP
#BROWSERNERDS