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.

1. Responsive Web Design

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

22. Examples
http://www.warface.co.uk
http://www.bloominteriordesign.com.au
http://2011.dconstruct.org
http://foodsense.is
http://www.anderssonwise.com
http://www.cacaotour.com/

23. Resources
http://cssglobe.com/post/5914/90-new-and-high-quality-photoshop-web-layout-tutorials
http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-
and-design-strategies/
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

24. Thank You