Should I use the same HTML elements / sections for different breakpoints?
I guess the answer is that it depends, but still hope for some general guides on this. So, say I have a nav element which looks and works significantly different at Desktop and Mobile view (i.e. horizontal nav in Desktop and inside hamburger menu in mobile)
Do you use the very same nav element but re-stylize it in CSS using media queries, or you just have a different nav with different style and use queries to toggle visibility of these two? Thanks!
8 Replies
I don't think that's a big difference: all you have to do is position the navbar vertically and slide it outside of the viewport, for example.
Then, you have a separate button, could also be done using the checkbox hack, that toggles a class/position on the navbar so that it slides in/out of viewport.
you generally want to reuse the same markup as much as possible, because duplicating things can be a nightmare for accessibility if you don't do it properly, and it increases the size of the package you have to send visitors to your site
Here's a horrible example put together quickly and carelessly 😄 https://codepen.io/D10f/pen/rNPzNZj
Many thanks to both of you, these answers are super helpful for me!
I am a few months in HTML and CSS now, and while I have a solid grasp on tags / rules / basic concepts, at this point methodology questions like this one are my main point of confusion.
And here is the new one, I have no clue about JavaScript, because I thought it's a good idea to practice HTML and CSS through a few test projects and solidify what is already learned, to avoid a tutorial loop.
But I don't know which tasks are good candidates for JavaScript, and I lose time to keep digging expecting them to be CSS-only solutions. For example, I learned that the navigation menu like in your example could be done even without JS (checkbox hack and some other solutions).
And I am asking myself is there a point to mastering those workarounds if it's done in JS by default 🙂 It would be great if there is a video like "Top 10 things you need JavaScript for).
Long story short, do you recommend starting with JavaScript, mastering these workarounds, or for now just identifying what should wait for JavaScript and continuing to classic CSS tasks?
Also, can one say that generally whatever expects click is a candidate for JS?
I think it's fantastic that you are actively trying to not use JavaScript from start. Is not that JS is bad, but the fact that is so powerful and enables you to do great things, far greater than what could be done with only CSS, is the main cause for being abused for even the simplest of tasks. In my example, it was just that: an example that I put together quickly to make the point across.
JavaScript was originally designed to be used as a utility to enhance the web, not as the main building tool.
So, no, you are not wasting your time by trying to learn CSS-only solutions. Ideally, you would create sites that work even with JavaScript disabled in the browser, and use JS to enhance the user experience. For example, a search form without JS would simply redirect to another page with whatever results were returned from the database. With JS enabled, you could intercept that request to show those results in a modal.
Depends on the expectation from your users, I would say yes, generally today most users don't like being constantly redirected back and forth to different pages and instead prefer having some sort of interaction like a modal or confirmation prompt. Even for long-running tasks (image processing, download files, etc) adding a visual indicator is preferable from a UX perspective.
This is just what I needed, many thanks once again!
For what is worth, I also think is a good idea to explore vanilla JavaScript before diving into the popular frameworks like React, Vue, etc. Similar principle: learn the basics first to be able to understand the differences between what's necessary and what's "nice to have".
I understand. So glad we have this Discord channel!