Responsive web apps in nutshell, teaching mistakes
We should have been told “First fill HTML with content, add stylings afterwards and do it first for small screens”. Instead in first classes about html and css we were taught about html elements and stylings, the first ones that caught our eye was width and height. Ofcourse it’s natural for us to think those are how we decide how content is sized on the page, but it’s wrong.
Website is responsive without any CSS
And noone has told me this untill some cool thorough article mentioned it, this just made so much sense.
I’ve struggled out a lot after 10 classes to create responsive website because we were shown to set fixed width and height on elements.
An example of perfectly responsive article without any sizings, noone taught me that.
Good approach
HTML
Instead, the lectures led me to space content like this.
Bad approach
CSS
HTML
Reasons first approach is good
- We add content first, now adapting sizing and styling is much easier.
- Already responsive.
- Easier to go from small to big screen because it will just expand on bigger screens.
Reasons second approach is bad
- I must use width because that’s what we were taught to use, so it must be how content sizing is controlled.
- What if article is empty? Add width.
- Create empty element, set size, add content after.
- I may have started sizing for big screen, let’s make it responsive, what now?
- Media queries to adapt from big to small, why is my css a mess? why is responsive design so difficult?
Conclusion
HTML is representation.
First add content and structure it with html, think about what the content represents. Is it a group of related content? Wrap it with <article> tag. Is it smaller logical unit? Wrap it with <section> element. Is it small grouped unit that’s counting something, like ingredients? Wrap it with <ul> element.
CSS is visualisation.
Style it afterwards but first open dev tools and from mobile view, work way up to big screen size and enjoy the fruits of work.
I just wish every professor taught us The How to start, by structuring html and adding The How to style with CSS, from small to big screen.
Following up with explaination The Why this approach is good and should be followed.
I’m referencing this article.
