Responsive Web Design       Paweł Skowronek          0807883/2
1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be respons...
1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be respons...
Responsive Web Design?                    A flexible grid (with flexible images)                    that incorporates media ...
1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be respons...
Mobile vs. Desktop                     Source: Apple, 2011
Browser Screen ResolutionsJanuary 2000                 January 2011640x480          800x600     1024x768          Higher10...
Mobile vs. Desktop Internet Users, 2007-2015E                        Mobile Internet Users                        Desktop ...
1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be respons...
What makes a site responsive?     • Flexible/fluid grid     • Responsive images     • Media queries
Flexible/fluid gridfigure { width: 300px/960px = 31.25%; }                                         < LiveFront >, 2011
Responsive images                     Desktop Mobile    .square { width: 100%; }
Media queries@media screen and (max-width: 768px) {...}
Desktop user                  Tablet userSmartphone user    480px           768px         1024px                          ...
Netbook    Desktop/Notebook              TabletSmartphone  <480px     <768px    <1024px        1024px                     ...
1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be respons...
Why websites should be responsive?        • more portable devices        • more users        • more income!
References•   Marcotte, E., 2010. Responsive Web Design. A list apart, [online]. Available at: <http://www.alistapart.com/...
Questions?
Responsive Web DesignThanks.Paweł Skowronekpawelskowronek@me.compawelskowronek.me@pawelskowronek
Upcoming SlideShare
Loading in …5
×

eBusiness Engineering Responsive Web Design Part 1

1,489 views

Published on

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,489
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • eBusiness Engineering Responsive Web Design Part 1

    1. 1. Responsive Web Design Paweł Skowronek 0807883/2
    2. 2. 1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    3. 3. 1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    4. 4. Responsive Web Design? A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout. Ethan MarcotteMarcotte, E., 2010. A Dao of Flexibility presentation. An Event Apart, Minneapolis.
    5. 5. 1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    6. 6. Mobile vs. Desktop Source: Apple, 2011
    7. 7. Browser Screen ResolutionsJanuary 2000 January 2011640x480 800x600 1024x768 Higher1024x768 Higher OtherOther 4%4% 11% 1% 14%25% 56% 85% Source: Browser Display Statistics, w3schools.com
    8. 8. Mobile vs. Desktop Internet Users, 2007-2015E Mobile Internet Users Desktop Internet Users200015001000 500 0 2007 2009 2011E 2013E 2015E E - estimated (Stanley, 2010)
    9. 9. 1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    10. 10. What makes a site responsive? • Flexible/fluid grid • Responsive images • Media queries
    11. 11. Flexible/fluid gridfigure { width: 300px/960px = 31.25%; } < LiveFront >, 2011
    12. 12. Responsive images Desktop Mobile .square { width: 100%; }
    13. 13. Media queries@media screen and (max-width: 768px) {...}
    14. 14. Desktop user Tablet userSmartphone user 480px 768px 1024px Source: Elated.com, 2011
    15. 15. Netbook Desktop/Notebook TabletSmartphone <480px <768px <1024px 1024px Desktop 1024px<
    16. 16. 1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    17. 17. Why websites should be responsive? • more portable devices • more users • more income!
    18. 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. 19. Questions?
    20. 20. Responsive Web DesignThanks.Paweł Skowronekpawelskowronek@me.compawelskowronek.me@pawelskowronek

    ×