Design breakdown v1.0

• 393 words

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

So with that in mind, I decided to keep things pretty clean and simple on the design front. I chose not to use a 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 last.fm albums that I’ve been rocking out to.

The Use of HTML5

The whole site has been built using the ‘Starkers HTML5′ theme as a starting point with the average page marked-up something like this:

<header>
    <h1>Logo</h1>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>

<section>
    <article>	
        <h2>Page Title</h2>
        <time pubdate> </time>
			
        <p>The article content</p>
			
        <footer>Tags and shortlink</footer>
    </article>
</section>
    
<footer>
    © copyright nathanstaines.com
</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’ is all thanks to Remy Sharp’s step by step guide on how to add twitter to your site. There’s also a great tutorial from zurb.com on how to add fade in/out effects on the inline form labels.

Perishable Press has a nice post on how to create perfect pre tags which I’ve been using. 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