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
https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-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
https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/

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

9. Bitmap images vs Vectors
https://filecamp.com/blog/vector-vs-bitmap-images-explained/
https://www.lifewire.com/vector-and-bitmap-images-1701238

10. Make it till it breaks
https://bradfrost.com/blog/post/the-principles-of-adaptive-design/
------------------------------------------------------------------------------------

////////// Sign up for my Monthly Newsletter