The Blog Studio

We are internet culture creators with a focus on
DESIGN, DEVELOPMENT & SOCIAL MEDIA.

Blog > Blog Design > How I design a blog – Part 2

How I design a blog – Part 2

Peter F, 25 February, 2006 0 Comments

This little article has taken on a life of its own, and is now a three parter. This second installment will give you an idea of the thought process we go through when coding a design. How to design a blog, part 2 In yesterday’s post, I described the process we use at The Blog Studio to design a web site. Today, we’re going to take the finished design and turn it into a fully functional WordPress theme. If you’re the impatient type, you can jump right to the end and download the theme by clicking “here”:http:// So, ready? Excellent. For today’s lesson, you’ll need your graphics editor (Photoshop, Illustrator, Freehand, Gimp, etc), an ftp program to upload files to your server, and a pencil and paper. I’m going to gloss over a whole bunch of technical stuff here. The point of this post is not so much to teach you how to write html as it is to give you an insight into the process we use to design and build blogs. Step 1: Plan the attack Let’s take a look at the design I whipped up: As you’ll see, this is an extremely flexible design, capable of being many things to many people, all without looking cookie cutter. (Note that I only had a couple of hours to work on this, so a masterpiece it is not. But it serves its purpose for the sake of this demonstration.) We need to take some extra care at the planning stage so that we can accommodate all the stuff the design doesn’t currently show. I’ll usually print out the design at this stage, and figure out how I’m going to structure the html. I avoid thinking about coding the site until this stage. I don’t want to design to my limitations, and find that worrying “how am I going to make this work” before I reach this point results in stale work. I’ll also determine which elements are going to be h1’s, h2’s, etc. Step 2: Write the basic html and css Next I’ll open my html editor du-jour (currently the super marvelous Textmate) and block out the basic structure. A quick word on html and css: if you can get your head around the fact that you’re placing boxes on the page, you can pretty well do anything. What I’m doing here is building nested boxes, just like those crazy Russian dolls (bad metaphor, bare with me). I haven’t added any content at all – just a bunch of div tags with ids and classes (use an id if the element appears only once per page, use a class if there’s more than one. Don’t ask why, I don’t know). When choosing names for your classes and ids, use names that make sense. Be as descriptive as you can. Trust me. It will just about save your life.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>The Blog Studio's Uber fantastic flexible thingamajig</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body> <div id=”top-banner”></div> <div id=”wrapper”>

<div id="adwords-banner"></div>
<div id="header"></div>
<div id="main-col">
<div id="main-col-adblock"></div>
<div class="post">
<div class="inline-adblock"></div>
<div class="post-footer"></div>
</div>
</div>
<div id="left-col">
<div class="left-col-content"></div>
<div class="left-col-adblock"></div>
</div>
<div id="right-col">
<div class="right-col-adblock"></div>
<div class="right-col-content"></div>
</div>
<div id="footer"></div>

</div> </body> </html>     Now, for my super secret oh-my-god-that’s-amazing trick. We’re going to start our stylesheet at this this stage. The trick we’re going to use is to give each id and class a different background colour. This will allow us to tweak our layout before we add a whole bunch of stuff into the code and make things complicated.   */ Brought to you by the fine folks at The Blog Studio (http://www.theblogstudio.com) and the letter k */

  • { margin:0; padding:0; }p {margin: 1em 0}body{ background: #fff; }#top-banner{ margin: 10px auto; width: 825px; height: 40px; text-align:center; background: red; }#wrapper{ margin: 0 auto; width: 825px; }#adwords-banner{ margin: 5px; width: 815px; height: 20px; background: red; }#header{ margin: 5px; width: 815px; height: 100px; background: grey; }etc etc etc

The next steps are coming right up!

Comments are closed.

Feature

We are looking forward to the holidays. We'll all be at #hohoto supporting an amazing cause & dancing our butts off. Come dance with us.

RFP

Excited? So are we! Fill out our RFP and start from there!

Request For Proposal

Facebook

Flickr

Newsletter

Subscribe to our newsletter!

Subscribe to our mailing list

* indicates required
×