Design Breakdown v1.0

The reasons I have for creating this site are threefold; (1) To display a bunch of my social network feeds in the one place, (2) hopefully write some quality content and (3) eventually showcase my design portfolio.

So with that in mind, I decided to keep things pretty clean and simple on the design front. I chose not to use any large background images, instead I went with the tiled noise effect that everybody seems to be fond of at the moment.

The homepage is where the party’s at – it’s pretty much the social hub of the site. There’s live feeds to all my latest tweets, blog posts, flickr pics and albums that I’ve been rocking out to on last.fm.

Also, although I’m not officially apart of Project52, I still plan on adding content to my site on a regular basis, so while you’re here you may as well do yourself a favour and sign up to the RSS feed ;)

The Use of HTML5

The whole site has been built using the ‘Starkers HTML5′ theme as a starting point with the average post looking something like this:

<header>
    <h1>Logo</h1>
    <nav id="menu"></nav>
</header>

<section>
    <article>
		
        <h2>Page Title</h2>
        <time pubdate> </time>
			
        The article content
			
        <footer>Tags and Shortlink</footer>

        <?php comments_template(); ?>
	
    </article>
</section>

<footer> </footer>

A Little CSS3 Magic

text-shadow

body {
    text-shadow: #808080 0 1px 0;
}

webkit transitions

a:link {
    -webkit-transition-property: color;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: ease-in;
}

a:hover {
    -webkit-transition-timing-function: ease-out;
}

border-radius

.container {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

rgba background colors

.container {
    background: rgb(97,97,97);
    background: rgba(20,20,20,.1);
}

Some Javascript Love

The latest tweet on the homepage is all thanks to Remy Sharp’s step by step guide on how to add twitter to your site.

There’s a great tutorial from zurb.com on how to add the fade in/out effect on the inline form labels as seen in the search field below.

At the moment I’m currently experimenting with Typekit which allows me to choose from hundreds of different fonts for the site but I’m also interested in seeing what happens with FontDeck when it’s released.

Perishable Press has a nice post on how to create perfect pre tags which I’m using in this article. I’d like to be able to include ‘view plaintext’ and ‘copy to clipboard’ links but haven’t been able to figure them out just yet.

And the fade in/out images that I’ve used on the logo and the different icons throughout the site are based on this example and some help from Jay Hollywood.

Noteable WordPress Plugins

FlickrRSS
Last.fm Records
Get Recent Comments
Subscribe to Comments
WordPress.com Stats for the shortlinks

If you’ve got any questions on how I’ve implemented any other aspect of the site, please feel free to leave a comment.

Leave a comment