Introduction
For some designers who don't know how to code, using Webflow is the first time that they have been given the keys to be able to develop websites from scratch. Without knowing the best practices, it's inevitable that this can turn into a recipe for disaster.
Websites that are built around a consistent system help keep them responsive on all devices, speed up the time taken to develop new pages, and make it faster to debug and add to as a company grows.
Starting without a blueprint of how the content is structured can lead to a website becoming messy fast. A common cause for this is when a website is developed to look right on desktop, but without factoring in how that design is going to change for different device screen sizes.
No matter how much your website is tuned to reflect your target customers, if your website is not initially built from a stable system, it's going to become harder and harder to manage.
Starting with Sections
All websites are built with sections that fit perfectly one on top of the other, like the different floors of a building. Commonly, sections are split with a change in colour, change of layout, or just a large gap of space to indicate a separate idea. Building using sections makes it quick and easy to rearrange the order of content on a page.
When using Webflow, you can drop a section element into your project and give it a class of "Section", so that you can style it when needed. You can also give it some top and bottom padding, so the content inside isn't rubbing up against the edges. Alternatively, you can add some breathing room using spacers, which I will go into detail about later on.
It's a good practice to set up combo classes of the different coloured sections you are planning to use throughout your website, such as "Green", "Light Grey", and so on. This means you can quickly add or change the colour of a section at any point when you're building new pages.
Adding Containers
Modern websites are built for the content to respond to any and all different device screen sizes. However, when a screen size gets too big, you don't want to have to develop a completely different layout where the content always stretches to the edge.
This is where containers come in. Containers create a limit of how wide the content can get. It means that on large screen sizes, it will still use the same design and layout as the regular desktop size.
You can either use Webflow's default containers, or if you want a different maximum width then you can add a blank div, give it a max width of your choice (around 1200px is common), and set left and right margins to auto, which will center it in the middle of the page.
Adding some left and right padding will then give the content some space on the edges when a screen size is smaller than the max width. Usually it will be around 30-40px on each side for desktop and tablet, and 15-20px on mobile, but you can adjust this to what suits your design best.
The 12 Column Grid
Webflow has a range of in-built elements that can be used for a variety of different layouts. The problem with this lies in the fact that often, designers using Webflow will build new layout styles each time they create new sections. This means that no classes are reused, and to update a page you have to individually go through every single element in each section.
To combat this, I use the same layout for 90% of the sections I build. This makes it faster for me to build new sections, adjust for different screen sizes, and explain to my clients the system used throughout the website.
This layout is the 12-column grid, the same grid used for Bootstrap websites. It makes it easy to align everything in a clean and precise way across a website. It also becomes effortless to convert a design on Figma or Sketch for development if you’ve designed off of a 12-column grid.
