Intro
In the realm of web development, the concept of responsive design often presents a steep learning curve for beginners. Even af...
For further actions, you may consider blocking this person and/or reporting abuse
Really solid overview. One thing to keep in mind with viewport units is that the basic units,
vhandvw, 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, anddv. Variants of the basic units. They are long, short, and dynamic.lvassumes that all dynamic UI elements are hidden/reduced and use the remaining viewport as reference.svassumes all dynamic UI elements are expanded using the remaining viewport as reference.dvattempts to adjust between the two above approaches as necessary.That’s a great point, thanks for your comment Luke! It’s amazing how much there is to consider in making frontends properly.
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)👍🏼😊
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.🤝
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.
Thanks for the important additional info!
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.
Great article! 👏 Keep it up! 👍
Thank you! More to come :)
Thq
🙏
thanks nice work
You’re welcome 🙏
Nice article. Thanks
You’re welcome 🙏
I gladly appreciate on this part as I'm scaling up my ui.it really summarises all the concepts
Great to hear!
this is helpful thank you
You’re welcome!
Nice article
Thanks!
nice one, Jared and thanks for the insites
You’re welcome!
Very useful!
I’m glad!
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.
Thank you! Agreed.
Beautiful !
Thanks!
many thanks for your efforts.
You’re welcome!
That’s a great subject, thank’s a lot Jared
You’re welcome!