1. Responsive Web Design Minjuan Wang @SDSU

2. 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.

3. Source: dotcominfowaydotcominfoway

4. 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

5. 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!

6. 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

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

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

9. Source: hoodzpahdesignhoodzpahdesign Why Consider?

10. Getting started Here are some websites that provide responsive web design templates that you can use to build your website: WordPress Wix.com Weebly

11. Example of Responsive Web Design Desktop View

12. Example of Responsive Web Design View based on the device width