Coding a Stylish Blog Design Layout in HTML & CSS

Last week we went through the process of designing a stylish blog layout in Photoshop. Now let’s take our visual concept and cut it into slices for use with neat HTML and CSS code. All our browser testing will be done on this coded concept before converting the design into a full WordPress theme.

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.

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.

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.

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.

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>.

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.

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.

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.

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.

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.

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.

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.

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.

50 Comments

Great follow up to the design aspect, Chris. I love the subtle use of texture. I find that is the most powerful way of utilizing textures. I also dig the white space that breathes and the large footer.

I need to stop being lazy and start using sprites…

Your final "View the coded site demo" link is broken. It is the period right before index.html that should be a forward slash.

Great article and nice design, but I have one question:
Why do you use the HTML5 Doctype?

You don't use any HTML5 elements, and you even got the link-element wrong (XHTML style!!!) The only element which is HTML is the meta charset, which, by the way, isn't backwards compatible to older browsers…

Simply because it does the job in 15 characters, instead of the usual super long Doctype declaration. Everything still validates correctly as HTML – which is basically what it is (with a little XHTML flavour here and there!).

True, the 'real' HTML5 elements like <article> etc could have been used to make it a little more HTML5'ish, but half the elements I'd want to use for a blog design (<details> for instance) still aren't supported. (See http://is.gd/dXWmJ for a full HTML5 build tutorial)

PS. I've been trying to pick out the fault with the link element you mentioned but can't seem to find it?

you could've used HTML5 tags fully actually. IE (< 9) will refuse to style those tags by default, though there's a simple workaround to that. To make a long story short, check it here -> http://code.google.com/p/html5shiv/

It may be a valid HTML5 document, but it's quite lacking on the efficiency / semantic side of things.

The old H1 topic is a popular debate. It's touched on in more detail in this old Line25 post – http://is.gd/dZWSI

I stick to using it as the logo in most cases because I think it creates a more readable document structure when viewed without CSS etc. It titles the page with the name of the site you're actually on.

The tagline 'The Personal Blog of Chris Spooner' would make a good H1, but this will be used as the body title anyway.

Great tutorial Chris. You always provide the most detailed (and fun) tutorials I've seen on the web.

@Joe – I have used my title as a h1 for a while now. It seems to be a a big debate lately, some developers use it, others don't.

Having your logo as h1 allows you to have the name of your site be the most important h tag, followed by page titles with h2, which should be the second most important anyway. It seems to work for me, but like I said, some people don't like doing it that way.

I have been attempting to do a custom blog template on Tubmlr. I purchased a theme called Nuance and got the HTML and CSS and such but since I am new at this, I am having trouble getting the them to work for me.

It came with instructions and all but I just know I am doing something wrong. Your article has helped me to understand a little better but I was wondering if you could offer any specific pointers … if you are familiar with Tumblr.

Great tutorial, Designing the website helps you as a developer see roughly what the finished product will look like and how every page will be related to the other. Visit http://www.buildingwebsitesmadesimple.com for more tutorial

Hey man this tutorial Got me so excited, ive been looking to get started in WordPress theming for a While now and ive done some of you other Tuts and really enjoyed them, i ran into a good number of issues when i got to the Css though.

It's big stuff too, there are things completely missing with in the steps that are shown in the final full view of the Css.

Please examine your code and make another version, i'd love to finish this Tutorial!

Subscribe for email updates

About Line25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.