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/
------------------------------------------------------------------------------------
////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
https://learn.jesseshowalter.com/membership
////////// Connect with me here 👍🏼
Instagram: https://www.instagram.com/iamjesseshow
Twitter: http://twitter.com/iamjesseshow
Anchor: https://anchor.fm/iamjesseshow
Medium: https://medium.com/@iamjesseshow
////////// Sign up for my Monthly Newsletter 📫
http://jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
http://share.mscbd.fm/iamjesseshow
////////// Equipment 📸
https://www.amazon.com/shop/jesseshowaltertv
Видео Responsive Web Design | 10 Basics канала Jesse Showalter
----------------------------------------------------------------------------------------
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/
------------------------------------------------------------------------------------
////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
https://learn.jesseshowalter.com/membership
////////// Connect with me here 👍🏼
Instagram: https://www.instagram.com/iamjesseshow
Twitter: http://twitter.com/iamjesseshow
Anchor: https://anchor.fm/iamjesseshow
Medium: https://medium.com/@iamjesseshow
////////// Sign up for my Monthly Newsletter 📫
http://jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
http://share.mscbd.fm/iamjesseshow
////////// Equipment 📸
https://www.amazon.com/shop/jesseshowaltertv
Видео Responsive Web Design | 10 Basics канала Jesse Showalter
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Responsive design made easyLearn Flexbox in 15 MinutesFigma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)3 Principles for better Web Design: Navigation, Hierarchy & Color5 CSS mistakes that I see way too often17: How to Make a Website Responsive | Learn HTML and CSS | HTML Tutorial | Basics of CSSLearn CSS Units In 8 Minutes5 CSS tricks every Web Developer should know in 20215 UX Design Tips & Techniques | UX Design BasicsWeb Design Trends 2021Methods for mobile (Responsive vs Adaptive Design)Your Layouts are BORING! Layout Design Tutorialmin(), max(), and clamp() are CSS magic!Responsive Web Design Tutorial For Beginners With ExamplesFlexbox CSS In 20 MinutesCSS em and rem explained #CSS #responsiveThe 2019 UI Design Crash Course for BeginnersResponsive CSS Grid with NO MEDIA QUERIES!Responsive Web Design Without Media Queries5 tips for designing mobile-friendly websites