1. Responsive Web Design
Paweł Skowronek
0807883/2

2. 1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

3. 1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

4. Responsive Web Design?
A flexible grid (with flexible images)
that incorporates media queries to
create a responsive, adaptive layout.
Ethan Marcotte
Marcotte, E., 2010. A Dao of Flexibility presentation. An Event Apart, Minneapolis.

5. 1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

6. Mobile vs. Desktop
Source: Apple, 2011

7. Browser Screen Resolutions
January 2000 January 2011
640x480 800x600 1024x768 Higher
1024x768 Higher Other
Other
4%4% 11% 1% 14%
25%
56%
85%
Source: Browser Display
Statistics, w3schools.com

8. Mobile vs. Desktop Internet Users, 2007-2015E
Mobile Internet Users
Desktop Internet Users
2000
1500
1000
500
0
2007 2009 2011E 2013E 2015E
E - estimated (Stanley, 2010)

9. 1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

10. What makes a site responsive?
• Flexible/fluid grid
• Responsive images
• Media queries

11. Flexible/fluid grid
figure { width: 300px/960px = 31.25%; }
< LiveFront >, 2011

12. Responsive images
Desktop
Mobile
.square { width: 100%; }

13. Media queries
@media screen and (max-width: 768px) {...}

14. Desktop user
Tablet user
Smartphone user
480px 768px 1024px
Source: Elated.com, 2011

15. Netbook Desktop/Notebook
Tablet
Smartphone
<480px <768px <1024px 1024px
Desktop
1024px<

16. 1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

17. Why websites should be responsive?
• more portable devices
• more users
• more income!

18. References
• Marcotte, E., 2010. Responsive Web Design. A list apart, [online]. Available at: <http://www.alistapart.com/articles/
responsive-web-design> [Accessed November 2011]
• Doyle, M., 2011. Responsive Web Design Demystified. Elated, [online]. Available at: <http://www.elated.com/articles/
responsive-web-design-demystified/> [Accessed November 2011]
• w3chools.com, 2011. Browser Display Statistics. w3schools.com, [online]. Available at: <http://www.w3schools.com/
browsers/browsers_display.asp> [Accessed November 2011]
• Stanley, M., 2009. Mobile Internet Report. Morgan Stanley Research, [online]. Available at: <http://
www.morganstanley.com/institutional/techresearch/pdfs/mobile_internet_report.pdf> [Accessed November 2011]
• Richmond, H., 2011. The Growth of Mobile Marketing and Tagging. Microsoft tag, [online]. Available at: <http://
tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx> [Accessed November
2011]
• Simpson, E., 2011. How to Design a Mobile Responsive Website. UX Booth, [online]. Available at: <http://
www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/> [Accessed November 2011]
• .net, 2011. 21 top tools for responsive web design. .net, [online]. Available at: <http://www.netmagazine.com/features/
21-top-tools-responsive-web-design> [Accessed November 2011]
• Pettit, N., 2011. Beginner’s Guide to Responsive Web Design. Think Vitamin, [online]. Available at: <http://
thinkvitamin.com/design/beginners-guide-to-responsive-web-design/> [Accessed November 2011]
• Wiggins, R., 2011. Responsive Web Design one website, many devices. Handcrafted Pixels, [online]. Available at: <http://
handcraftedpixels.co.uk/> [Accessed November 2011]
• Bollinger, M., 2011. Designing for Desktop Web + Mobile - Responsive Design. < LiveFront >, TECH{dot}MN, [online].
Available at: <http://www.slideshare.net/livefront/responsive-design-7877412> [Accessed November 2011]

19. Questions?

20. Responsive Web Design
Thanks.
Paweł Skowronek
pawelskowronek@me.com
pawelskowronek.me
@pawelskowronek