When it comes to design, organization is key. A cluttered, messy or otherwise difficult-to-navigate website will have visitors clicking away faster than you can blink. But what’s the best way to organize your layout for maximum effectiveness?
Traditional websites typically follow a standard header-plus-text layout, but there are also variations on tradition. Split screen, minimalistic or full screen layouts (made up of a single image and some navigation) and modular or grid layouts are all popular alternatives.
The latter in particular has become increasingly favored over the last few years due to a few notable benefits, including ease of use, visual appeal and responsiveness in the mobile market.
In fact, for designers or companies looking to improve the appeal of their current, non-modular sites (and boost conversions in the process), using a grid layout may be the most effective solution.
How Grids Improve Conversions
Grids are made up of intersecting horizontal and/or vertical containers that serve as guides for other elements of the design, which makes it easy for both designers and developers to add, change, or remove features as needed.
But it also comes with several benefits for the user as well.
Grids are user-friendly. A grid layout reinforces order, letting the user skim information quickly while still being able to comprehend enough of it to make decisions. If the site is for a product, for example, the user would know what the product looks like, what it does, who it’s for, and where to buy it within the first few minutes of browsing its landing page. Grids let users know – almost subconsciously – where to look first, which information is the most important and where to go next.
Grids are ad-friendly. Print designers have been using grids in newspapers, books and other periodicals for hundreds of years, and for good reason: grids make it easier to include ads alongside content. Even in web design, grids are helpful for separating content into categories as well as adding and removing ads as needed without adding to the clutter (especially helpful for content-heavy sites).
Grids are visually appealing. Squares and rectangles – the foundation of the grid layout – are considered to be stable and trustworthy shapes, as they provide a sense of visual equality and conformity without drawing attention from other more elaborate visual elements. In short: they’re building blocks. Developers already use CSS boxes to organize content on the backend. Using them for frontend design too can improve the visual appeal of the site while leaving a well-organized foundation in place.
Grids are responsive. Grids are also convenient for displaying content on multiple screen sizes, including mobile. Content containers can scale to any width and can be stacked as needed for a seamless scrolling experience. Instead of fitting the content you need to the layout of your site, you can fit the layout of your site to meet the content you need on the device(s) you want it viewed on.
Does Grid Type Matter?
Not all grids are built for the same purpose, however. There are a few different types of grids that can be used to organize your content according to your needs, and while all of them have the same benefits listed above, they may not all work well for your site.
Steven Bradley from Vanseo Design discusses a few different types of grids (giving visual examples of each) and their impact on design, listing four of the most popular types:
- Manuscript – The simplest grid structure, manuscript grids are good for continuous text or heavy-content sites
- Column – The most common grid type, column grids are good for discontinuous information and various media types displayed on a single page
- Modular – Modular grids are column grids that also have horizontal divisions marked by rows and are good for complex sites (image galleries, shopping carts, etc.)
- Hierarchical – Hierarchical grids organize content more organically and are often used when none of the above options fit well with a site’s content
How do you know which grid type will work best for your site? According to Usabilla, it’s important to understand which content is the most critical so you know how you want to display it on your website.
Content-heavy sites that have mixed media (images, video, text, etc.) may benefit most from manuscript or modular grids, whereas a basic business website might use columns, modular or both depending on the landing page.
Mobile sites, in particular, can make the most use out of modular grids. (Our directory theme "Mobile Compact" allows you to use modular grids quickly and easily.)
Which Grid Type Should You Choose?
You should also consider your audience and the devices your site will be viewed on. Is there enough content where scrolling becomes an issue? Will content stack properly on a mobile device if you’re using a column grid? Identifying the experience you want users to have can help you determine which grid system is best.
However, James George from Sitepoint notes that designers shouldn’t fret over grid types, saying:
“Many designers use a grid as the foundation for every one of their designs. Some will use a 12-column grid, some will use a 16-column grid, some will use a 24-column grid, and others will use anything in between. The point isn’t so much the type of grid that you use, but the fact that you use one.”
He also notes that he prefers column grids (typically with 12 or 24 columns) for their flexibility when it comes to blocking off content. “[Columns make] your design very malleable,” he says, “because you can mix and match different combinations as well. You aren’t stuck with only using even and symmetrical layouts.”
Ultimately, the choice in grid type is decided by the designer as well as the content of the site and the design itself. The nice thing about grids is they offer many different choices for arrangement and are easy to use or change as needed. If you’re not sure a grid is working for you, you can always make adjustments.
Grid layouts can help designers and developers organize content on a site in a way that fits their needs while remaining user-friendly, ad-friendly and flexible (as well as beautiful).
When it comes to choosing a grid layout, it’s important to remember that the grid type is less important than organizing your content in a clear and concise way. If a site requires a lot of content but will be viewed on mobile devices, for instance, a modular grid layout can help organize content while remaining flexible for multiple screen types.
Alternatively, if a site has a relatively small amount of content but wants to capitalize on other mediums like images or video, column or hierarchical grids can provide an underlying structure without compromising the design itself, giving users an aesthetic yet focused experience.