Responsive Web Design | 10 Basics

Responsive Internet Design | 10 Fundamentals

by



Responsive Internet Design is a typical now in internet design, however it may be a bit complicated for these which might be simply getting began. What are the basics? what are the “must-haves”? On this episode, I attempt to reply these questions. Bear in mind to Subscribe https://goo.gl/6vCw64

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

These are the ten fundamentals of Responsive Internet Design and hyperlinks for additional studying

1. Responsive vs Adaptive internet 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 move
https://developer.mozilla.org/en-US/docs/Study/CSS/CSS_layout/Normal_Flow
https://marksheet.io/css-the-flow.html

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

4. Breakpoints
https://responsivedesign.is/technique/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. Cell 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 pictures vs Vectors

Vector vs. Bitmap Images Explained


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

10. Make it until it breaks
https://bradfrost.com/weblog/publish/the-principles-of-adaptive-design/
————————————————————————————

////////// Need to help my content material and get additional goodies? Turn out to be a member and get perks like member-only content material, behind the scenes, design recordsdata, and extra…
https://designchamps.io/hip

////////// Join with me right here 👍🏼
Instagram: https://www.instagram.com/imjesseshow
Twitter: http://twitter.com/imjesseshow
Anchor: https://anchor.fm/imjesseshow
Medium: https://medium.com/@imjesseshow

////////// Join my Month-to-month Publication 📫
http://jesseshowalter.com/publication

////////// Music is from Musicbed click on beneath for a free trial 👇🏼
http://share.mscbd.fm/imjesseshow

////////// Gear 📸
https://www.amazon.com/store/jesseshowaltertv

source

43 thoughts on “Responsive Internet Design | 10 Fundamentals”

  1. Responsive design, flow, relative units of measurement ( px vh ), breakpoints, maximun and minimun value, containers or nested object, mobile or dekstop first, webvonts anf system fonts, bitmaps and vectors, make it work

    Reply

  6. Nice tutorial video, Jesse. Very nicely done. Thank you for your insight in web design. I used your video as s sort of introduction to the topic even though I'm certain I've read about it previously. It really helped to get a global view of what web design entails, and I must say that you are pretty darn thorough considering that this is a very general video. Looking forward to checking out your next one. Kudos for you, dude!

    Reply

  13. 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)

    Reply

  20. 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 ! ; ) ⭐️⭐️⭐️⭐️⭐️

    Reply

  31. 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,

    Reply

  33. 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 😀

    Reply

  35. 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!

    Reply

Leave a Comment