Top Banner
Responsive Web Design Minjuan Wang @SDSU
12

Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design? A site's ability to resize dynamically based on the device being used. The.

Dec 31, 2015

Download

Documents

Ashlee Nash
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: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Responsive Web Design

Minjuan Wang @SDSU

Page 2: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

What is Responsive Web Design?

A site's ability to resize dynamically based on the device being used.

The term responsive web design was coined by Ethan Marcotte.

Page 4: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Responsive Web Design

The term is often used to infer the same meaning as a number of other descriptions such as:

o Fluid design

o Liquid design

o Adaptive layout

o Cross-device design

o Flexible design

Page 5: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Responsive Design and Mobile Sites are they Same?

• Mobile sites are websites specifically designed to be viewed on a mobile device. • They aren’t completely compatible with desktop

computers. • However, you can view desktop sites on mobile but they

wouldn’t be optimised for viewing on a mobile and vice versa.

Mobile sites are not the same as responsive design!

Page 6: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Why HTML?

• HTML5 places streamlines the actual markup required to create a page that validates to W3C standards.

• Smartphone users, usually have limited bandwidth, responsive designs responds to their more limited viewport and also loads in the fastest possible time.

• Saves time when coding

Page 7: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Why Consider Responsive Design?

• Reduction in cost as you can build one website instead of two separate sites (for compatibility on each device)

• Provides a consistent experience for users across different devices

• Allows you to have a single website with one URL

Page 8: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Why Consider Responsive Design?

• Mobile usage is on rise; more searches are made on mobile and a good mobile browsing experience can impact the brand

• Google prefers responsive web design and performs well on the searches which has impact on the SEO (Search Engine Optimization)

Page 9: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Source: hoodzpahdesign

Why Consider?

Page 10: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Getting started

Here are some websites that provide responsive web design templates that you can use to build your website:

• WordPress

• Wix.com

• Weebly

Page 11: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Example of Responsive Web Design

Desktop View

Page 12: Responsive Web Design Minjuan Wang @SDSU. What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.

Example of Responsive Web Design

View based on the device width