responsiveness: building desktop to building for small devices is messy
I built the desktop version of a website in webflow,
but then I am faced with making the site responsive. It is not for the faint of heart 😓 especially the more creative the layout.
I think webflow is not mobile first and it's easier to develop mobile first but are they any general strategies or tips people have when making something responsive.
For example I am realizing absolute positioning is a no-no.
I am going to review webbae's video but see if had any tips.
Thanks
2 Replies
web dev is HARD. Been doing it more than two years now and I still get layouts that stump me at first and might take an iteration or two. so don't feel bad.
position absolute is a double-edged sword. Once you get it, tempting to reach for it for tricky layouts. Often leads you down a difficult road when it comes to resonsive design becuase all of a sudden elements on page don't know about it each other. I try to hold off on reaching for pos absolute as long as I can unless I'm very confident about it (simple banner overlay style things, stacking a bunch of items on top of each other)
tips?
1. Study HTML + CSS basics, especially layout systems like flex and grid.
2. Understand transform origins
3. Understand top, left, right, bottom
4. Try to stick to percentage based units, for layout stuff, but don't be afraid to use min/max width/height explicit values too.
5. If clients give designs that don't have mobile variants, ask for them. If they aren't provided, tell them it will result in higher dev cost. (They might go back to the designer). Don't settle for "oh you can just stack it right?"
6. When you follow tutorials or look at examples online, always check multiple breakpoints :). And browsers.
7. Become a power user with inspector. Inspect well-built, popular website like Apple, Vercel, etc.
8. Inspect your own websites. Often Webflow may have snuck in some CSS/JS that they didn't tell you about.
Hope that helps!
That support was perfect, thanks Webbae!