Responsive Design and Why you should do it
-
Upload
joshua-northcott -
Category
Technology
-
view
220 -
download
2
description
Transcript of Responsive Design and Why you should do it
![Page 1: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/1.jpg)
![Page 2: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/2.jpg)
Responsive Design
Josh Northcott
![Page 3: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/3.jpg)
Let’s Think Mobile
![Page 4: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/4.jpg)
What is the experience?
• Desktop?
• Tablet?
• Smartphone?
![Page 5: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/5.jpg)
Avoid Tunnel Vision
![Page 6: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/6.jpg)
Visits to esri.com
July 2012 MetricsiPad – 41.5%, iPhone – 27.2%, All others under 5%
![Page 7: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/7.jpg)
884,231 Mobile Visits in 2012
![Page 8: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/8.jpg)
Mobile Devices Used on esri.com - 2012
![Page 9: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/9.jpg)
Comparison of 2011 to 2012
![Page 10: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/10.jpg)
![Page 11: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/11.jpg)
2012 PC Sales Decline
For the first time since 2001, PC sales declined from the previous year.
![Page 12: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/12.jpg)
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.
![Page 13: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/13.jpg)
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!
![Page 14: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/14.jpg)
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.
![Page 15: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/15.jpg)
Emeauc.esri.com Desktop/Tablet
• 960 px
• 790 px
![Page 16: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/16.jpg)
Phone View: < 790 px
• Landscape
• Portrait
![Page 17: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/17.jpg)
The Benefits?
You build a website once, and it works seamlessly across thousands of different screens.
![Page 18: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/18.jpg)
Exercise Time!
• Wireframe a responsive design for a Smartphone, based off of the web design you worked on earlier.
![Page 19: Responsive Design and Why you should do it](https://reader033.fdocuments.in/reader033/viewer/2022052412/558dfbeb1a28ab22758b460b/html5/thumbnails/19.jpg)