Download to read offline
Uploaded byJoshua Northcott
Responsive Design and Why you should do it
The document discusses the importance of responsive design in adapting web experiences to various devices, such as desktops, tablets, and smartphones. It highlights trends in mobile device usage, showing significant growth in tablet and smartphone sales, and emphasizes the need for websites to function seamlessly across numerous screen sizes. The benefits include building a single website that automatically adjusts to fit all devices, enhancing user experience.
More Related Content
Similar to Responsive Design and Why you should do it
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Responsive Design and Why you should do it
- 2.
- 3.
- 4. What is theexperience? • Desktop? • Tablet? • Smartphone?
- 5.
- 6. Visits to esri.com July2012 Metrics iPad – 41.5%, iPhone – 27.2%, All others under 5%
- 7. 884,231 Mobile Visitsin 2012
- 8. Mobile Devices Usedon esri.com - 2012
- 9. Comparison of 2011to 2012
- 11. 2012 PC SalesDecline For the first time since 2001, PC sales declined from the previous year.
- 12. What Devices arePeople 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.
- 13. How to Supportall 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!
- 14. Responsive Design Uses "mediaqueries" to figure out what resolution of device it's being served on. Flexible images and fluid grids then size correctly to fit the screen.
- 15.
- 16. Phone View: <790 px • Landscape • Portrait
- 17. The Benefits? You builda website once, and it works seamlessly across thousands of different screens.
- 18. Exercise Time! • Wireframe aresponsive design for a Smartphone, based off of the web design you worked on earlier.
Editor's Notes
- #5 Benefits: In order to improve the user experience, we need to understand what experience our users are having.How are they viewing the content.
- #6 Tunnel Vision is when you are only looking through the eyes of a single of experience, a single device. Look at your analytics, who is your audience, how are they viewing your content?
- #7 In July,Nearly 7% of traffic to Esri.com came from mobile devices.
- #8 Nearly 4.5 % of total visits are on Mobile devices and it’s increasing rapidly.
- #10 Mobile visits are increasing very rapidly
- #11 From “Our Mobile Planet”
- #14 For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.There's no doubt that having mobile apps for the major platforms is better than having no apps at all, and yet how do you build for every app store? Let alone, support all the devices and screen sizes?
- #15 The solution, is to make a website that works equally well on every device. Enter responsive web design.
- #16 Show examples of emeauc.esri.com and a prototype of Events.
- #17 Show how fluid shrinks for iPad and how the nav responds and adapts to smartphone screensizes
- #18 The benefits are obvious: You build a website once, and it works seamlessly across thousands of different screens.
- #20 http://mashable.com/2012/12/11/responsive-web-design/