How to design a Web page

It is convenient for well designed pages to place elements where visitors are used to find them, when it is practical information, but we may be creative for the content.
According to a study by Jacob Nielsen, the first ten seconds are critical to the decision to stay on a page or not. It is therefore necessary that the reader is held by the appearance of the page, its introduction: communicate your value proposition within 10 seconds.
For search engine optimization we must focus on content, therefore the text of the page, while other elements: header, sidebars, footer should be designed specifically for visitors.

The header

It usually contains the logo and navigation elements. However questions could be asked about the content of the header:

In the absence of specific response from engine makers, we will stick to what is the most common: we can put the link in an image or a text, we can put internal links on categories on the site.
Headers are often used to display advertisements, which is not necessarily the best place. Other possible components may be also a search bar like here.

Avoid using the nofollow attribute on pages that you want to see in the indexes of engines even though there are lot of internal links on these pages.
Avoid placing so obvious same keywords on all pages except in the anchors of links if they match the content of the linked page. Do not place the same keywords in all the anchors but rather customize them to the linked page.

The footer

In the footer, you can place the following components.

The footer must remain clean. It is common to place links on partner sites in footer. But those links are ignored by search engines or they are explicitly prohibited when they are in large numbers.

The sidebar

It may be placed on the right or left, have the same width as the body or not exist at all if the items are placed elsewhere in the page. It is a choice of design that is irrelevant provided it does not limit the navigation on the site.

Examples of items to put in a sidebar:

A PHP RSS reader can dynamically insert the list of recent articles from an RSS file if you do not use a CMS.

The body of text

Its content of course depend on the article that we want to write.
It can be complemented with Web services, such as Google Maps.
A modern site is made fancy with images and videos. See how to create an image gallery or use a lightbox to display an image, a text or a form.

The rel="nofollow" attribute prohibits engines to take into account a link, internal or external. Using it to influence the ranking is not a good idea, because it is not clear whether or not you get advantage to have a full external link.
The directive must be used especially on external links to fight spam in comments for example, or on internal links on pages that it is unnecessary to be indexed by search engines.
But if you must place lot of external links in footer then you should turn them to nofollow.


Here is a list of sites offering graphic templates to be adapted to the design of your pages. Note that the interfaces with variable width, also named "responsive", which adapt themselves to the width of the screen (as this site), are preferable because users do not have necessarily the same screen resolution as you.

Related articles