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

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.

Source: dotcominfoway

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

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!

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

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

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)

Source: hoodzpahdesign

Why Consider?

Getting started

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

• WordPress

• Wix.com

• Weebly

Example of Responsive Web Design

Desktop View

Example of Responsive Web Design

View based on the device width