Designing Layouts for Content Management Systems - An Introduction

This is a non-technical introduction designed to highlight some key issues to consider, but each of these areas could be its own essay, so this isn’t the final word on any of the topics – just an overview of the most important points.

Site Navigation
Typically people will navigate the site using a combination of top bar and/or side bar navigation. As a good rule of thumb, a top bar can be used for primary navigation with a side bar for secondary navigation within the sections. For a simple site with very few pages (usually under 8 main pages plus a footer to access incidental pages like a site map or privacy policy page) you may just use a top bar. For a slightly larger site (up to 30-40 pages) you might just have a side bar with sub navigation sliding down as you click on each section. For larger sites, most companies use a combination of top bar navigation for the main sections and side bars for navigation within each section. Typically the footer navigation will either mirror the top bar to save scrolling (usually for smaller sites) or for bigger sites will handle incidental pages such as site maps and privacy policies. Most sites use left hand side bars, so it is usually best to follow that convention unless you have a good reason not to.

You can also use drop down or slide out menus. These can be less accessible via screen readers and to search engines and are not guaranteed to work in older browsers, so really they are only an additional form of navigation as you still have to provide another way for people to get to the pages. There is a place for simple single or double level drop downs/slide outs, but I typically discourage them as they make most sites a little harder to navigate.

There are three important considerations for site navigation: scale, consistency and similarity.

Scale – Your navigation scheme must scale to the number of pages your site will contain. A simple top bar probably won’t work well for a 100 page website. You can use secondary content area navigation (typically just below the top bar) for larger sites, but you probably want to start with both top bar and side bar if you’ve got a site with more than 30-40 pages.

Consistency – Your main navigation areas should always be available in the same locations. Changing the side bar links based on the top bar section is a pretty standard convention, but top bar navigation (if you have any) should never change and if you have a side bar for primary navigation, it should always show the main links – just adding links for a given page rather than replacing them.

Similarity – No matter how popular your website, most people spend most of their time elsewhere. Steve Krug nailed this in Don’t Make Me Think. Don’t be different for its own sake and make sure that whatever conventions you use could be picked up easily without instruction by an impatient, not overly bright casual user who has ADD!

Design for HTML
There are fundamental limitations in HTML. You can only use a small number of fonts that are installed and available on everyone’s computers, you don’t have pixel perfect control of layouts, you’re not sure what screen size and aspect ratio your site is being viewed in and you can’t even control the size of the fonts people will see.

One of the best ways to handle this variability is with simplicity – a good, simple design that supports your brand while being very adaptable to different screen resolutions, font sizes and the like. Trying to be too clever with design elements flowing seamlessly between different content areas is usually not a good idea.

It is possible to set the fonts for navigational areas by saving the buttons as images, but you will usually have to create three images (standard, selected and mouse over) for each link and it will mean that adding new pages will require someone with basic image editing skills to create the new images. These days it is usually considered best practices to use HTML for navigation, living with the constrained list of fonts (Arial/Helvetica, Times New Roman and Verdana are the most common) in return for simpler, more accessible design. If you are going to use images for navigation, consider using it for navigational areas that change the least (e.g. for the top bar in a combined top bar/side bar navigational system).

Another approach is to use flash movies to handle navigation, although again there are issues with search engine accessibility. Also, flash movies add to the time an cost to develop a project. If you do decide to use flash based navigation you then need to decide how to make changes to the navigation. If you have someone who can use flash or you add new pages infrequently, just editing the flash files is fine. If you don't have flash resources in-house or need a lot of changes, you might want to get the flash file programmed to pull a list of pages to display from the server so non-technical users can add content to the site. This cuts down on long term maintenance costs but can increase the initial cost/complexity quite a bit.

Screen Resolution
According to a recent article by Jacob Nielson, the majority of users now have greater than 800x600 screen resolution with only 17% at 800x600 and even fewer still at 640x480. For now I still recommend optimizing for 800x600 for most of my clients, but optimizing for 1024x768 would not be unreasonable. Remember to remove 30-40 pixels from the width to account for browser sidebars and the like so you should actually make your designs either 765 or 990 pixels wide.

Liquid layouts are another option where the width of the site changes with the width of the browser. All I’m going to say about liquid layouts is that they can be hard to do right, so I wouldn’t usually recommend them for someone without experience of designing them as you have to look at how they would work at a number of different screen resolutions so they typically take more time and effort to get right.

Design for Variability – Navigation
It is usually a good idea to come up with a site map (a list of all of the pages you initially envision in your site) before coming up with a layout. It is hard to come up with a design until you have a sense of what kind of navigation you’ll need to support to fit the site map into your web site.

Once you have a site map, use the real page links in your layout and make sure to show a deep inside page (a sub or sub-sub page) to show how the navigation system will work. Is there room along the top bar for all of the words in all of the main section titles while still keeping the font size reasonable? Is the sidebar wide enough for the real link text that has to go there? What about sub-links? Is there room for them to be indented and still enough space for the longest link text to display? It is also important to work with the person developing the site map to agree things like limitations on link text length to make the design job a little easier.

Design for Variability – Content
It is important to realize that you have no control over how long each page is (unless you agree to make ALL pages a fixed length, but that typically only works with very simple sites and it can take a while to edit each page for length). Because of this, background images behind the content area are not usually a good idea and if you have to have them, they must be able to repeat seamlessly when scrolling down the page.

Creating Layouts
You need to create a layout for each page that is fundamentally different from the other pages in the site. If the home page doesn’t have a side bar but the inside pages do, you will need at least those two templates. Sometimes you may also want to mock up particularly important pages like product lists or photo albums to show how you would like them to work and to make sure that it will fit within your design. Most simple sites need one or two layouts and really complex project may need more. I typically recommend starting with a single inside page layout for a deep inside page as that allows you to lock the look on a single document and raises most of the issues about the navigation scalability. Once a single layout is locked and agreed, it should be fairly quick and easy to create layouts for any other pages requiring them.

Conclusion
There are a lot of considerations when designing a layout for a content managed site. But as long as you get a sitemap, decide on a navigation approach, agree a screen resolution and remember that you don’t control the length of the pages, you’ll do just fine!