Responsive Web Design | 10 Basics

Responsive Web Design is a standard now in web design, but it can be a little confusing for those that are just getting started. What are the fundamentals? what are the “must-haves”? In this episode, I try to answer those questions. Remember to Subscribe https://goo.gl/6vCw64

—————————————————————————————-

These are the 10 basics of Responsive Web Design and links for further reading

1. Responsive vs Adaptive web design

Responsive Design vs. Adaptive Design: Whatโ€™s the Best Choice for Designers?


https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
https://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8

2. The flow
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
https://marksheet.io/css-the-flow.html

3. Relative units
https://thecssworkshop.com/lessons/relative-units
https://www.tutorialrepublic.com/css-tutorial/css-units.php

4. Breakpoints
https://responsivedesign.is/strategy/page-layout/defining-breakpoints/
https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

5. Max and Min values
https://www.sitepoint.com/creating-media-queries-for-responsive-web-designs/
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

6. Nested Objects
https://www.smashingmagazine.com/2019/03/robust-layouts-container-units-css/
https://www.quackit.com/css/flexbox/tutorial/nested_flex_containers.cfm

7. Mobile or Desktop first
https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

A Hands-On Guide to Mobile-First Responsive Design

8. Webfonts vs System fonts
https://responsivedesign.is/articles/should-i-use-system-fonts-or-web-fonts/

9. Bitmap images vs Vectors

Vector vs. Bitmap Images Explained


https://www.lifewire.com/vector-and-bitmap-images-1701238

10. Make it till it breaks

The Principles of Adaptive Design


————————————————————————————

////////// Sign up for my Monthly Newsletter ๐Ÿ“ซ
http://jesseshowalter.com/newsletter

////////// Like What I Do, Buy Me a Coffee โ˜•
https://www.buymeacoffee.com/jesseshowalter

////////// Music is from Musicbed click below for a free trial ๐Ÿ‘‡๐Ÿผ
http://share.mscbd.fm/iamjesseshow

////////// Equiptment ๐Ÿ“ธ
https://www.amazon.com/shop/jesseshowaltertv

////////// Connect with me here ๐Ÿ‘๐Ÿผ
Twitter: http://twitter.com/iamjesseshow
Anchor: https://anchor.fm/iamjesseshow
Instagram: https://www.instagram.com/iamjesseshow
Medium: https://medium.com/@iamjesseshow