Different neon arrows in blue, yellow and magenta
3 best practices when building Webflow sites
Webflow is a great tool for building custom, responsive websites. There are no updates to run and no plugin conflicts to solve. You are not dependent on the features and functionality a particular theme or template provides you. Instead you can freely design your own custom site and just grab certain elements like sliders, FAQ catalogues or hamburger menus from cloneable sites and adjust them to your needs. However, there are a few things to keep in mind when building your own (or your client's) Webflow site to make maintenance as easy as possible. In this post I'm highlighting three best practices to consider when you're working in Webflow.
Haven't tried Webflow yet? You can sign up for an account here (yep, that's an affiliate link). All done? But now, let's get started!
I can't say it often enough: name your classes! Name your classes in a logical manner to make it either for yourself or others to make adjustments to styling and layout at a later point in time and to re-use classes easily in different areas of your site. There are various approaches you can take in terms of actually naming your classes. Some agencies develop an agency-wide system that is adhered to by all designers. If you're a freelancer working for yourself, you're basically free to choose your own naming convention. One useful approach includes the BEM (block/element/modifier) method which is also very nicely explained in this Free Code Camp Article. Whatever you do: don't let Webflow name your CSS classes for you, otherwise you site ends up being a hot mess and very hard to maintain – this is a nightmare especially if you're not hosting your site with Webflow and exporting your code and using it elsewhere.
I didn't do this when I first started out working with Webflow, but now I'm including a custom stylesheet in every new project I'm working on. Most of my custom web design projects start out as an Adobe XD, Sketch, or Figma file with all colours, fonts or hover states already defined. This file is either set up by myself if I am doing the UI design and Webflow development or by the agency I'm working with. When I start developing the site in Webflow, the first thing I do is create a new page on which I specify styles for typography (H1-H6, Paragraphs etc.), brand colours, and button styles. Oftentimes I also already set maximum sizes for certain container divs I am re-using on each page. By doing this I save lots of time as all the essentials have been pre-defined and I only have to make a change once and it is applied throughout the site. Easy! One last tip: when styling typography – H1-H6 etc. – use "All H1 Headings" or "All Paragraphs" instead of a unique class name. Doing this allows you to have the correct style applied as soon as you first place a Heading or Paragraph element onto your page.
Remember to structure your Webflow pages correctly. Always start with a section element and then use divs to structure your content within it. Often it's beneficial to place a div with a particular maximum width into your section first, before adding any additional content. Try to make little "pockets" of content for instance group a heading with a paragraph and a CTA (call to action) button below into one appropriately named div. Also, don't forget to add some right and left padding to each of your sections, so your content doesn't touch the left or right edges of the screen in mobile view (or when the size of the browser window has been reduced on desktop). For arranging elements on a page, I use Flexbox more often than not, due to its better browser support. To check if certain layout functions are widely adopted by different browsers, you can always check https://caniuse.com/.
So, there's certainly more to consider when building well thought-through sites with Webflow, but this should just serve as a starting point on what to look out for when building your site. Have you got anything to add here? Get in touch!
Wait, you haven't got a Webflow account yet? You can sign up for one here (yep, that's an affiliate link). All done?
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
