Every Web page can be divided into five zones: the header, the left and right margins, the footer, and the body. Many page templates follow this model closely. Outside the body, the most heavily used content zone tends to be the left margin, but most people only use that space for navigation.
You can divide the left and right margins, as well as the body, into sub-zones. Some site designs implement “above-the-fold” and “below-the-fold” sub-zones, although where the fold lies is subject to variation depending on screen resolution, browser window size, font settings, etc.
You cannot reliably design a Web page to place content below the fold but you can certainly divide your margins and body into upper and lower sub-zones. You can also divide your header and footer into 3 sub-zones each as well.
When you look past what you typically reserve full zones for and consider what else you can do with those zones, your on-page optimization gets a massive boost. That doesn’t mean you should attempt to use every available zone. It does mean that you should strive to use your page layout for more than one purpose.
When you create a Web page, its primary function is presentation. That is, you want the page to do something for visitors. Maybe the page redirects to another page (I’m not saying you should do that — only that redirection is a form of presentation). Maybe the page presents search results. Maybe the page presents information about a product or service.
A common secondary function for a Web page is to create brand value. Web sites that implement uniform templates across their pages usually include a masthead and/or logo that brands each page as part of an entity. Large eCommerce sites actually incorporate sub-brands into their page templates. All those tabs that take you to special product sectioin create sub-brand visibility.
Intrasite navigation is another common secondary function for typical Web pages. If nothing else, a well-designed page should help people get to other areas of a Web site. Maybe the page doesn’t offer much information, but it should certainly provide navigation.
But though Presentation, Branding, and Navigation are the usual functions of Web pages, you can sub-divide these functions.
For example, your presentation can be divided into a main presentation and a secondary presentation (like a side bar or mini-article in the margin).
As I noted above, the page Branding can include sub-Branding for other sections of the site. But Branding can also incorporate cross-branding for other Web sites. Many Web site operators sell ad space on their most prominent pages.
Navigation may coincide with Branding, but navigation can work toward four objectives:
- Navigation can lead off-site
- Navigation can lead to another section of a site
- Navigation can lead to other pages within the same section
- Navigation can lead to sub-sections of the current page
Navigation may also be used to raise popups with limited interfaces.
If you need to optimize a page for more than one query expression, consider creating multiple content zones to handle the different expressions. Rather than dilute any particular block of text’s relevance for one query expression, just separate the content into relevance zones.
If you incorporate Hx headers into your page design, however, you should continue to honor the original markup conventions. Use H1 text only to describe the entire page. Use H2 text to label each content (relevance) zone. Use H3 text to sub-divide each zone. Etc.
The advantage of implementing content zones into your design is that you can easily update your pages by zone rather than by template. Why change an entire template if you just need to change one section of a page?
Content zones may contain their own embedded links, relevant only to their own content. Inbound links use take name anchors to point to specific content zones (although this practice is not very common). Each zone can, in fact, act like a miniature Web page in some respects, offering images, links, and text to your visitors.
Working with content zones or page zones helps you understand your content better. You can look at how helpful the navigation and branding are. You can judge how crowded your pages are (maybe it’s time to break up the content and create more pages). When you have a constantly evolving content page, dividing it into zones may help you manage that growth.
Don’t get hung up on heat patterns and eye-tracking studies, however. Think of what you need to do to provide your users with the most value. Think of why it’s important for people to choose your page in search results for multiple queries.
Break out of monolithic page optimization and start thinking about how each section of a page can help advance your goals of increasing your convertible traffic. But also strive not to let your pages become too busy. I have to admit that I still sometimes find myself looking at a finish design and thinking, “This page tries to do too much.”
But we can talk about that another time.