Do The Right Thing came back-from-the-dead yesterday with the help of WordPress. Originally the site was built in Blogger, but when Blogger dropped support for FTP publishing, the site was replaced by a holding page pending some spare time to do something about it…

I’m enjoying the new default WordPress skin ‘Twenty Ten’, which replaces the questionable ‘Kubrick’ theme that used to be the default. The new skin uses the latest web technologies – HTML5 replaces HTML4, and WAI-ARIA roles have been added to add extra semantic value to the page, increasing usability in screenreaders and the like.

I’ve been been learning about HTML5 recently so it’s timely that I now have a playground for this which is outside of the constraints of paid work, and is as easy to work with as WordPress is.

In line with what I’ve been learning (and what I already know), I’ve made a few improvements to the Twenty Ten skin. I’ll document these in separate posts to keep these short and readable.

Part 1: Search widget

1. fieldset wrapped around the form elements, to group them (a personal preference)
2. legend added to fieldset, to act as a heading
3. input type changed from text to search, to pick up the new formatting options available in Safari (this degrades to a type of text in other browsers)
4. placeholder attribute added to input to display this text inside the field in Safari (this degrades to no placeholder text displayed in other browsers)

Apologies for the messy code highlighting – I’m still working on getting the beautyOfCode syntax brushes applying correctly.

HTML

[file lang="html" link="on"]code-snippets/ten-twenty-part-1-search-html.txt[/file]

PHP

[file lang="php" link="on"]code-snippets/ten-twenty-part-1-search-php.txt[/file]