Responsive Design Presentation
0 likes2,664 views
Responsive Web Design statistics show monthly increases in usage from June to August 2012. Global internet and mobile app usage is also projected to more than double by 2015. Responsive Web Design (RWD) provides an optimal viewing experience across different devices by adjusting layout and resizing content. Common RWD approaches include separate mobile websites, mobile-optimized websites, and responsive layouts with fluid widths. Layout types can be adaptive with fixed widths, responsive with fluid widths, or mixed. Breakpoints help define resolution changes. Wireframes and mobile-first design are recommended. Typography, percentages, testing across devices and resolutions, and examples of responsive sites are also discussed.
Responsive Design Presentation
- 2. Statistics June, 2012 - 10,40% July, 2012 - 11,09% August, 2012 - 11,78%
- 3. More Statistics In 2011, there were 835 million smartphone users, 5.6 billion feature phone users (Business Insider) Global internet usage will more than double by 2015, and most of these users will be mobile In December 2011, 47.6% of the total mobile audience in the U.S. used apps, 47.5% used mobile browsers; in Europe
- 4. What exactly is RWD? “Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)” Wikipedia
- 5. Problem
- 6. Solution ✓Separate Mobile Website ✓Mobile Optimized Website ✓Responsive Layout
- 7. Responsive is NOT Mobile Respond to environments Different devices, same content Single deliverable, many destinations
- 8. Layout Types Adaptive - Fixed width layout Responsive - Fluid width layout Mixed - Fixed/Fluid width layouts (fixed for large & medium, fluid for small)
- 9. Adaptive Layout Fixed width Width changes depending on screen resolution Breakpoints Less flexibility
- 10. Responsive Layout Fluid width Takes the form of the window More flexibility No breakpoints
- 11. Mixed Layout Fluid / Fixed width Any resolution More adaptation Breakpoints for important devices
- 12. Breakpoints Standard 1600+ (large desktop) 1200 (desktop) 980 (tablet landscape) 760 (tablet portrait) 480 (mobile landscape) 320 (mobile portrait) Custom 1400 1100 860 600 380 240
- 13. Which one to choose?
- 14. Use Wireframes
- 15. VS
- 16. Browser-First Design Graceful Degradation complex & heavy first
- 17. Mobile-First Design Progressive enhancement light & clean first
- 18. Typography Make it easy to readMake it easy to read
- 19. Percentage is the King Target / Context = Result 300px / 980px ~= 30,6%
- 20. The Rule Stop thinking in pages Start thinking in Systems
- 21. Test Different resolutions Different devices User Experience
- 24. Thank You