Before I start, and to give you some context, a little about me:
I have been designing websites since 2010 and using Webflow since 2014, when there was no CMS and Sergie Magdalin had some hair. I was a no coder, sort of fell into web design by accident and wouldn’t understand CSS if it bit me in the arse. (ass).
I have designed over 300 websites for local companies and manage around 80 active websites which are either hosted by me or Webflow. I rarely develop sites for other designers and never collaborate on Webflow sites.
“Oh, so that’s why you don’t like CF then, Hywel?”
Well yes, but there’s more: why is CF – and frameworks in general – so complicated? Why should we have to learn so many global and combo classes to get work done? How often do we have to dive into the Style Sheet to try and figure out which class needs to be applied to a given element?
And, most importantly, do these frameworks actually make us work more effectively?
Have you ever downloaded a template from Webflow? It’s a nightmare. Classes all over the place, strange measurements, lack of responsiveness. It did it once for a client years ago and still have to manage the sodding thing for him.
There may be a bunch of devs out there who have been using tried and trusted class systems like BEM for years and swear by it, but, given my experience of coding from other devs, most don’t stick to any sort of practical system, and this is why Finsweet decided to act. And fair enough.
FS divides the elements into four types:
The last two are standard features in Webflow and I don’t have major problems with these, although I shall outline how the use of Global Classes can turbocharge any build a bit later.
Custom Classes are also, IMHO, OK. Footer_column seems a fine way to describe a column in a footer as does nav_link. Some of the descriptions seem a little long-winded, but they make sense.
No, my issue is with the use of Utility Classes and, just to be clear, these are described by CF as:
“A utility class is created for a specific combination of CSS properties, which can be applied to elements across the project. For example, a class for background-color or a class for font-size. Utility classes will not use an underscore in the class name.”
That sounds fair enough, but look at how FS suggest you use them:
“Client-First sets a default core structure to follow across all builds.
In other words, before a single image or text is added we have a structure that looks like this:
Let’s break this down:
I love FS’s desire to manage classes to control the overall look of the website, I just don’t think the above is the best or fastest or easiest way to do it.
Here, FS have a similar approach:
Thes are all great naming conventions, but how many combo classes would you have to add to adjust for text weight, colour, size and alignment? Three, and is that logical? Give the text a descriptive name, ideally based on characteristics not location. Finsweet agree on this and recommend avoiding class 'stacking'.
FS suggest the use of REM and I agree; it’s great for text size. It honours the visitor’s browser preferences and produces great results on various breakpoints. But for padding, margins and spacing?
What’s wrong with using vw for screen width and vh for screen height? They are both responsive measurements, something REM is not. Through its association with Body font size - 1 REM = 16 pixels (eg) - and why use pixels, for pretty much anything today?
I think I know why – tradition that’s why. Over the forty or so years of the internet we have two disciplines involved in the production of websites, the designer and the developer, and work is passed along the chain from one to another. Designers tend to use systems like Figma, Photoshop, and XD for design – all using pixels for measurements – and, although design systems are getting better at producing responsive designs, they have traditionally required the developer to convert that fixed measurement to something responsive or, that old maxim: pixel perfect.
This leads to the complex maths involved in converting pixels to REMs. So why use REMs for horizontal and vertical measurements? You are using pixels again.
Lots of elements of Client First are excellent. I love the desire to make things simple, reproducible and understandable but I don’t like the complicated folder structures and the multiplicity of classes.
(I am also conscious of the fact the FS recommend a slightly more relaxed approach on smaller sites, so fair play for that comment.)
So, what would I suggest to improve things?
When deciding on a classification system for a website, I consider two areas:
If you are working on a large, complex site, then a decent classification system is important, even if you are the only person working on it. You need to adopt class standards that are easy to remember and easy to change. A small one-off site needs fewer rules, but why change the principals?
If other people have to work on a site, then a descriptive system is required and CF is a good starting point, however CF’s massive Client First instruction site leads one to suspect that most of the 1.7m Webflow developers – won’t have spent their time learning the craft between doing paid work.
So, how do we improve this thing?
Use whatever system you like. Having said that, I will always use the same system – see below.
As above, but with more descriptive naming conventions.
Structure naming conventions as below.
As above but with more descriptive naming conventions.
I used a CF cloneable to produce a website then adapted it to fit some of my ideas and this how I changed things:
Although I am not a coder, I have a suspicion that I work like one. I sort of expect that a series of simple keystrokes should produce what I am looking for, rather than faffing around with a mouse.
I don’t have to check on the correct naming convention in the Style Guide to make a paragraph centred, I just add ‘Centre’ as a global style to a paragraph – or the blindingly obvious ‘Caps’. I just add pd2 to add medium left and right padding to an element then add a quick vs1 as vertical spacer.
My system reminds me of Wordperfect 5.1 – yes I just about remember it. It had a series of keyboard commands which allowed you to change any element you like with the flick of keystroke. Legal secretaries loved it; it was an incredibly fast tool – much faster than the program that took over, Word.
I have worked in a number of software houses and one thing I remember so vividly wasn’t the software, it was the customer’s reaction to the software. While the devs showed off the updates with pride, the customers would cringe. Making software easy to use is the key to a great system and I feel my way of working does just that – makes development and even design, faster and more efficient.
Frameworks should offer two things: consistency and effectiveness, in my opinion complex frameworks like CF and Webflow offer the first but don’t address the second. Unless you are in a large, sharing organisation, I would suggest you consider a simplified system as above. It works for me.
What do you think?
Design a logo for free
August 26, 2022
Logo design costs. A lot. We show you how to create a logo for your business.
How I accidentally increased website visitors by 2.3 million %
October 11, 2021
When a little local initiative kicks off
6 Web Design Traditions to Stop Using in 2021
March 23, 2021
Just because you've been doing it that way for years, doesn't mean you should continue to do it.
Anatomy of a bad website
November 12, 2020
A website that doesn't provide an easy answer to visitors' questions isn't doing its job
How to build an effective website for yourself
September 10, 2020
Forget everything we’ve been told about web design; effectiveness is a whole new skill.
Great software to manage your small business
March 1, 2019
There's a huge choice - here's how we found our perfect system.
Should I use a Website Builder or a Web Designer?
February 2, 2019
Pay a professional or do it yourself?
Creating a website - before you start work
January 10, 2019
A website isn't just a collection of pretty pictures; it needs to attract visitors. Here's a brief guide.
Google Ads for Dummies
December 6, 2018
Here's a rundown of the pros and cons of using Google Ads for small businesses
How to optimise images for your website
August 14, 2018
We guide you through optimising images on your website.
10 free ways to promote your website for UK small businesses
July 5, 2018
A new website will never be seen unless you help, here's a few ideas to get you started.