How to Design Web Pages in Columns
Because similar page designs (such as a three-column design) hold different amounts of content, when you are designing web pages, you have to plan for where the extra content will go if it doesn’t fit within the column.
The simple answer: Down. The point: Scrolling vertically (up and down) instead of horizontally (sideways) in web pages is much more intuitive and functional. On the negative: Scrolling back and forth, and back and forth, and back and forth (you’re getting the point) with a horizontal scroll bar really breaks the flow when people are trying to read a page.
In other words, people can much more easily scroll up and down than they can scroll to the right and left.
Although rows (horizontal sets of content) play a role in web page design, columns define page design. A 960 grid page can be as long or short as you want it to be. But one way or another, page design has to allow content to expand down.
The basic options are these:
You can have columns without defined height, allowing content to expand down as far as necessary.
You can define column heights, but then you have to invoke other techniques for allowing content to expand down, like scrollable or collapsible boxes.
If you survey many well-designed web pages, you’ll see that not only are they overwhelmingly laid out in 960 px containers, but they’re all essentially laid out in either two or three columns.
Really? When you survey a lot of well-designed sites, they won’t appear to be laid out in two or three columns. They’ll look like they’re laid out in 5 columns, or 8, or 11. But if you hold a ruler or a sheet of paper up to the screen, you’ll see that underlying all the columns in a page is a more basic design.
Take a look at the IMDb (Independent Movie DataBase) page. At first glance, it might appear that this page is laid out in five or even eight columns (if you count the three columns in the lower right).
But if you trace a line about three-quarters of the page from the left edge, you can see that underlying the five visible columns (in most of the page) is a more basic two-column structure. That basic two-column division is illustrated here:
The takeaway is this: When you design pages, it’s easy to split columns — to divide them into two, three, four, five, and more columns. However, it is technically easy to split page layout elements, but technically difficult to allow content to span across two defined columns. So the rule for technical reasons, is that columns in web design are easy to split but hard to merge.
So when it comes time for you to translate a design into a web page, first divide the page into either two or three columns, and then further subdivide those columns as needed. For example, The New York Times site looks like it’s divided into five columns.
But when you zoom out and take a look at the page shown in the following figure, you can see how underneath those five columns are actually two columns, each of which is further subdivided into other columns at times. Or, as in the case of the prominent ad in the right-hand column, content can expand to fill an entire column.
There’s an exception to the rule here: The main elements of the page are in a two-column layout, but the header (with the Times masthead) and the footer (not visible in the screenshots) are single-column elements that stretch across the entire 960 px-wide container that frames the page.
Does this two or three column rule apply only to online newspapers? No. The following figure shows that Facebook’s site is divided into two columns, and YouTube is laid out in three columns.
Note that the middle column of YouTube is at times divided in half, into two columns. As you explore the web and identify sites you appreciate, take time to deconstruct how they are structured around either two or three columns.