Web Page Design


It's your business & website - It's my business to help you make it the best website!

Web page design and Website design are not the same thing. Page design elements include layout, navigation, font styles

The design of each page on a website MUST address and balance the needs of the website owner (the information that must appear on each page) and search engine optimization (the keywords that will focus the search engines to each specific page).

These two perspectives are key design factors affecting the web page structure (layout, navigation, metadata) AND web page content (web font, text styles, links, images).

Structural Page Elements - Layout

The first consideration for an effective web page design is the layout of each page. Good design principles dictate that all pages should adopt the same layout. A basic web page layout is illustrated below.

Did you know that most computer monitors are capable of displaying web page content that is more than 1024 characters wide?

However, this basic page layout doesn't take into account some of the core functional and design elements required (e.g. navigation, featured content, advertising, site links) therefore a more detailed layout should be explored. Consider a popular 3-column layout shown below.

With a multi-column layout, a website owner can now make some key decisions about where to place the primary site navigation menu. Common areas for consideration are:-

  1. Global Header
  2. Column 1 (Sidebar)
  3. Column 3 (Sidebar)

It is unadvisable to place the primary site navigation in Column 2 since this area would be unique to each web page. However, it is acceptable to include secondary site navigation (e.g. in a "page header" area) and footer area for page relevant links, advertisements, images etc. (see image below for revised layout template).

To see the revised web page design layout in action, imagine your website includes a "My Account" page for users. Secondary navigation for this personal account web page might be "my address", "my payment info", "my password" (see below for mock-up).

Once a page layout has been decided for a website, it is advisable to maintain this consistently throughout the site. However there are always exceptions to this as long the alternate layouts don't negatively impact the user experience. For example, do not change from a global-header navigation bar to a column-1 sidebar navigation.

Some common web pages that might adopt a slightly different layout are:

  1. Contact Us (perhaps use a two column layout)
  2. Terms and Conditions and/ or Privacy statement (possibly a single column layout)
  3. News (perhaps use a two column layout)

Structural Page Elements - Navigation Menu

There are so many options available (e.g. tabs, pulldowns, roll-overs, fly-outs, icons), it really is a matter of personal preference for your web page design. However, one design consideration to be factored in to the decision making process is the breadth and depth of your website.

For example, a website with 20 primary web pages will present a challenge for a web designer to comfortably fit 20 tabs across the width of a "standard web page". To build an effective web page navigation system for a large site, group pages thematically and then adopt a 2 tier navigation system.

What size is a "Standard Web Page"?

Assuming most monitors are capabile of displaying 1024 characters wide, then a standard web page design could safely be set to 980 characters.

Structural Page Elements - Metadata

Effective web page design includes the "hidden" elements. That is, the "metadata" associated with each page. Most of the time, this metadata is presented as the "snippet" of your website on a search results page. This snippet might be the only chance of making an impression to entice somebody to visit your website so it is important to get it right. There are three core metadata elements:-

  1. Page Title
  2. Page Description
  3. Page Keywords

The image below shows one of the search results from Yahoo for the search term "website search optimization".

Note the Page Title (1) has a corresponding metadata "tag" <title>, the Page Description (2) has a coresponding metadata tag <meta name="DESCRIPTION"> but the Page Keywords <meta name= "KEYWORDS"> are not exposed on the search results page.

The metadata is actually "hidden" from viewing by the user, but is very much visible to the search engines when they indexed or crawled this particular website. As you read the page title and description that was written and presented, ask yourself if this content would encourage you to click the link and visit the site.

Sometimes the snippet that is presented is actual content from the web page itself. This usually happens when a search terms is very specific. For example, if you enter the search term:- Secretly, you might “Google Yourself”

The following search result appears:

The Page Title (1) and link reference to the URL (2) are standard and truly represent the page metadata. But the description is actually created by Google based on the web page content. The keywords for the page all relate to "Search engine optimization" so were naturally ignored by Google in this case.

Hopefully this illustrates two important things about web page design:-

  1. The Page Title and Description should be compelling - and very much related to the content of the web page.
  2. The page content should be well written because sophisticated searchers using specific targeted search terms may find your website as search engines reference any available content.

Web Page Content

Good web page design encompasses the style aspects of content such as font type, style (i.e. bulleted list, italics, bold, headline), links to other content and visuals or graphics.

Font type - there are a few "web safe fonts" that can be used on a website so that it appears legible on all interneet browsers. Choosing a font that is not web safe puts website content at risk of not being seen -- either by human readers or search engines. Visit the W3C Schools website for a complete list of web safe fonts. It is possible to use non web safe fonts as long as the font used is installed on the the website's web server.

Font style - the style of font directs readers and search engines to important web content. Headline text has a special significance for search engines as each web page is crawled and headline content is indexed as being relevant keywords for the web page. Other font styles such as bolding, italics, bulleted list improve readability and have a modest impact on search engine optimization.

This is H1 headline text

This is H2 headline text

This is H3 headline text

Visuals and Graphics - Using images and video clips within your web page design to enrich the user experience. This type of content can also help to improve search engine rankings. Why? Because once a visitor comes to a website (as a by-product of clicking a link on a search engine results page), the behaviour of that visitor is tracked (at a high level) by the search engine. If a user enters a website and "sticks" with the site because the visuals and graphics encourage an increased time spent, then this fact is attributed to the site being relevant for the searched keywords.

Best practice for video's: Open a Youtube account and post video content on Youtube with proper video metadata including keywords. Use a link to the Youtube video's on your website.


Best practice for images: Add high quality and relevant images (based on the surrounding text) with proper metadata tags including "alt" text.

Return to the Best Websites home page from Web Page Design. Or are you interested in learning how to make a Web Page?

How can I help you right now?

I'm happy to share my 12 Tips for Creating the Best Business Website as a free gift. And I do mean 'free' - there's no strings attached - not even a request for your name and email address!

If you need help, advice, a friendly push in the right direction, to rant or rave about a product or service ... please don't be shy about contacting me. Perhaps I can help you achieve your business goals.

You can do it ...

"That was fast! That is exactly what I need it to do. You are amazing! You just might be the secret weapon that makes a website less  about being BUSY on the Internet and more about being a BUSINESS on  the Internet." - Stan L., advice-for-lifetime-relationships.com

Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.

New! Comments

Have your say about what you just read! Leave me a comment in the box below.