Create a Typography Based Blog Layout in HTML5

Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.

Head back to last week’s tutorial post if you want to follow the step by step process of building this design in Photoshop. The WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.

Preparing the concept

With this design being pretty minimal and largely typography based there’s not much in the way of background image files that need exporting. The only files we’ll need to save are the background texture file and a couple of icons. However, to make life easier while coding up the design we can also export copies of the columns and grid lines so we can quickly align our elements.

This particular layout will be built with HTML5 elements, so it’s important to take a moment to familiarise yourself with the elements and check whether they fit into the layout semantically.

The static HTML file begins with a HTML5 Doctype and the usual content for the <head> section of the document, including the page title and link to the CSS stylesheet. Our design is using a somewhat unusual font courtesy of Google’s Web Fonts library, so the relevant code is also added. It’s important not to just straight swap your <div> tags for <section> tags when coding in HTML5, sometimes a <div> is still the most semantic choice, like when adding a wrapper or container div to your code.

One new HTML5 element we can make use of in place on a standard div is the <header> element, which can also contain a <nav> element to wrap our main navigation menu. The h1 is marked up as the blog title, with a handy anchor title describing where the link goes. If you remember in our concept we numbered the menu items, an obvious option would be to use an <ol> element, but semantically this isn’t correct because there’s no consecutive relationship between our menu links, the number is just for visual flair so we’ll add them later with CSS.

I originally used a <section> element to contain my page content, but after some reading it turned out this wasn’t 100% semantic. The preferred method would be to use a plain old <div>, but the addition of the ARIA role attribute of ‘content’‘main’ (I mixed up the role and ID in the writeup!) gives a little extra meaning to the tag. Inside the content area each blog post can be contained in its own <article> tags with the usual HTML elements mocking up the dummy content.

Underneath the series of blog posts is a couple of pagination links. Usually pagination links wouldn’t qualify as being important enough for the <nav> element (which can be used in multiple places, not just for the main menu), but for a blog layout I see pagination links as one of the primary navigation elements to access further content.

Until the <aside> spec was revised it didn’t have a semantic use as a sidebar, but it can now be safely used without the semantic police knocking at your door. The sidebar in this design contains a number of various sections, which lend themselves well to being marked up with <section> tags over plain old divs.

At the bottom of the sidebar is a simple search bar, which allows us to touch on some of the handy new form related features in HTML5. The one feature we can make use of is the placeholder attribute, which allows us to enter a passage of text to create the popular in-field label effect.

The layout is then finished off with the footer area, which in the case of this design needs to be outside of the main container area to allow it to span across the whole page. The footer area itself fits well as a <footer> element and contains a couple of handy links.

The CSS file begins with a simple reset, then the global styling is added to the body. The Google Web Fonts code has already been added to the HTML, so our desired font can be called directly in the CSS. The subtle texture background is added and the body text styling set to 14px #666 with a 24px line-height to match the baseline grid. Global link styling is set up, but is removed from links in the header and blog post H2 titles to match the concept. The container div is then centred up and a temporary grid image added as a background to make it easy to line up page elements according to the original grid based design.

Margins and padding are used to line up the elements according to the grid lines, with random figures like 98px being needed to ensure everything lines up correctly. Making live adjustments with the help of plugins such as Firebug is much easier than confusing your brain with complex calculations. Earlier we talked about those visual numbers next to the menu items. They aren’t anything important so they can be added using CSS so they don’t actually appear in the HTML markup, this is done using :nth-child and :before selectors to add the numbers using the content property.

The CSS to style up the dummy blog posts is then added, starting with the content div. A width is calculated according to the columns and gutters, which when combined with the width of the sidebar and any margins equals the width of the container div. The font styling of the H2 elements is added and margins used to keep everything tight to the baseline grid.

The sidebar element is then floated alongside the main content div and any content not already styled is given treatment to match the Photoshop concept. Some sidebar elements such as the categories and social links and placed side by side, so specific widths are added according to the grid.

The search bar in the concept is the only element with visual styling other than typographic tweaks. The gradient effect added to the sidebar can be easily replicated with CSS gradients, whereas the small icon image can be quickly added with good old image replacement techniques.

The footer area of the design is filled with a darker texture, which can be replicated with CSS using the RGBa color mode with a 20% alpha opacity on a black fill. The footer-container div will span the full page, so the footer div requires new widths and margins to match the main content container area. Finally the footer credits are added using image replacement techniques and the back to top link is moved into place with a right float.

The full CSS stylesheet

The Final HTML5/CSS3 Prototype

The final working prototype is now ready for testing before the design is converted into a full WordPress theme. Everything appears to be working as it should in Firefox, Safari and Chrome, and unbelievably IE9 has no problem rendering those HTML5 elements too. Some additional work is required for Internet Explorers 7 and 8, but I’ll save those for a rainy day.

I like how you kept the vertical rhythm throughout the design, well done.

I have only one tip, instead of using :nth-of-child() for numbering you can easily use CSS counter & it will take care of the numbering automatically. Which mean less code & incase you add more items the numbering will reflect this automatically too.

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.