Akismet

Akismet is so crucial to a WordPress blog it even comes pre-installed. All you need to do is sign up for an API key from WordPress.com in order to activate the plugin.

What does it do?

Akismet works on the front line in the battle against spam. It picks out spammy comments from your blog and helps protect your site against those pesky spam bots.

Download the plugin

All in One SEO Pack

Changing your Permalink structure is the first step you should take to a more optimised blog. The second step is to install the All in One SEO pack to allow complete customisation of every post and page to squeeze out the best search optimisation you can.

What does it do?

The All in One SEO pack makes a few important SEO improvements to your WordPress blog, such as canonical URL redirection and reconfiguration of page titles. More importantly it gives you complete control over the page title, meta description and keywords for every post and page so you can completely optimise your site.

Download the plugin

Google XML Sitemaps

After settings up your permalinks and installing the All in One SEO pack, all that’s left to do to completely SEO’ify your blog is to provide the Googlebots a sitemap to feast on. The Google XML Sitemaps plugin does exactly what it says on the tin…

What does it do?

The Google XML Sitemaps plugin creates and regenerates an XML based sitemap file that lists every page of your site in order of popularity. This allows the bots to easily crawl your pages, as well as quickly update changed pages in the search index.

Download the plugin

Login Lockdown

Brute force attacks are one of the most common ways blogs are hacked. One way to protect against this is with the Login Lockdown plugin, which provides a sturdy security wall between your site and the bad people by limiting the number of login attempts and blocking out IPs that exceed this set amount.

What does it do?

The Login Lockdown can be configured to allow X number of login retries. Once these retries have been exceeded, that particular IP will be locked out for a period of time (also configurable). The plugin also allows you to mask login errors, so WordPress will no longer give hackers a clue if they correctly guessed your username.

Download the plugin

W3 Total Cache

I’ve played around with just about every caching plugin out there, but W3 Total Cache definitely gets my recommendation. Caching is one of the most important additions to any WordPress blog. The W3 Total Cache plugin not only provides page caching, but also has database caching, object caching and a minify system built right in – All with customisable options.

What does it do?

W3 Total Cache speeds up your WordPress site by caching pages. Instead of WordPress making multiple calls to the server upon every visit, it displays a ready-made static file or reuses queries from the cache. This provides a huge speed increase and eases the load on your web server.

Download the plugin

WP-DBManager

Regularly taking backups of your WordPress database is as important as remembering breathe. There’s a good selection of ‘scheduled backup’ plugins out there, but my favourite is WP-DBManager. Not only does this plugin provide useful scheduling options, but it also allows you to browse, restore and optimize your database directly in WordPress.

What does it do?

WP-DBManager allows you to browse your database tables, restore existing backups, automatically optimize your database and set regular scheduled backups at interval of hours, days or months.

Download the plugin

WP Smush.it

The images you upload to your WordPress blog will account for a large portion of the load your server deals with. Smushing these images strips out the meta data, optimizes compression and removes unused colours from JPEG, GIF and PNG files, which in turn reduced their size by a couple of percent. This change isn’t huge on a per-file basis, but it all adds up when calculated across the whole site!

What does it do?

WP Smush.it automatically sends all the images you upload via the WordPress media uploader through the Smush.it API to optimize the images. You can even go back and Smush all your existing images using the handy button in the media browser.

Download the plugin

Little Black Dress Society

View the website

Themify

View the website

Hull Digital Live 10

View the website

CandyBar

View the website

Carbon Ads

View the website

Kaleidocope

Cockpit

Transmit

RapidWeaver

Delibar

Versions

Silverback

Espionage

Socialite

Cornerstone

Thoughts

Postbox

Espresso

Capo

Common features

There’s a hand full of design features that tend to appear time and time again in the designs of Mac app websites. Some of these design trends take inspiration directly from Apple, like the well designed features layout – a common trait of an Apple.com webpage – while others are commonly used techniques in the world of website design that are taken a step further, example being the use of icons to reinforce the text with a visual clue, but these icons are much larger in size and include much more detail.

Vibrant colours

Almost every site in the showcase features a mix of vibrant colours, either in the form of an illustration or from the large icons on the page. A dark background colour helps these colours ‘pop’ with a super bright appearance.

Large buttons

Being downloadable applications means a prominent download or buy now link is crucial. Large and chunky buttons have become popular elements across the web design industry, but Mac app websites often feature oversized button graphics with a tactile feel created with subtle shading and highlights.

Features icons

The use of icons to reinforce nearby text is nothing new in web design, but Apple’s own use of large and more detailed icons has led to icon designs becoming bigger in size; more detailed and vibrant; and generally more unique in the type of imagery they depict.

Oversized icons

The icons in OSX are designed at extra large proportions, so the icons for the apps themselves also need to be oversized and therefore include plenty of detail. These icons act as the app’s logo and branding – It’s what people will recognise the app by when its sat in their dock, so it makes sense to use the supersized icon as part of the website design.

Designed layouts

Usually the surrounding interface of a website is designed, then the content is simply inserted and forgotten about. However the Apple website is a great example of how the content itself is designed, as well as the surrounding page. The Mac app websites often take inspiration from this, combining imagery and text into flowing layouts.

Modal windows

Javascript Lightboxes and modal windows have become pretty much standard in today’s web, but this particular style of window appears time and time again in Apple related site designs. These lightbox windows are great for showing off screenshots of the app, or an introductory video.

Crisp & sharp interface design

The OSX interface is razor sharp with tiny pixel bevels and highlights giving a really crisp appearance. This design style has emerged onto the web, particularly in Mac, iPhone and iPad related websites. Soft and subtle shadows, inset text and 1px highlighting lines all add to the theme.

Solid Giant

View the website

Word Refuge

View the website

Harry Ford

View the website

Steve Schoger

View the website

Apollo

View the website

View the Facebook Like Box demo

Setting up the Like Box widget

First things first, let’s get the basic Like Box widget set up. Log into your Facebook account and click the ‘Edit page’ link on the left side of your page’s profile. Over on the right you’ll see the link ‘Promote with a Like Box‘.

The first thing you’ll need is the ID of your Facebook page. You can find this by checking the URL of most of the links on your page profile.

Enter the size and configure the options of your page, then hit the ‘Get Code’ button. Getting the full potential out of a Like Box takes a lot of time and effort. If you’re looking for a quick solution the iFrame code quickly and easily inserts a box onto your webpage, but don’t expect to be able to customize it too much. If you have an hour or two to spare, copy the XFBML code.

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("API-KEY-HERE");</script>
<fb:fan profile_id="PAGE-ID-HERE" connections="18" width="403" height="360"></fb:fan>

In order to use the FBML code, you’ll need some fancy Javascript SDK. Luckily for those of us who aren’t Javascript Wizards, you can find the code already written out from tutorials on the web. Note: The code here uses the old <fb:fan> code rather than the new <fb:like-box> code, so remember to change that in your snippet.

To get the Javascript method working you’ll also need an API key. To get one, head over to http://www.facebook.com/developers/apps.php and set up a new application. You can leave most of the details blank, as long as you end up with a key of some sort to insert into the SDK code.

Give the page a test. You should see the box load and display correctly, despite being in the boring default Facebook colours. It’s time to start customizing!

Customizing the Facebook Like Box

css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?1"

Link your CSS stylesheet by adding a new attribute to the <fb:fan> code. The ?1 at the end is a requirement and needs changing every time you make changes to the your CSS file, otherwise the old styling will be used from Facebook’s cache. So basically if you make a change and reupload the CSS file, don’t forget to also change the index file to ?2 and so on.

css="<?php bloginfo('stylesheet_url'); ?>?1

If you’re adding the Facebook Like Box to a WordPress theme, you could use WordPress tags to render out the stylesheet URL.

The Firebug plugin for Firefox makes it easy to edit and customize your Like Box in the browser. This saves plenty of time not having to change the stylesheet identifier and re-upload all the files. Just configure the styling how you wish, then replicate the CSS in your stylesheet.

.fan_box .full_widget {
	background: none; border: none;
}
.fan_box .connections_grid .grid_item {
	padding: 0 8px 10px 8px;
}
	.fan_box .connections_grid .grid_item a img {
		box-shadow: 0px 0px 10px #333; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333;
	}
		.fan_box .connections_grid .grid_item a:hover img {
			box-shadow: 0px 3px 10px #333; -moz-box-shadow: 0px 3px 10px #333; -webkit-box-shadow: 0px 3px 10px #333;
		}
.fan_box .full_widget .connect_top {
	background: url(http://line25.com/wp-content/uploads/2010/facebook/demo/images/blue.png);
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
}
.fan_box .connections .connections_grid {
	padding-top:16px;
}
.fan_box .connections {
	border-top: none;
	padding:15px 0 0;
	color: #ccc;
	font: italic 21px Georgia;
	text-align: center;
	text-shadow: 0px 1px 4px #000;
}
	.fan_box .connections span.total {
		color: #fff;
	}

.fan_box .connections_grid .grid_item .name {
	color: #ccc;
	font-size: 11px;
}
.fan_box .profileimage {
	margin: 0;
}

Here’s the CSS I’ve edited and added to generate the styling used in the demo. Most of the CSS rules clear out the default styling, for example: border: none;, but there’s also some fancy additions such as the CSS3 text-shadow styling.

It’s up to you how far you go with the customization. You could simply remove or change the background and border colours, or completely rearrange the elements into something completely unique.

Fixing the validation errors

The Facebook Like Box now looks great, but the FBML code doesn’t do your webpage validation any favours. Don’t worry, there’s a quick and easy fix for that…

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("fd161b28d6338cb852d8ed87878f67c3");</script>
<!-- FBML <fb:fan profile_id="119754924730147" connections="18" width="403" height="360" css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?5"></fb:fan> FBML -->
<script src="js/fbvalidate.js" type="text/javascript"></script>

Download the handy Javascript file from ka-mediendesign.de. The author’s blog is in German, but you can figure out how it’s implemented pretty easily. Basically you need to reference the Facebook Validation Javascript file underneath the FBML code, then wrap the tags with <!-- FBML comments. The Javascript will then magically fix those validation errors!

View the Facebook Like Box demo

BundleHunt

View the website

BBQWar

View the website

Tileables

View the website

Armitage Online

View the website

Forever Heavy

View the website

At the end of the last tutorial, we were left with a working HTML and CSS concept of the blog homepage. Since then, a generic inner page has been styled up, to give the CSS for page elements such as comments, author description etc that appear when viewing a complete blog post.

WordPress theme anatomy

A WordPress theme consists of multiple PHP files. Each one of these files is called from the index.php, so your header, footer and sidebar are separate files that are inserted into the index to render a full web page. Furthermore, there’s different template files that can be used in place of the index depending which portion of the site the user is viewing, these include archive.php, single.php, and page.php. Inside each one of these template files is a series of WordPress PHP tags which add the special functionality and transform the static HTML and CSS code into a working theme. Be sure to keep the WordPress Codex bookmarked for reference when building your themes, it includes a detailed description of every tag and all its parameters.

The first step when creating any new theme is to create the series of files and copy across any image, Javascript or CSS assets your design uses into a new folder.

/*
Theme Name: Chris Spooner V3
Theme URI: http://www.chrisspooner.com/
Description: Chris Spooner WordPress Theme Version 3.
Version: 3.0
Author: Chris Spooner
Author URI: http://www.blog.spoongraphics.co.uk
*/

At the top of the CSS file, you’ll need to specify some details about your theme in order for it to be detected by WordPress.

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.alignleft {
	float: left;
	margin-right: 15px;
}

While you’re editing the CSS, you’ll also want to add some styling for the classes added by the WordPress WYSIWYG editor for aligning text and images to the left, right and center.

Header.php Template File

The header.php includes all the information from the head of your HTML document, as well as the upper portion of your code that remains the same throughout each page (The opening container tag for instance). The HTML right down to before the start of the page content is copied from the static HTML file and pasted into header.php. Then select tags and elements are replaced with PHP tags in order for WordPress to inject the dynamic information. <?php bloginfo('stylesheet_url'); ?> automatically renders a link to /wp-content/themes/*theme-name*/style.css. Where you need to specify the link to the theme directory, you can use <?php bloginfo('template_url'); ?>. Before the closing </head> tag, the WordPress <?php wp_head(); ?> tag tells any plugin files where to insert their own code.

Other tags used in the lower portion of the header file include <?php echo get_option('home'); ?> which renders a link to the blog homepage, and <?php wp_list_pages(); ?> which lists out the WordPress generated page into <li> tags (so don’t forget to wrap it in a <ul>). This pages tag also has some parameters, firstly sort_column=menu_order arranges the pages according to how you specify them as opposed to alphabetically, and title_li= removes the default ‘Pages’ heading from the list. It’s worth noting that this tag could be used elsewhere in the theme, like the sidebar for example. Likewise, you could list out the categories here instead.

Index.php Template File

The index file follows on from the header.php, so the HTML right down to the sidebar from the static file is pasted into the index file. Being the file that is loaded first, the header.php file is called using the <?php get_header(); ?> tag. Inside the HTML content area, the WordPress loop checks for posts then spits out a bunch for code for each post it finds. This is specified between the while and endwhile; PHP tags. Inside this loop we can insert the dynamic post information into the existing HTML elements from our static content, such as <?php the_permalink(); ?> to render the link to the post, <?php the_title(); ?> to render the post title and <?php the_content(''); ?> to render the actual post text.

After the list of posts, pagination tags are inserted using <?php next_posts_link('Older posts'); ?> and <?php previous_posts_link('Newer posts'); ?>. The text inside the parentheses can be altered to any wording you desire. At the bottom of the index file, the sidebar and footer files are called using <?php get_sidebar(); ?> and <?php get_footer(); ?>, which will insert the content from sidebar.php and footer.php wherever the tags appear in the theme file.

Archive.php & Search.php Template Files

The archive.php and search.php template files are basically alternatives to the index.php template file. They do the same job, but are used in different areas of the website. The index file is used on the blog homepage, whereas archive is used when browsing any kind of grouping of posts, whether it’s by category, month or author. The search file is used when viewing search results. Both files use the same structure and tags as the index file, but include some extra elements to provide feedback to the user. The archive file uses a range of conditional tags to check where the posts are coming from, this then allows you to set a page heading with the relevant information (‘Browsing the Tutorials category’, or ‘Browsing posts from August, 2010′).

Similarly, the search template file can include the simple <?php the_search_query(); ?> tag to render a heading such as ‘Search results for WordPress’.

Single.php & Page.php Template Files

While the index, archive and search files display a list of posts, the single.php and page.php template files are used to display the individual posts and pages. They both begin with similar HTML – The header is still called using <?php get_header(); ?> and the WordPress loop displays the post information and content. The main difference is instead of pagination, you might include additional functionality like <?php related_posts(); ?> (plugin specific tag) to render related posts, or <?php comments_template(); ?> to load the comments section, particularly for single blog posts.

Comments.php Template File

The comments template file is called from single.php to insert the comments section at the bottom of your blog post. This file renders out the comments into an <ol> element and is pretty much self-contained in the <?php wp_list_comments(); ?> tag. Elsewhere in the template file, comment pagination is taken care of with the <?php previous_comments_link('Older') ?> and <?php next_comments_link('Newer') ?> tags (if the option is set in the WordPress settings), while the comments form appears underneath, surrounded by a <?php if ( comments_open() ) : ?> statement to check whether comments are open or closed for this particular post.

Sidebar.php & Footer.php Template Files

Like the header.php file, the sidebar and footer are called from the other template files to insert the relevant HTML in the correct places to form a complete web page. My sidebar.php file only contains a modified version of the wp_list_categories(); WordPress tag, but any cocktail of information could be rendered here.
The footer.php file closes out HTML elements that have been opened elsewhere in the theme files, particularly the container div and page body. My footer design also includes a range of extra information, most of this information is generated by Javascript, or is controlled outside of the WordPress functionality, but the footer does still include the WordPress <?php wp_footer(); ?> tag to allow any plugins or WordPress itself to inject code into the right place in the theme (A Google Analytics plugin would likely insert the tracking code using wp-footer();).

404.php, Functions.php & Everything Else

We’ve covered the main types of WordPress theme files, but it doesn’t have to stop there. Two other popular files include 404.php, which allows you to design a custom error page for your blog, and functions.php, which allows you to customize the inner workings of WordPress without altering the core WordPress code, not to mention the complete list of WordPress template files, many of which I’ve personally never used before. There’s also the option of custom page templates to take advantage of, these files allow you to set up a unique layout for a certain type of WordPress page – This is particularly handy for creating an archives list, or a portfolio page layout.

The Final WordPress Theme

When all the HTML is split across the various theme files and the WordPress template tags inserted into the right places, the theme is now ready to install and test. All the post information from the WordPress install should be injected into the theme and rendered out as HTML, taking all the styling clues from your CSS file.

View the final theme in action

Foundation Six

View the website

Min Tran

View the website

Big Butterfly Count

View the website

HTML5 Dribbble Infographic

View the website

Adham Dannaway

View the website

At the end of the last post, the design concept had been put together in Photoshop and was all ready to rock. To refresh your memory, here’s the design we’ll be working on.

View the Photoshop tutorial

Exporting the images

The first step is to go through the whole design and export tiny images. Being a design that makes use of textures and patterns, many of the graphics are clipped down to repeating tiles.

In final collection of files the majority of images are saved with the PNG format due to their minimal colour palette. This bunch of small files will also help drastically with page load times.

Some images, like the diagonal lines swatch are just 4px in size, making them super small images, but they cover a large portion of the actual design.

Where there’s lots of instances of a similar graphic, they are combined into a sprite image. Each individual graphic will be picked out using CSS background positioning.

Writing the HTML markup

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ChrisSpooner.com</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<body>

<div id="container"></div>

</body>
</html>

The HTML document is started with a Doctype. Here the new HTML5 Doctype is used simply because it’s cool and does the job in 15 characters. Not all the HTML5 markup tags are supported, but HTML in an XHTML fashion will still validate perfectly fine. Elsewhere the CSS stylesheet is loaded, then the markup begins with a container div to house the following elements.

<div id="header">
	<h1><a href="#">Chris Spooner</a></h1>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Say hello</a></li>
	</ul>
	<ul id="subscribe">
		<li class="twitter"><a href="#">Follow on Twitter</a></li>
		<li class="rss"><a href="http:#">Subscribe by RSS</a></li>
	</ul>

	<h2>The personal blog of Chris Spooner</h2>

</div>

First up in the markup is the header area, which is neatly contained within a <div> named “header”. Within this is a <h1> element to act as the logo, and <ul> elements to produce the two menus. In the concept the items appear in the following order: Nav – Title – Subscribe, which is fine in visual terms, but doesn’t read correctly as a document so it’s ordered as Title – Nav – Subscribe in the HTML. The elements can be rearranged with CSS positioning later.

<div id="content">
	<div id="main">
		<div class="post">
			<h2><a href="#">Jake Plays With His New Dog Friends At The Park</a></h2>
			<p class="date">18 <span>Jul</span></p>
			<ul class="meta">
				<li>Posted in <a href="#">Vlog</a></li>
				<li class="comments"><a href="#">5 Comments</a></li>
			</ul>
			<div class="post-content">  

			</div>
		</div>

		[...]

		<div class="pagination">
			<p class="prev"><a href="#">Older posts</a></p>
			<p class="next"><a href="#">Newer posts</a></p>
		</div>

	</div>

A div with an ID of “content” contains the divs “main” and “side” which will act as the main content and sidebar columns. Inside the main content, each post is enclosed within a “post” div. Every post is made up of title, date stamp, meta information and of course the post content.

		<div id="side">
			<div id="categories">
				<h3>Categories</h3>
				<ul>
					<li><a href="#">Apple</a> 4</li>
					<li><a href="#">Design</a> 3</li>
					<li><a href="#">Events</a> 2</li>
					<li><a href="#">Giveaways</a> 5</li>
					<li><a href="#">Vlog</a> 48</li>
					<li><a href="#">Website News</a> 2</li>
				</ul>
			</div>

			<div id="my-sites">
				<h3>My Sites</h3>
				<dl>
					<dt class="bsg"><a href="#">Blog.SpoonGraphics</a></dt>
					<dd>My digital playground where I post various design tutorials.</dd>

					<dt class="l25"><a href="#">Line25</a></dt>
					<dd>My second blog featuring various web design tutorials, articles and inspiration.</dd>

					<dt class="jakethelab"><a href="#">JakeTheLab</a></dt>
					<dd>My dog’s very own website. See insights into the life of Jake the Labrador Retriever.</dd>

					<dt class="spoongraphics"><a href="#">SpoonGraphics</a></dt>
					<dd>Home to my creative Graphic and Web design services and design portfolio.</dd>
				</dl>
			</div>

		</div>
	</div>
</div>

The sidebar is made up of a category list titled with a <h3> and created using a <ul> element. Underneath this is the “My Sites” list, which will be hard coded into the site as a Definition List. The relationship between the site title and description make it perfectly suited as a <dl>.

<div id="footer-container">
	<div id="footer">
		<div id="tweet">
			<p id="follow"><a href="#">Follow me</a></p>
		</div>

		<div id="latest-posts">
			<h4>Latest blog posts</h4>
			<ul>
				<li><a href="#">Design a Beautiful Cosmic Space Scene in Photoshop</a></li>
				<li><a href="#">Line25 Sites of the Week for July 16th 2010</a></li>
				<li><a href="#">Style Your Site According to the Weather with jQuery</a></li>
				<li><a href="#">This Week’s Favourites – July 9th 2010</a></li>
				<li><a href="#">Design a Beautiful Cosmic Space Scene in Photoshop</a></li>
				<li><a href="#">Line25 Sites of the Week for July 16th 2010</a></li>
				<li><a href="#">Style Your Site According to the Weather with jQuery</a></li>
				<li><a href="#">This Week’s Favourites – July 9th 2010</a></li>

				<li class="subscribe"><a href="#">Subscribe to Blog.SpoonGraphics</a></li>
				<li class="subscribe"><a href="#">Subscribe to Line25</a></li>
			</ul>
		</div>

		<div id="music">
			<h4>I'm listening to</h4>
			<div id="lastfmrecords"></div>
		</div>

		<div id="socialize">
			<h4>Socialize</h4>
			<ul>
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="youtube"><a href="#">YouTube</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="behance"><a href="#">Behance</a></li>
				<li class="tumblr"><a href="#">Tumblr</a></li>
				<li class="flickr"><a href="#">Flickr</a></li>
				<li class="lastfm"><a href="#">Last.FM</a></li>
				<li class="stumbleupon"><a href="#">StumbleUpon</a></li>
				<li class="digg"><a href="#">Digg</a></li>
				<li class="designbump"><a href="#">DesignBump</a></li>
				<li class="vimeo"><a href="#">Vimeo</a></li>
			</ul>
		</div>

		<div id="photos">
			<h4>Latest designs &amp; artworks</h4>
			<div id="flickrimages"></div>
		</div>

		<p id="back-top"><a href="#">Back to top</a></p>
	</div>
</div>

The markup is finished off with the footer. Because the design uses a contrasting footer colour, an extra container is used to surround the footer elements, then the actual footer div is centred up inside the container. Each section of the footer is laid out inside its own div to group the elements together and make it easier to lay out the design later. Some sections like the Last.FM and Flickr streams are created using Javascript plugins, which require empty divs in which the content is placed. If the site needed to be super accessible, HTML messages for non-Javascript users would be placed inside these elements, then hidden by Javascript so they don’t appear for Javascript-enabled users.

See the full annotated HTML

Styling with CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f6f5ee url(images/bg.png);
	font: 14px/22px Helvetica, Sans-Serif;
}

@font-face {
	font-family:'Tallys';
	src: url('images/Tallys.otf') format('opentype');
}

#container {
	background: url(images/top-bar.png) top repeat-x;
	background: url(images/top-bar.png) top repeat-x, url(images/footer-top.png) bottom repeat-x;
	padding: 0 0 31px 0;
}

The CSS document begins with a quick reset to remove any browser default styling, then gets to business setting the background colour and texture on the body, as well as setting a global font style. Underneath this, the CSS3 @font-face rule is set up to load the font Tallys, which is used on certain headers within the design.
The #container is given the repeating graphic that generates the top bar, as well as a second background for browsers supporting CSS3 multiple backgrounds. Those supporting browsers will also see the strip of diagonal lines that appear just above the footer, but being just a visual touch it won’t be missed by the more unfortunate viewers on older browsers.

#header {
	width: 961px; margin: 0 auto; position: relative;
	overflow: hidden;
}
	#header h1 a {
		position: absolute; top: 5px; left: 376px;display: block; width: 208px; height: 213px;
		background: url(images/logo.png); text-indent: -9999px;
	}
		#header h1 a:hover {
			background-position: bottom;
		}

	#header ul#nav {
		float: left; margin: 22px 0 0 24px; list-style: none;
	}
		#header ul#nav li {
			float: left; margin: 0 0 0 45px;
		}
			#header ul#nav li:first-child {
				margin: 0;
			}
				#header ul#nav li a {
					display: block; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					text-decoration: none;
				}
					#header ul#nav li a:hover {
						color: #d0cfc8;
					}

	#header ul#subscribe {
		float: right; margin: 22px 24px 0 0; list-style: none;
	}
		#header ul#subscribe li {
			float: left; margin: 0 0 0 32px;
		}
			#header ul#subscribe li a {
				display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
				text-decoration: none; padding: 1px 0 0 27px;
				background: url(images/icons.png) left 1px no-repeat;
			}
				#header ul#subscribe li.rss a {
					background-position: left -16px;
				}
					#header ul#subscribe li a:hover {
						color: #d0cfc8;
					}

	#header h2 {
		margin: 250px 0 0 0; min-width: 500px; clear: both; text-align: center;
		background: url(images/top-divider.png) center bottom no-repeat; padding: 0 0 30px 0;
		font: 24px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2;
		text-shadow: 0px 1px 0px #fff;
	}

The #header is then centred up on the page and is given position:relative to allow for absolute positioning of the logo inside the confines of the header div. The logo itself is generated from the h1 using a specific width and height for the logo background image. The logo graphic contains both the normal and hover variations of the logo, so the position of the sprite is changed on :hover.
The two navigation elements are floated to the left and right sides of the logo, then the default list styling is removed and each li floated to display horizontally. Text styling is set up as 13px Georgia with letter-spacing giving the type a cool visual touch. On the anchors inside the ul#subscribe, icons are added as background images to produce the RSS and Twitter graphics.
The tagline on the design concept sits centrally underneath the logo, so a mixture of margin, text-align and clear:both help move the h2 into place. The font styling on the concept uses the custom Tallys font, so this is added using the @font-face rule recently setup. The inset effect is created using more CSS3 magic, this time in the form of a simple 1px white text-shadow.

#content {
	width: 917px; margin: -240px auto 0 auto; padding: 280px 22px 0 22px;
	background: url(images/container-lines.png) repeat-y;
}	

	#content #main {
		width: 684px; float: left;
	}
		#content #main .post {
			position: relative; margin: 0 0 60px 0; padding: 0 0 66px 0; overflow: hidden;
			background: url(images/underline.png) bottom repeat-x;
		}
			#content #main .post h2 {
				float: left; margin: 0 0 10px 75px;
				font: 24px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif; letter-spacing: normal;
			}
			#content #main .post p.date {
				position: absolute; left: 0; top: 0; padding: 4px 7px 4px 7px;
				background: url(images/lines.png);
				font: bold 40px Helvetica, Sans-Serif; color: #b6b6b1; text-align: center;
			}
				#content #main .post p.date span {
					font: normal 20px Helvetica, Sans-Serif;
					display: block; margin: -5px 0 0 0;
				}
			#content #main .post ul.meta {
				float: left; list-style: none; margin: 0 0 30px 75px; overflow: hidden;
				font: 16px Helvetica, Sans-Serif; color: #b6b6b1;
			}
				#content #main .post ul.meta li {
					float: left; margin: 0 20px 0 0;
				}
					#content #main .post ul.meta li.comments {
						padding: 0 0 0 32px; background: url(images/star.png) left center no-repeat;
					}
			#content #main .post .post-content {
				clear: both;
			}	

			#content #main .pagination {
				margin: 0 0 60px 0; overflow: hidden;
			}
				#content #main .pagination p {
					margin: 0;
				}

			#content #main .pagination p a {
				display: block; width: 102px; height: 33px; overflow: hidden;
				background: url(images/pagination-bg.png); font-size: 16px;
			}
				#content #main .pagination p.prev a {
					float: left; padding: 14px 0 0 46px;
				}
				#content #main .pagination p.next a {
					float: right; text-align: right; padding: 14px 46px 0 0;
					background-position: 0 -47px;
				}

The #content div is moved into place using margin: -240px auto 0 auto. The -240px margin on the top helps pull the content back up where it had previously been dropped down by the logo graphic. Each .post div is given margin and padding to space out each blog entry, and a background image provides a neat underline between each one. All the elements inside the post are then styled up with the appropriate font styling to match the concept. The date stamp p.date is given a large font-size to accommodate the date numbers, then the span is reset with a smaller font size and given the display:block; rule to drop it down underneath.
After all the post content styling the .pagination buttons are transformed from plain paragraph elements into large button graphics. They’re first floated left and right, they’re given specific widths and heights according to the actual image file. padding is added to the anchor to position it centrally inside the button.

	#content #side {
		width: 196px; float: left; margin: 0 0 0 37px;
	}

		#content #side h3 {
			font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; text-align: center; text-shadow: 0px 1px 0px #fff;
			background: url(images/underline.png) bottom repeat-x; padding: 0 0 15px 0; margin: 0 0 20px 0;
		}

		#content #side #categories {
			margin: 0 0 66px 0;
		}
			#content #side #categories ul {
				list-style: none;
			}
				#content #side #categories ul li {
					position: relative; width: 156px; height: 29px; padding: 11px 20px 0 20px; margin: 0 0 10px 0;
					background: url(images/category-bg.png); font-size: 16px; text-align: right;
					color: #afada2; text-shadow: 0px 1px 0px #fff;
				}
				#content #side #categories ul li a {
					float: left; background: url(images/category-fill.png); padding: 0 10px 0 0;
				}

		#content #side #my-sites {
			margin: 0 0 66px 0;
		}
			#content #side #my-sites dl dt {
				font-size: 16px; padding: 0 0 0 26px;
				background: url(images/favicons.png) no-repeat;
			}
				#content #side #my-sites dl dt.bsg {
					background-position: 0 1px;
				}
				#content #side #my-sites dl dt.l25 {
					background-position: 0 -24px;
				}
				#content #side #my-sites dl dt.jakethelab {
					background-position: 0 -51px;
				}
				#content #side #my-sites dl dt.spoongraphics {
					background-position: 0 -76px;
				}

				#content #side #my-sites dl dd {
					font-size: 14px; color: #bcbbb5; margin: 0 0 10px 0;
				}

The sidebar is floated alongside the main content div and given a spot of left margin to space out the columns. All the h3 elements in the sidebar use the Tally font styling with inset text effect. An underline background image provides a divider between the titles and content. The #categories ul li elements are given similar styling to the pagination buttons, where a specific width and height is used to display a background graphic. To recreate the line between the category and post count, a line was added to the background image, then a plain textured fill added to the anchors to hide the line where it runs underneath the text.
The styling for the definition list is quite simple, other than some CSS to set the font styling, just the favicon images had to be set with different background positioning on each dt element.

#footer-container {
	background: #2f2f28 url(images/footer-bg.png);
}	

#footer {
	width: 917px; margin: 0 auto; padding: 20px 22px 66px 22px; overflow: hidden;

}
	#footer a {
		color: #eeede6; text-decoration: none;
	}
		#footer a:hover {
			color: #d0cfc8;
		}
	#footer h4 {
		font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; margin: 0 0 14px 0;
	}

	#footer #tweet {
		width: 897px; height: 39px; margin: 0 auto 38px auto; padding: 19px 10px 0 10px;
		background: url(images/twitter-bg.png) repeat-x;
	}
		#footer #tweet p#message {
			float: left; color: #afada2; padding: 0 0 0 25px; font-size: 12px;
			background: url(images/twitter-bubble.png) left 2px no-repeat;
		}
		#footer #tweet p#follow a {
			float: right; display: block; width: 85px; height: 27px; margin: -3px 0 0 20px;
			background: url(images/twitter-btn.png); text-indent: -9999px;
		}
			#footer #tweet p#follow a:hover {
				background-position: bottom;
			}

	#footer #latest-posts {
		width: 430px; float: left;
	}
		#footer #latest-posts ul {
			list-style: none;
		}
			#footer #latest-posts ul li {
				font-size: 16px; margin: 0 0 27px 0;
			}

			#footer #latest-posts ul li.subscribe {
				margin: 0 0 10px 0;
			}
				#footer #latest-posts ul li.subscribe a {
					display: block; height: 17px;
					font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					padding: 0 0 0 27px; background: url(images/icons.png) left -16px no-repeat;
				}
					#footer #latest-posts ul li.subscribe a:hover {
						color: #d0cfc8;
					}

The design ends with a large footer which contains all kinds of information. Being of full width and having the dark background fill it required both the #footer-container, and the child #footer divs to allow the concept to be replicated. Slightly different font styling was needed inside the footer, particularly link colours, so the #footer a and #footer h4 were altered from those used in the upper portion of the design. At the top of the footer is a latest tweet box. This is styled up as a div named #tweet, while the tweet message and follow button are restyled paragraph elements.
In the #latest-posts ul the list is spaced out with some bottom margin and set at a font-size of 16px. The two li items with the class of .subscribe are given slightly different styling using a serif font and an RSS icon as a background image.

See the full annotated CSS

Adding Javascript functionality

With the main website now all coded up, all that’s left is to populate those footer sections with content from the various social sites. The Twitter div should display my latest tweet, the music div should display a list of my popular music tracks from Last.FM and the photos div should display recent pictures from Flickr.

$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=chrisspooner&count=1&callback=?",
		function(data){
			$.each(data, function(i,item){
			ct = item.text;
			ct = ct.replace(/http:\/\/\S+/g,  '<a href="$&">$&</a>');
			ct = ct.replace(/\s(@)(\w+)/g,    ' @<a href="http://twitter.com/$2">$2</a>');
	 		ct = ct.replace(/\s(#)(\w+)/g,    ' #<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
	   		$("#tweet").append('<p id="message">'+ct +'</p');
	  	});
	 });

    jQuery(document).ready( function() {
       var _config = {
         username: 'spoongraphics',
         count: 6,
         period: '7day'
     };
    lastFmRecords.init(_config);
    });

	$('#flickrimages').flickrush({id:'10201900@N03' });

Three jQuery resources were used to create the functionality. Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can either be used as a WordPress plugin, or directly through jQuery. Finally, the Flickr stream is producing using a slightly modified version of the Flickrush plugin from Philip Beel.

View the coded site demo

Made By Water

View the website

New Adventures in Web Design

View the website

Wez Maynard

View the website

Digitallabs

View the website

Billy Tamplin

View the website