Things I love and hate about Webflow
I use Webflow and I use it almost every day. But there are still so many things that I dislike or hate about it, from bugs to paper cuts to workflow inefficiencies. Here is a brief list:
June 20, 2023
I use Webflow and I use it almost every day. But there are still so many things that I dislike or hate about it, from bugs to paper cuts to workflow inefficiencies. Here is a brief list:
June 20, 2023
I see so many inconsistencies in my layout across desktop, tablet and mobile after I publish. This is one of the things I like about Framer, it displays all three layouts side by side. When I was manually coding my websites, I would have node pushing out all of the changes onto an http port that my browsers on a separate monitor would simultaneously show all three breakpoints and scroll/click at the same time.
CSS variables are now partially supported native features of CSS that lets you programmatically define and manipulate CSS values. With CSS preprocessors, you can bypass the lack of native support to enhance your workflow.
Want to use the same font-size for all of your h1 headings for desktop? Create and define an h1-font-size-desktop variable, then call it whenever you need to. This way, you don’t need to ask yourself or manually type that specific font size anymore.
The main advantage is you can easily change h1-font-size-dektop in one convenient spot and everything will automatically update. In a CSS preprocessor, you can use variables to do all sorts of useful things. Design systems use the notion of “design tokens” to create symbolic links that do most of the same things.
Currently in Webflow, the only type of “variable” you can define is a color swatch. I think Webflow could benefit greatly from making all sorts of variable types available to their customers. This would make consistency across a website an easier task.
Here are some examples of design variables that I think would be useful:
On top of that, CSS variables allow you to perform some calculations and modifications to the variable in a non-destructive way. This can be extremely useful when creating variants for color.
Let’s say that you have an accent color on your website, for mine, it’s 010101. When used on a button, it looks fine but I’d like to create a couple of variants based on that color for the hover state and the pressed state.
I could create two separate colors by adjusting the saturation and brightness values and storing those in two more CSS variables.
But the more intelligent way to proceed is to modify the accent color using the built-in modules of your preprocessor. For example:
Another great example would be to help calculate optically correct padding when you have text. Here is what I mean: in the screenshot below, the padding below “Send me an email” and above the project grid is 60px. However, since the bounding box surrounding the text naturally leaves more inner space below the text, it results in a larger gap in the upper half.
To solve this manually, you would have to measure the excess padding from the text’s bounding box and remove it from the padding-bottom of that div or section in the upper half. Not that bad but you would have to repeat those steps (and remember to repeat them!) every time you changed the font-size of that text.
With CSS variables, you can do that automagically:
I think that having for types of variables, or tokens, open to all sorts of “dimensions” like size, colors, time would have tremendous value, albeit at the cost of a little more complexity. The user interface would have to list all of the compatible variables in a dropdown for every number field and make it usable when wanting to do calculations or manipulations like the ones I described above.
Perhaps having a variables manager inside a separate panel that you could access via an icon on the main toolbar could do?
When I was writing text for my projects, I just pasted dummy text just to get a sense of how much text felt right. Then my first real draft for all my paragraphs was too long but I always planned on editing it later.
After researching on various websites, I settled for 225 characters. So I went to my collection settings and set the maximum character limit to that number.
The first problem I encountered is that all of my CMS collection items broke that upper limit so as soon as I tried to edit one, I was unable to save any of my items! For illustration, I took a screenshot of this error showing up:
So I immediately switched to “writing mode” and tried to edit down all problem fields on each CMS item. But I then stumbled onto a second bigger problem: once a limit is set, the editor will absolutely not allow you to go above or below it, even temporarily! Again here is a screenshot illustrating the issue:
This made the next few evenings extremely frustrating when trying to edit those fields without switching contexts because I had to remember what I had deleted while rephrasing it in fewer words. Yes - I could have used another text editor with a word counter and do my editing there, but it felt like overkill.
A simple fix would be to let users write more characters than allowed at least temporarily, then flag the problem when the user is attempting to save or publish the CMS item.
Access control to restrict access of published pages is only available on static pages or on whole CMS collection pages.
I would like to upload portfolio projects behind a password for things like confidential projects or projects that are still in progress. At the moment, I would have to make a duplicate of my original CMS collection and password protect that template page for all my confidential projects.
This has two drawbacks:
The user facing solution would be to add a new field type for password protection called “Restrict Access” with the following options:
This is a small gripe that I have with the Webflow animation system and it’s only on this list because it took me days to hunt down the source of the problem.
I like the way animations are authored in Webflow. I think that the stack layout works quite well, altough sometimes I really wish that a timeline could be displayed because in certain situations, choreographing a handful of elements is very difficult.
My main issue though is about combining animations. On my project templates page, I have the header and sub-header of the project do a wipe fade in. My original intention was to have a scroll-based animation take over so that when you would scroll down the page, that same text would do a cool reverse transition.
However, I found out that this was impossible to do. Adding a scroll-based animation on the text element would immediately override the page load animation, thus completely ignoring it. I settled for only having the page load animation at the end.
Here is the “working” animation:
And when you add scroll-based animation to the page load animation, this is the result (no scrolling is actually being done in the recording below):
The properties that the scroll-based animation is affecting (opacity and move) are totally lost on the page load animation, and on top of that, the nice clipping effect and the staggering are gone.
I don’t really have a nice solution for this except to tell the animation system to ignore all scroll-based animations while the page load animation is still running. But this could lead to some nasty side effects if the user scrolls immediately and the scroll-based animation kicks in, resulting in a harsh and sudden animation.
The data-driven workflow that Webflow offers to create, design and publish content is amazing. I finally have the ability to design and tailor a good visual system that all my content will follow without additional work. It’s a huge time saver.
That being said, I wish that this data-driven workflow would be more powerful. The original design I had for my home page projects grid was more ambitious but not at all impossible.
While doing research, I really liked how Pentagram laid out their projects grid: a simple grid with nested cells on alternating rows. I wanted to try and recreate it to see what was possible with Webflow.
Af first I thought that I could have easily done it in code using CSS nth-child selectors (by the way, this child generator and this :nth-tester are both amazing). But there is no way to select the first, tenth, eleventh, twentieth and so on and so forth… with the affine expression that nth-child requires (an+b).
So to recreate this layout, I would have had to use Javascript to dynamically add classes to my CMS collection items arranged in two variants:
This selection loop would have to extend forever also. Here is the code to add the right classes to the correct indices:
But personally, I did not want to rely on custom code to realize my design because that meant extra work to create and maintain. And if for some reason I wanted to change the design, all of that work would have been wasted.
So my next step was to try changing the column-span and the row-span values in conjuction with the limited nth-child selectors that Webflow offer, so that I could make this type of layout for my project grid:
Since Webflow supports a limited set of nth-child selectors as outlined in this blog post, I thought was it would be very easy to change the column span so that:
I was able to recreate this layout by faking a grid layout with inline-block and the odd selector:
But I really wanted to use display: grid to make my life easier and my hope was that I could change the values of the column span and row span. But to much of my disappointment, I discovered that the styling for CMS collection items didn’t allow it. All CMS collection items inherit the same column span and row span values and completely ignores the nth-child selector, no matter the value.
Here is a gif of what happens when I try to make the odd items in my CMS collection of column span 2:
.gif)
It would be a game-changer if Webflow allowed:
Before using launching my website on Webflow late 2022, I was manually coding my website to have control over the look and feel of it but also to learn some simple static front-end web development.
For reasons that I will go into later, I switched to Squarespace mostly for speed and convenience. But I have come to be frustrated at the lack of design options that Squarespace offers and I never understood why Squarespace never offered the CMS-like feature where you would style a template page that would be re-used for all of your project pages.
Every time I changed one small detail on one page, such as the size of a title header, I would have to manually go into each page and change every single one of them. After doing that about a dozen times, I stopped making small incremental changes to my website… In other words, because of the bad design of the tool, I stopped being the designer of my own website.
On top of that, I was never happy with the default transitions on most things. I couldn’t control the size of buttons and the color theme editor feels like a random number generator.
On the other hand, Webflow offers near total control over every aspect of your website. If you are comfortable with learning how CSS styles things, you will be making your own website in no time. While I had a few years of experience using HTML, CSS and JavaScript, I still followed Webflow’s excellent 21-day portfolio course that’s freely available on YouTube.
Such a super simple idea with profound consequences: get everybody to use the same editor to make designing for the web literally as easy as copying and pasting. Visual Stackoverflow for designers! Like Figma community files but on steroids: you can copy whole pages, clone websites or just a few elements so that you can restyle them as you wish later on.
That being said, if you are still learning Webflow, it’s still a very fun and useful exercise to recreate a layout or interaction that you like on a real website completely from scratch. I personally use Godly and Siteinspire to find cool things to mimick. You’ll find that with just a few twists on existing layouts, you’ll be able to create something of your own in no time.
I remember when I was hand coding my website and even with node, I couldn’t find a way to get templates working well. There was always some compromise or some missing feature or maybe I wasn’t smart enough to figure out how to use npm packages correctly…
I can’t count how many headaches I got from manually updating 20+ project pages when I wanted to tweak one small HTML tag…
Now thanks to the Webflow CMS, all of my project pages update in unison and without fail. I don’t have to worry about consistency between pages and I can tweak every detail of the page to my heart’s content. If you are a designer looking to make your own custom website and aren’t satisfied with the various templates on Squarespace, Wordpress and the like(I have spent hundreds of pounds in themes…), you should definitely check out Webflow!
Again, when I was hand coding my website, I remember wasting so much time painstakingly cutting all the various sizes for all of my images. I was manually adjusting the compression slider for all of my images in Photoshop to get the smallest size without losing quality.
Then I had to manually type ALL of the markup for every image, which looked the nightmare you see below (Mozilla Docs):
