DEV Community

Cover image for Finally Understand Responsive Design!

Finally Understand Responsive Design!

Jared Weiss on April 11, 2024

Intro In the realm of web development, the concept of responsive design often presents a steep learning curve for beginners. Even af...
Collapse
 
ludamillion profile image
Luke Inglis

Really solid overview. One thing to keep in mind with viewport units is that the basic units, vh and vw, do not work quite the way you would hope/expect.

The basic units do not take into account any dynamically expanding/hiding UI elements such as toolbars common on mobile browsers. They will always refer to the size of the device display.

To address this there are now lv, sv, and dv. Variants of the basic units. They are long, short, and dynamic.

  • lv assumes that all dynamic UI elements are hidden/reduced and use the remaining viewport as reference.
  • sv assumes all dynamic UI elements are expanded using the remaining viewport as reference.
  • dv attempts to adjust between the two above approaches as necessary.
Collapse
 
jaredcodes profile image
Jared Weiss

That’s a great point, thanks for your comment Luke! It’s amazing how much there is to consider in making frontends properly.

Collapse
 
baysiadev profile image
BaysiaDev • Edited

I do want to post it out to everyone that "responsive" design can and should be done. With everything you see up there, but at the same time, you see that last statement "JavaScript for more advanced options" these are the ones you need, along with media queries, Flexbox and Grid.

And as we are now in a world of "mobile first approach" what was good last year even is no longer good for today to get that fast page speed. I finished my temp site today and I scored across the board in green, but page speed 56 😭 But once you really understand breakpoints, and the types of media that need stop be used now, then your device is ready for Google's simple test at pagespeed.web.dev and I hope everyone knows about Google Search Console as well (i meet a lot of people who don't)👍🏼😊

Collapse
 
codeops868 profile image
Abrao

I hope to get full help from tihis. Always I got in error when I wrote my templates to my Django projects using HTML and CSS.🤝

Collapse
 
baysiadev profile image
BaysiaDev

If you're using VS Code it should highlight any possible errors before you upload your code. I realized the one thing I forgot was to change my alt text, but still got 96 for SEO, but ya, it's not difficult to change and everything is so much better than using a CMS like WordPress. I mean in comparison, I got this site up faster, more secure, less headache, and 100% coded. I hop ai never see a WP site again.

Collapse
 
jaredcodes profile image
Jared Weiss

Thanks for the important additional info!

Collapse
 
ajmas profile image
Andre-John Mas

For me, use of JS is a fallback plan, since while I feel the option is there it feels a little dirty. I always prefer to prioritise CSS and this approach has actually helped me discover features of CSS I wasn’t aware of.

BTW I say this as someone who develops in Vue, so it isn’t a question of not wanting to do JS.

Collapse
 
pavelee profile image
Paweł Ciosek

Great article! 👏 Keep it up! 👍

Collapse
 
jaredcodes profile image
Jared Weiss

Thank you! More to come :)

Collapse
 
codesushil profile image
Code With Sushil

Thq

Collapse
 
jaredcodes profile image
Jared Weiss

🙏

Collapse
 
mezieb profile image
Okoro chimezie bright

thanks nice work

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome 🙏

Collapse
 
ganeshpulsars profile image
Ganesh

Nice article. Thanks

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome 🙏

Collapse
 
lifetech365 profile image
LifeTech365

I gladly appreciate on this part as I'm scaling up my ui.it really summarises all the concepts

Collapse
 
jaredcodes profile image
Jared Weiss

Great to hear!

Collapse
 
soufianemouajjeh profile image
Soufiane El mouajjeh

this is helpful thank you

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome!

Collapse
 
sharmi2020 profile image
Sharmila kannan

Nice article

Collapse
 
jaredcodes profile image
Jared Weiss

Thanks!

Collapse
 
zakari99 profile image
Zakari99

nice one, Jared and thanks for the insites

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome!

Collapse
 
simplyvijay profile image
Vijay Venkatasubramani

Very useful!

Collapse
 
jaredcodes profile image
Jared Weiss

I’m glad!

Collapse
 
pizofreude profile image
Pizofreude

Solid pointers, UI/UX and responsive design to adopt to different screen sizes and also prioritize user-friendly navigation can significantly enhance the overall success of a project.

Collapse
 
jaredcodes profile image
Jared Weiss

Thank you! Agreed.

Collapse
 
nnnirajn profile image
Niraj Narkhede

Beautiful !

Collapse
 
jaredcodes profile image
Jared Weiss

Thanks!

Collapse
 
backbone profile image
Modul

many thanks for your efforts.

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome!

Collapse
 
sejupaga profile image
SeJuPaGa

That’s a great subject, thank’s a lot Jared

Collapse
 
jaredcodes profile image
Jared Weiss

You’re welcome!