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
source
Good job
I really don't know where im going wrong with my code but I find myself using a lot of Media Query break points because the website just looks very irregular every time i size it down (i started coding for PC first)
thank you
Amazing video as allways Jesse!
Was seeking out for this video only, thanks bro!🙄👍
info video
Tara Mcpherson???? 👀
Dude love your videos! u rock
Hi Jesse , excellent video. Just wanna tell you that in a well done responsive design you need to write rules for margins, padding, font size, and others so you can get a congruent final design not just scalable blocks or multiple columns to one or two ! ; ) ⭐️⭐️⭐️⭐️⭐️
super awesome video! Clear and precise!
So I went to a vocational school to learn web design, yet none of these things were EVER mentioned. Why, why, WHY?!
Excellent stuff
trash
This has given me more knowledge than my years of web design put together. Wow, I am really grateful
I thought vw and vh meant vertical width, vertical height. I have a 3 column responsive (well SHOULD be) blog, and it has pixels. Should I change those over to percentages and em's and rem's?
Great content. I teach the basics of HTML and CSS. This really helps to wrap up the content to show what the students need to focus on to take their knowledge into the real world.
Excellent !
I also do Desktop first design. 😁
Very informative video, thanks for it.
great content
0:37 stevewilldoit intro
Bruh, perfect explanation one needs about responsive web des. Proper examples, description everything 😍
Lovely video 😇
I am currently in a class and we are getting into responsive web design in a couple weeks. I always like to scout what information I should be expecting and I appreciate you sharing this.
Have a good day,
Holy cow, giving SPECIFIC examples while explaining or just giving a word can help understanding things sooo much faster. Thanks a lot!
Sorry for a silly question, how do you use relative unit in design tool, i.e. Sketch, as you can only assign pixel to font? Where does the em thing come in? When handover to developers? Also, thanks for the awesome video 😀
Great.
Thanks for a very good succinct video about this!
I've done a mix of back/front development, and always forget some details here and there.
So a nice overview yours, of responsive design, is very helpful.
Thanks!
You are the male version of Drew Barrymore. 😀
You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
Try it out http://www.pxcode.io , there's tutorials on our channel as well 😉
awessome list and explanation, im suscribing right now
Thanks for sharing.
#introduction_web_design_q
RIP my ears at the start
So nice
Man I have so much to learn.
This is amazing content. Thank you..
Question: Does web builders already have these principles in mind? So if I use a builder I still need to make sure these are incorporated?
Thank's clear and precise
Brilliant!