In web design and development there are a range of deliverables, the tools we use to conceptualise and understand what we are doing, that we can use. However, through habit or forgetfulness it can be too easy to pick the wrong tool. The user experience treasure map (from Peter Morville of findability.org) is a really good way of helping to be reminded of the range of deliverables available.
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::
<title>Title of the document</title>
The content of the document......
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:
So for the future I am going to try using the HTML5 doctype but write my code using XHTML syntax.
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.