![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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/1.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/2.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/4.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/5.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/6.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/7.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/8.jpg)
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 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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/10.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/11.jpg)
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](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb75503460f94bc0e4a/html5/thumbnails/12.jpg)
Example of Responsive Web Design
View based on the device width