Web Responsive Design
By: Man Math
219-October-2013
Outline
• What is RWD ?
• When is RWD ?
• Why is RWD ?
• How is RWD ?
• Question and Answer
319-October-2013
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
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
Why Web Responsive Design?
19-October-2013 6
1. Different smart devices screen resolution
19-October-2013 7
Smartphone
819-October-2013
Tablets
919-October-2013
Computers
1019-October-2013
Computers
1119-October-2013
2. Competition of technology innovation
19-October-2013 12
2. Competition of innovation in technology
19-October-2013 13
19-October-2013 14
19-October-2013 15
19-October-2013 16
Why is RWD ?
3. Recommended by Google
4. One site, Many devices
5. Easier to manage
19-October-2013 17
How is RWD ?
19-October-2013 18
19-October-2013 19
Screen Wireframe
19-October-2013 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
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
Q & A ???
19-October-2013 23