Top Banner
23

Web Responsive Design

Feb 12, 2017

Download

Education

Man Math
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Web Responsive Design
Page 2: Web Responsive Design

Web Responsive Design

By: Man Math

219-October-2013

Page 3: Web Responsive Design

Outline

• What is RWD ?

• When is RWD ?

• Why is RWD ?

• How is RWD ?

• Question and Answer

319-October-2013

Page 4: Web Responsive Design

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

Page 5: Web Responsive Design

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

Page 6: Web Responsive Design

Why Web Responsive Design?

19-October-2013 6

Page 7: Web Responsive Design

1. Different smart devices screen resolution

19-October-2013 7

Page 8: Web Responsive Design

Smartphone

819-October-2013

Page 9: Web Responsive Design

Tablets

919-October-2013

Page 10: Web Responsive Design

Computers

1019-October-2013

Page 11: Web Responsive Design

Computers

1119-October-2013

Page 12: Web Responsive Design

2. Competition of technology innovation

19-October-2013 12

Page 13: Web Responsive Design

2. Competition of innovation in technology

19-October-2013 13

Page 14: Web Responsive Design

19-October-2013 14

Page 15: Web Responsive Design

19-October-2013 15

Page 16: Web Responsive Design

19-October-2013 16

Page 17: Web Responsive Design

Why is RWD ?

3. Recommended by Google

4. One site, Many devices

5. Easier to manage

19-October-2013 17

Page 18: Web Responsive Design

How is RWD ?

19-October-2013 18

Page 19: Web Responsive Design

19-October-2013 19

Page 20: Web Responsive Design

Screen Wireframe

19-October-2013 20

Page 21: Web Responsive Design

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

Page 22: Web Responsive Design

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

Page 23: Web Responsive Design

Q & A ???

19-October-2013 23