Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Responsive Design

82 views

Published on

Discovery the reasons behind that WHY Web Responsive Design (RWD) is becoming more and more popular.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web Responsive Design

  1. 1. Web Responsive Design By: Man Math 219-October-2013
  2. 2. Outline • What is RWD ? • When is RWD ? • Why is RWD ? • How is RWD ? • Question and Answer 319-October-2013
  3. 3. What is RWD ? • Responsive Web Design (RWD) is a web design approach aimed to provide an optimal viewing experience across a wide range of devices (from mobile phones to desktop computer monitors) 19-October-2013 4
  4. 4. When is RWD ? • May 2010, Ethan Marcotte coined the term RWD • 2011, His book called: Responsive Web Design • 2012, listed #1 top web design trends by .net Magazine • In late 2012, Google recommended in Webmaster guide • 2013, the year of Web Responsive Design (Mashable) 19-October-2013 5
  5. 5. Why Web Responsive Design? 19-October-2013 6
  6. 6. 1. Different smart devices screen resolution 19-October-2013 7
  7. 7. Smartphone 819-October-2013
  8. 8. Tablets 919-October-2013
  9. 9. Computers 1019-October-2013
  10. 10. Computers 1119-October-2013
  11. 11. 2. Competition of technology innovation 19-October-2013 12
  12. 12. 2. Competition of innovation in technology 19-October-2013 13
  13. 13. 19-October-2013 14
  14. 14. 19-October-2013 15
  15. 15. 19-October-2013 16
  16. 16. Why is RWD ? 3. Recommended by Google 4. One site, Many devices 5. Easier to manage 19-October-2013 17
  17. 17. How is RWD ? 19-October-2013 18
  18. 18. 19-October-2013 19
  19. 19. Screen Wireframe 19-October-2013 20
  20. 20. CSS3 Media Queries /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } 19-October-2013 21
  21. 21. Conclusion It is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it also makes managing your SEO strategy easier. For these reasons, responsive web design is the best option for your mobile SEO strategy. 19-October-2013 22
  22. 22. Q & A ??? 19-October-2013 23

×