Website page structure

As a user, you probably don’t spend a lot of time thinking about how the pages of the websites are structured. You just visit the page, and you either feel gratified or confused and annoyed.

A properly designed page structure makes the visitor’s job easier

With the exception of the Home page, most pages on a well-designed site generally follow the same basic structure. Usually, there is a content region in the center of the page, surrounded by a header, footer, and navigation column(s) to the left and/or right. It is up to the designers and usability experts to employ these regions in a way that conforms to the natural structure of the information on the site, making it easy and natural to navigate.

Once a page structure is determined, it should be used consistently throughout the site so that the visitor never feels disoriented. To you as the site owner, that translates into lower abandonment rates, and greater success in keeping your hard won visitors on track.

Some website pages may differ from site standards

There are, of course, pages that should differ from the standard structure. The Home page is almost always different than the other pages of a site. In very large sites, there may be landing pages for major sections of the site, and they might be a bit like a Home page for a particular line of business. Also, pages containing forms and charts may have their own layout to accommodate oversized or unique content, and checkout pages of an e-commerce site may have a different layout than shopping pages, in order to keep visitors focused and reduce abandonment rates.

Major elements of a web page

While we’ll leave the fine points to the designers and usability experts, it’s valuable to you as site owner to have insight into the issues on the page as a whole that affect site visitors, as well as within each region of the page:

Banner – The banner helps identify the owner of the site, and often contains the primary navigation. Secondary links (for example ‘Home’ and ‘Contact us’) may be included in a less prominent area within the banner, such as the upper right corner. Sites intended to generate leads and inquires often feature a large phone number within the banner.

Footer – The area on the bottom of the page has undergone a considerable transformation over the last few years. During the early years of the web, it typically contained complete contact information and links to pages throughout the site. Then it became smaller, and more recently, much larger. Today’s footer’s may include links to the entire site (or sections of a larger site), and may be presented on a solid background, often in grey.

This treatment is partly to help humans navigate the site, and partly to provide internals links for search optimization (SEO) on search engines such as Google.

Content area and navigation columns – The higher screen resolution supported by today’s technology (more dots per inch) results in sites that are wider. Long lines of text tend to be hard to read, so site designers have tended to use the extra width to add column(s) on the left and/or right. The extra columns may be used for navigation, but they are also used for promotional features, testimonials and other ancillary content. If the user has a less wide display it will only chop off the extra columns, and he/she can still read the main content without scrolling horizontally.

The website’s Home page

The Home page serves the same purpose as the cover of a book.

It is intended to welcome visitors, provide visual impact, and provide insight into the site’s contents. Unlike a book cover, it usually also provides navigation to the content inside.

There has been a tendency, in newer sites, towards larger and more impactful images on the Home page. Advances in web technology permit more effective content presentation, and designers take advantage of this in many ways. For example, dark translucent overlays may be used to place text over images where the contrast would otherwise be inadequate, and a page area may cycle through multiple images to highlight different aspects of a firm’s business.