Responsive Design

Josh Northcott

Let’s Think Mobile

What is the experience?

• Desktop?

• Tablet?

• Smartphone?

Avoid Tunnel Vision

Visits to esri.com

July 2012 MetricsiPad – 41.5%, iPhone – 27.2%, All others under 5%

884,231 Mobile Visits in 2012

Mobile Devices Used on esri.com - 2012

Comparison of 2011 to 2012

2012 PC Sales Decline

For the first time since 2001, PC sales declined from the previous year.

What Devices are People Buying?

• Tablet sales are expected to exceed 100 million this year (2013).

• According to Nielsen, the majority of mobile subscribers own smartphones, not feature phones.

How to Support all the Devices?

• Mainstream news sites are receiving visits by more that 300,000 different mobile devices.

• According to Tech Crunch, there will be over 10 billion mobile devices by 2016. Exceeding the world population!

Responsive Design

Uses "media queries" to figure out what resolution of device it's being served on.

Flexible images and fluid grids then size correctly to fit the screen.

Emeauc.esri.com Desktop/Tablet

• 960 px

• 790 px

Phone View: < 790 px

• Landscape

• Portrait

The Benefits?

You build a website once, and it works seamlessly across thousands of different screens.

Exercise Time!

• Wireframe a responsive design for a Smartphone, based off of the web design you worked on earlier.