Complete Website

The goal of this article is to show how to create a website from scratch, describing each step of the process, and respecting a list of specifications.

As I really like recreate my website times to times (I must admit that I consider the state-of-the-art in term of Web as a must), I’ll describe the list of specifications I wrote in order to design and realize this very website.

This tutorial is split in a few articles you may find in the left menu panel.

Specifications

Here are the specifications.

Features

Multilingual French / English
XHTML 1.0 Strict
Search engine friendly URL, that is not something like index.php?id=3
Printer-friendly pages using a custom CSS whose media type is “printer”
“favorite icon” working in both MS Internet Explorer and Firefox
Kind of RSS Feed with page updates on the Website
Sitemap for Google and other search engines

Design-related Items

Menu bar with the main topics
Breadcrumb menu
Date of last update
“3 A” buttons used to choose the font size. This setting should be saved in a cookie and automatically reused for all pages.

Accessibility

Conform to AA ou AA+ (according to swiss label)
Use of CSS Techniques recommend by the w3

Content Editing

Customizing the toolbar of the rich text editor
Adding text styles (teletype <tt>…</tt>) in the toolbar and removing unused paragraph or text styles
Opening external links in the same window (because I don't like to make a choice for the end-user and also as the target attribute is not supported anymore in XHTML 1.0 strict)

You agree? Then let’s start creating our website.

Website Template

Creating a website template with its whole design is not straightforward for everybody. When it comes to this website, I designed it myself from top to bottom, using freely available miscellaneous resources found on the Internet.

If you prefer, here are some pointers to website templates: