Redesign using HTML5 & CSS3

In an effort to keep on top of recent developments in HTML5 and CSS3, I have been meaning to completely redesign my personal website for some time now. There has been a flurry of support for the HTML5 spec recently, and even while browsers do not officially support the new structural elements like <header>, <article>, <footer> etc, there are relatively simple ways to force browsers to style these new elements correctly. Indeed there are many people already building websites using HTML5, despite the fact it will not yet reach recommendation status by the W3C for many years. With all this momentum I have felt compelled to try my hand at some of these new techniques.

HTML5 structural elements

I have made the decision that for personal projects (like this site), I will now start using HTML5 structural markup in preparation for the day that we can start to use it more widely in commercial projects. Not only does it help me aquatint myself with the new spec, it also helps me write more forward–thinking markup for my client projects. This new redesign makes use of the HTML5 doctype (<!DOCTYPE html>), as well as some of the new structural elements, including <header>, <article>, <aside>, <footer>, <time> and <mark>. Here is a basic example of this site's markup structure:

<!DOCTYPE html>
<head>
<title>Page title</title>
</head>
<body>

<!-- Navigation -->

<nav>
	<ul>
		<li><a href="">Link 1</a></li>
		<li><a href="">Link 2</a></li>
		<li><a href="">Link 3</a></li>
	</ul>
</nav>

<!-- Header -->

<header>
	<h1>Page heading</h1>
</header>

<!-- Main Content -->

<article>
	<time datetime="2009-09-01">September 01, 2009</time>
	<h2>Article heading</h2>
	<p>Content here</p>
</article>

<aside>
	<p>Content here</p>
</aside>

<!-- Footer -->

<footer>
	<small>Copyright © 2009</small>
</footer>

</body>
</html>

HTML5 web forms

I am also using the new HTML5 email and search input types in the site form fields. The nice thing about using these new inputs is that they degrade gracefully to regular text inputs on browsers that do not yet support them. Browsers that do support the new types (currently only Opera 10, and to a lesser extent Safari 4) have the added luxury of native client–side form validation without the need for additional JavaScript. For example, if you are using Opera 10 the subscription form will only accept a well–formed email address. Supporting browsers can also benefit from new required and placeholder attributes. required indicates a field that must contain a value on submit, while placeholder is used to display a hint or phrase that indicates the kind of value a user needs to enter.

<form method="get" action="">
	<fieldset>
	<label for="email">Get updates via email</label>
	<input type="email" required placeholder="name@site.com">
	<button type="submit">Subscribe</button>
	</fieldset>
</form>
<form method="get" action="">
	<fieldset>
	<label for="search">Site search:</label>
	<input type="search" id="search" required placeholder="Type your search here" />
	<button type="submit">Search</button>
	</fieldset>
</form>

CSS3 Media Queries

Finally, I am using CSS3 Media Queries to provide an optimized view for visitors using the iPhone, Opera 5 Mini and other capable smart phones. The following piece of code shows how to target users with a maximum device width of 480px. Note here we are still using the screen media type and not handheld. This is because the latest smart phones classify themselves as having ‘desktop class’ web browsers, ignoring the handheld media type.

/* iphone, opera mini, smart phone optimization */
@media screen and (max-device-width: 480px) {

nav ul, header, form, article, aside, footer small, footer address { width: 90%; }
-webkit-text-size-adjust: none;
}