Create Clean and Beautiful Websites Using Grid Based Web Design
Grid-based web design continues to define the future of websites, despite the recent advent of responsive and mobile web design. Defined, grid-based web design is a web design technique based on a website designed as a fixed-width grid, with varying-sized columns which, combined, equal the grid’s total width in a row.
The most-common and used grid-based web design framework is the 960-Grid System, which describes itself as “an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.” Boucher + Co. endorses the 960-Grid System. We use it as a framework for our main website.
Why grid-based web design works for web designers
Using a grid framework like the 960-Grid System frees up valuable time for web designers, who do not need to code as much HTML/CSS from scratch. The grid allows designers to work around a common framework that can be easily modified to seamlessly integrate creative work and additional HTML/CSS. And it allows them to create a website that is clean, readable, and easily accessible.
For example, on Boucher + Co.’s main website, we use grid-based web design to display all website content in a clean and easy-to-navigate way. Links are clearly visible in their own column on the right of each page. Images can be easily aligned in grid format for displaying.
Additionally, grid systems like the 960-Grid System are cross-browser compatible, giving web designers the confidence that a website will appear the same in all web browsers. Major design frameworks include a “reset stylesheet” that further enhances cross-browser compatibility.
Why visitors/customers love grid-based web design
It’s clean. The website’s code is cleaner, the website loads faster in most browsers (due to less-bloated source code), and the website is organized better. The end result is an efficient and accessible website that allows for a better user experience.
How can you create the most value for your visitors/customers using grid-based web design? Categorize content uniformly throughout a website using different-sized grids. Place all links to sub-sections on the right side of the page. Require visitors/customers to navigate from left-to-right. Keep content brief, but relevant.
