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)
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