Monthly Archives: October 2010

Development of bridgetfox.org.uk

Today I have finished working on a new website at www.bridgetfox.org.uk.

This is the personal website of Liberal Democrat politician Bridget Fox and the website is to be used in her campaign to be selected by party members as a candidate for the Greater London Authority list election in 2012.

This project involved setting up a new WordPress driven website, developing a new theme, adding a choice of plug-ins, before implementing the initial page structure and content.

I am pleased with how the theme development went. It enabled me to refine some techniques and design concepts. It also reminded me of the frustration that Internet Explorer does not yet properly implement drop shadows and rounded corners in CSS. Which spoils the impact for anyone looking at the site using IE. Although it doesn’t really have an impact on the look of the website this was also my first attempt to use HTML5 techniques in anger.

The starting point for the development was the Toolbox theme which helped give me a head start with the necessary PHP code. It works very well as a base template and I would recommend it  for anyone thinking of doing their own theme development.

The theme’s colour scheme is based on my Lib Dem colour palette with the addition of more variations of grey. Which is something I will look again at using when revising my other Lib Dem related websites.

The new theme, which has the very unsurprising working title of ‘Bridget’, needs some further refinement, after which I may consider making it more freely available.

Basic HTML page elements

The basic elements of a HTML page::

<!DOCTYPE HTML>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

Choice of doctype

The “document type declaration” or “doctype” should be the very first thing that appears in an web page. The doctype is not an HTML tag. It is an instruction to the web browser that identifies the version of the markup language the page is written in.

Specifying the doctype is important to ensure that the browser knows what type of document to expect. The doctype therefore specifies which of the standards, set by W3C, for coding webpages you are trying to conform to.

There are a number of choices. There is the choice between HTML and XHTML. Then there is the choice of the different flavours of each, strict or transitional. Researching the differences between these to determine which is the best to use becomes bewildering. There is a whole load of contrary advice and opinion. Some of which gets very technical, particularly relating to MIME types.

I have a lot of sympathy with those who wish to conform to strict standards and have neatly written code. Also with those who want to use more recent standards and look to the future. My instinct then is to use XHTML strict. This requires you to write better code and have the presentational elements dealt with by CSS. Which is the way it should be.

However, the key thing I have learnt is this;

“Standards are written for validators not web browsers.”

When serving a text/html document all you need a doctype for is to trigger standards mode in the browser. As long as your HTML markup then produces the right result you don’t need to worry. Everything else is just the personal preference of the developer.

So which doctype to use?

Well, while HTML5 is not yet an official standard, it is the direction in which the world is heading. Also, the HTML5 doctype is really simple:

<!DOCTYPE HTML>

So for the future I am going to try using the HTML5 doctype but write my code using XHTML syntax.

specify the doctype in all HTML documents, so that the browser knows what type of document to expect.