WordPress is by far the most popular content management system for building websites.

Looking at the statistics provided by W3Techs shows that WordPress is used by 14.7% of the world’s top one million websites and over 54.5% of all those websites that use a CMS.

It is interesting to note that the next two most popular CMSs are both also opens source; Joomla with a 10% market share and Drupal with 6.2%.

The same sources provides figures for the use of CMSs by websites in the top one million that have a .uk top level domain. The dominance of WordPress is repeated here with a market share of 48.9%.

A similar pattern can be found in the CMS usage statistics provided by BuiltWith who currently reckon that WordPress is the most popular CMS used by Websites in the top million websites with a share of 63.19%.

More statistical information about the use of WordPress can be found here:

I’ve been slowly getting to grips with my new iPad and configuring it to make it a useful business tool. However, one of the frustrations I’ve found is the limited features in the mobile version of the Safari browser. The lack of features I assume makes it robust and speedy but it does make the use of it for some tasks awkward. In particular I want to be able to easily save and share web pages.

However I have just found a handy work around for many of these frustrations through the use of bookmarklets. Setting them up can be a little fiddly but once you have done so you can add some powerful extra functionality to the browser. This screenshot shows the bookmarklets I have added to ‘Save to’ folder on the Bookmarks Bar:

The following pages give instructions for how to do this and provides some of the necessary JavaScript code to create the bookmarklets.

Useful Bookmarklets for your iPad and iPhone

Bookmarklets for your iPad

I’ve also added a bookmarklet for the LibDig service. The JavaScript for this is as follows:

javascript:window.open('http://libdig.co.uk/add.php?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title))()

If you want to include favicons as part of your WordPress theme then you should add the following code into the header of your pages. The code includes a tag for standard favicons as used by most web browsers. It also includes a tag used by Apple devices such as iPad and iPhone.

Code for adding favicons to your WordPress theme:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/icon.png" />

You then need to create a favicon.ico file and a icon.png image file and add these to the template folder.

The icon file should be an image 16×16 pixels.

The .png file for Apple devices should be 57×57 pixels (although I have seen some suggestions that 114×114 is best for later Apple products). Don’t worry about adding the curves and shiny effects that you see on the Apple devices, these will be added automatically.

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.

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>

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.

Grit & Oyster often does work on websites associated with the Liberal Democrats. I try to ensure that these websites conform to the corporate style of the national party.

An official colour palette was included in the style guide published by the national party. Unfortunately this colour palette, while specified in RGB and Pantone values, was not specified in the hexidecimal format commonly used within web code. Also I have learnt that the palette used on the national Liberal Democrat website does not conform precisely to the palette included in the style guide. Although, this is probably sensible as some of the colours don’t work so well when displayed on the screen.

To deal with these issues I have created my own Lib Dem colour palette for use on websites. I have made this publicly available on this website on a page which has details of both the direct translation from the style guide and the palette that I came up with. It can be found at the following link:

The website for Grit & Oyster Limited has been refreshed to give it a better look and greater flexibility.

This website hadn’t been properly updated for quite a while. So it needed to be changed to reflect the current status of the business, given a more attractive look, and to be brought into line with current internet standards.

I also wanted to move it to WordPress as its platform for content management. This was not only to reflect the fact that a large part of  the work I am doing at the moment is developing WordPress themes, but also to provide greater flexibility in publishing content and highlighting some of the projects I have been working on.

The current theme is the child theme for Fluid Blue that I created for my personal website. This is a temporary measure. I intend to develop a specific theme for this website when work on other projects allows me.