I just wanted to make a post regarding the breakpoints and general designer layout when it comes to implementing responsiveness, in the hopes that it will be another flag on this issue for the dev team to see.
I don’t need help with a specific problem but I’m interested to hear anybody’s input on this topic. Just for context, I’m a professional designer and website builder so I know my way around CSS, etc. And know that my code is solid. This post is more just a general issue raising. I should say that I love Webflow and prefer it over WordPress etc. Because of the freedom it gives me as the developer, so hopefully, this post doesn’t come off as a rant. I want to help make this product better!
Now to the issue…
The designer simply doesn’t match the reality of a live site, and neither does the preview. This problem exists across most of the breakpoints available but is particularly egregious on Tablet and Mobile breakpoints. I have built multiple sites now using Webflow and not once have I found the designer layout actually matches the reality of a live site. It is obviously very frustrating to have to repeatedly go through and tweak things again and again to the point of disfiguring your designer layout in order for the live site to look right. If I have to do that, what’s the point in the designer layout in the first place?!
The second thing is breakpoints in general. The baseline breakpoint is supposed to be the bedrock of the whole system allowing you easily scale up and down from there. But
that’s just not how things turn out in practice. I appreciate that you can’t cover every single possible variation. But there are clearly common resolutions that we all know. 1440x900px etc. This is attempted in Webflow designer but the screen height view adjusts to your own screen instead of locking on the actual pixel height associated with a given resolution. This is misleading because you think you have a solid-looking design only to find out it’s over or undersized when it goes live.
A very simple thing that can be done when designing a site in Adobe XD or Figma is simply adding a given height in the layout overview. This would be a very simple thing to implement inside Webflow, and there could then be an option to have the view auto-zoom to show that area. So you know the actual dimensions you are working with.