Responsive Design and Why you should do it

642 views

Published on

My presentation at Esri U on January 2013 regarding responsive design and why you should be doing it.

Published in: Technology, Business
  • I got several questions about responsive frameworks I prefer. Besides Twitter Bootstrap, I highly recommend the Centurion Framework. It's very lightweight which makes it nice for performance.
    http://jhough10.github.io/Centurion/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Responsive Design and Why you should do it

  1. 1. Responsive Design Josh Northcott
  2. 2. Let’s Think Mobile
  3. 3. What is the experience? • Desktop? • Tablet? • Smartphone?
  4. 4. Avoid Tunnel Vision
  5. 5. Visits to esri.com July 2012 Metrics iPad – 41.5%, iPhone – 27.2%, All others under 5%
  6. 6. 884,231 Mobile Visits in 2012
  7. 7. Mobile Devices Used on esri.com - 2012
  8. 8. Comparison of 2011 to 2012
  9. 9. 2012 PC Sales Decline For the first time since 2001, PC sales declined from the previous year.
  10. 10. 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.
  11. 11. 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!
  12. 12. 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.
  13. 13. Emeauc.esri.com Desktop/Tablet • 960 px • 790 px
  14. 14. Phone View: < 790 px • Landscape • Portrait
  15. 15. The Benefits? You build a website once, and it works seamlessly across thousands of different screens.
  16. 16. Exercise Time! • Wireframe a responsive design for a Smartphone, based off of the web design you worked on earlier.

×