For many years designers have been using grids to organize content in both print and web.
Grids create order from disorder. It provides an innovative way to structure, unify, and separate content on a page. It establishes balance and helps to maintain consistency across different sections and pages.
Grids have always been important in print. Look at your daily newspaper, whether it be the New York Times, Wall Street Journal, Boston Globe, USA Today, Washington Post, or any other publication. They all use grids to arrange pages of text and images. The same can be said for the web.
“A balanced and consistently implemented design scheme will increase readers’ confidence in your site. [...] Your first step is to establish a basic layout grid."
If you ever used a piece of graph paper, you are familiar with a grid. It too provides a way for organizing and arranging information. Grids as used on the web and in print are just that: a way of arranging information in a way that is consistent and logical. A basic grid is made up of rows, columns, modules, and gutters:
Now that you know the basics of a grid, we'll now see how it is used.
Grids are made up of rows and columns.
You know that a grid is used to logically arrange content. It creates order and makes for a better experience. You've just seen how the basic grid is set up and the parts of it. Now you will see how it is actually used to create dynamic, usable, and interesting layouts of content.
On the web most people use a very simple grid everyday– two or three column layouts. However, we can create more interesting layouts:
In the demo, we've seen how a grid is used to set up content. It creates order and allows for minimal to complex layouts.
We know that using a grid allows for a consistent and refined experience. So why is this important? Why does it matter for your business?
It's been observed that on the web, users have a much shorter attention span and will quickly leave a site if they can't easily find what they want. For a business owner that may mean you losing business to a competitor.
Learn more about this next.
The average attention span of a user online is less than ten seconds. About that of a goldfish. Your site needs to look and work well.
We know from before that a grid helps to organize content on a page. It creates order and results in better experiences.
So what? Why is that important for my business? Why should that be important?
"The fact is, a web visitor is likely to leave your site within less than 10 seconds after arriving. Read that again – your average web visitor is gone in 10 seconds. Yikes."
People want to find information on a website quickly. They want to skim and find what's important to them. If they don't immediately find what they want on a site, they give up and leave. For you this may be them leaving to a competitor. You don't want that.
Take these statistics:
That's one way why a grid is so important. But there's another reason. Mobile.
People are using the web on more than just desktops and laptops: they are using smartphones and tablets to access information online and interact with others. Your business needs to be where your customers are. And the grid can help with this as well.
In the next section you will learn about responsive design, a new way of building websites that work anywhere. One site that works on all devices, not different sites for different devices.
A grid makes this possible.