legacy browsers - a nerdery primer

#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