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).
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:-
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:
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.
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:-
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:-
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.
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.
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 ...
Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.