Site Layout: Columns and Menus and Grids, Oh My!
Tagged as: CSS
Three columns or two? Left sidebar or right? Vertical navigation or horizontal? Probably one of the more important decisions you’ll make while designing a website is just where all your content is going to live. While there are plenty of websites that make effective use of unique and mold-breaking layouts (VandelayDesign has an interesting article on unique layouts along with 20 great examples), I feel that if your goal is to communicate effectively with your reader, it’s best to stick with what works. Disregarding your user’s expectations more often than not results in fewer users. Sometimes, angry e-mails.
Assuredly, each website brings with it unique considerations, but I tend to fall back to a handful of fairly standard conventions. Primary navigation menus consisting of 3-5 items live quite comfortably in a horizontal menu adjacent to the website’s header. Longer lists of 6-9 main buttons are also a good fit for horizontal menus, but require a bit more room and are thus better placed above or below the website’s header. If your primary navigation conists of multiple menus, 10 or more buttons, or is likely to grow with time, then a vertical menu in a left sidebar is your best bet, as this is the most flexible solution.
Sidebar placement is an issue that may raise some questions. You want your main content to take precedence, but you don’t want your sidebar content to be ignored completely. Luckily for us, others have already done the hard work to determine how users view websites using heatmap studies. Jakob Nielsen, arguably the biggest name in web usability, has an informative and easy-to-read article on reading habits, and Google has also done their own reasearch involving eye-tracking.
What should we take away from this? As Nielsen’s article shows, readers focus across the first two paragraphs of your content, and down the left hand side of a website. If you have a sidebar with lots of navigation, it better be in a left sidebar if you want your users to be able to find their way through your website. If your sidebar consists mostly of secondary content that is of less importance to your readers, do them a favor and keep it to the right. Advertisements raise an interesting conundrum. Your users don’t want to be bothered with it, suggesting a right sidebar placement, but you want as many views and click-throughs as possible, indicating a preference for a left sidebar. If your website has ads, I’ll leave it to you to decide what’s best for you and your readers. Since I don’t plan on having a lot of navigation in my sidebar, to the right it goes.
Ok, Now What?
So you’ve chosen a layout. Now how are you supposed to implement it, and ensure cross-browser compatibility, no less? Enter the grid. I’ll admit, until recently, I’d never used any kind of pre-packaged CSS layout framework. I recently stumbled upon 960 Grid and was instantly converted. One problem I’d always had when designing was getting columns of content to look good. I never had a problem setting up my main columns—normally utilizing the layout resevoir from bluerobot.com—but when setting up content within a column, my widths were always a bit haphazard and margins were set with abandon. It worked, but never felt quite as solid as it should be. The grid framework changes all that. By providing designers a simple way of defining columns with specified, aesthetically pleasing widths and margins. All the pain of complying with various browsers is alleviated as well, since the CSS is already written. Just apply the right classes to your markup and go. The benefit for me was that a grid system is just as good at setting up your main columns as it is formatting content within those columns.
I was all set to adopt the 960 Grid system, but quickly found that it wasn’t the only player in the game. Here’s a quick list of the more popular options:
Each has their ups and downs. For instance, Grid Designer lets you build any size grid you want, customizing columns, margins and gutters. For a thorough write up on CSS grid systems, check out “Which CSS Grid Framework Should You Use For Web Design?” by nettuts.com. In the end, I wound up changing my mind and going with Blueprint. Not only is it widely used, it’s more than just a grid framework. Blueprint includes frameworks for forms, and more importantly, typography. I say more important because my next topic of discussion will be CSS typography and Blueprint is going to make my life a lot easier in that regard.
Blueprint works on a 950px wide layout with twenty-four 30px columns, separated by 10px gutters. Creating a column is as easy as adding the following classes to your <div>:
span-X: Creates a block that spans X columnsprepend-X: Pads the block with X columns to the leftappend-X: Pads the block with X columns to the rightborder: Places a light border to the right of the blockcolborder: Appends a single column to the right of the block and places a border in the middle of said column
There are many more options as well, and Blueprint has a fairly thorough test page displaying what the framework can offer. For reference, this site uses class="span-16 colborder" for the main content column and class="span-7 last" for the sidebar. The last class makes sure there isn’t an unneeded 10px gutter to the right of the column. Click here to toggle the grid underlay (if overlay is a word, so is underlay) to see it for yourself.
The only complaint I could make about Blueprint is that it is not 100% compatible with IE by default. It corrects any bugs by using a conditional comment in the HTML header, adding an IE-specific stylesheet for users of Microsoft’s browser. A minor complaint, but a complaint nonetheless.
Ah, another day (ok, two days), another step under the belt. Come back next time to learn way more than you ever wanted to about CSS typography.
spaceforaname
com