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.
It usually contains the logo and navigation elements. However questions could be asked about the content of the header:
- Is it better to place the link to the home in a text or in the logo?
- Should us use a text logo or a picture?
- Setting nofollow internal links to avoid suroptimisation?
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.
In the footer, you can place the following components.
- A copyright notice.
- Navigation elements such as Home or a tag cloud.
- Reference to the designer.
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.
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 tag cloud.
- The list of most recent articles.
- A list of related articles (may also be placed under the article).
- A search field.
- The list of categories if not in header.
- RSS feeds.
- Various gadgets. For example, a translation button.
- A calendar to access archives.
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.
- OSDW. Graphic kits.
- Open Web Design. List of freely usable templates.
- Free CSS Templates. Series of templates based on style sheets.
- Carousel. To scroll links or images, associated to pages of a website.
- Template for a Web application. This model does not provide graphics, but an example of page with a style sheet for an adaptable interface suited for a web app.
- How to design the home page. To do and to avoir.
- Web design essential principles. A more general view.