Written on March 1st, 2006 at 08:03 am by Darren Rowse
Blog Design for Beginners Part 2
The following post is part 2 (of 3) of a series of guest posts on the topic of Blog Design – written by blog designer, Peter Flaschner from Blog Studio.
In my last 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.
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.
The Blog Studio’s Uber fantastic flexible thingamajig
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
(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 in my next (and last) post in this mini-series!
25 Responses to “Blog Design for Beginners Part 2” - Add Yours
Internet Salsa
March 1st, 2006 6:38 am
Darren,
I couldn’t see anything after few paragraphs of Step2.
Its blank.
After a long blank space I could see “Now, for my super secret oh-my-god-that’s….” This text is also not wrapping. Text is continuing on a same line.
Please take a look at the formatting/code.
Alan
March 1st, 2006 6:49 am
Textmate.com looks like it’s an expired domain.
Peter Cooper
March 1st, 2006 7:33 am
Yeah, you want macromates.com. Great editor though! :)
Blogging for Beginners: ProBlogger Blog Tips
March 1st, 2006 8:39 am
[...] Blog Design for Beginners Part 2 [...]
Tim Knight
March 1st, 2006 9:13 am
For a free text editor that’s suited to write html, I’d go for PSPad – http://www.pspad.com/
It does code highlighting and has syntax correction, comes with a free CSS editor (TopStyle Lite), spell checker (most important!), and even has a built in ftp client. Plus loads more. [I ought to ask for a commision!]
John
March 1st, 2006 9:43 am
For beginners??
Prince
March 1st, 2006 3:21 pm
I am very little experienced in HTML,
Forget about CSS
Still I managed to draw a three column blog template, which is a modification of Blogger Minima.
I confess it is not working as l like it. http://www.prince-tvm.blogspot.com
katiebird
March 2nd, 2006 2:41 am
I’m very new to blogging, mine will be two months old next week. But, I learned one lesson (at least with WordPress).
I think that an out-of-the-box start is the best thing for a new blogger. Don’t worry too much about getting the perfect design before you start blogging. Pick a template and get used to posting regularly. Get familiar with the flow of information on your blog (which isn’t necessarily the same as other blogs).
Then work on improvements. Finding a better template, modifying it with appropriate plugins, etc.
Again, I’m a total newbie. But it didn’t take me long to see many drawbacks to the design I originally thought was perfect. But, this past week, I’ve switched templates (and modified it), made a new banner and found plugins I never thought of before these two months.
Thank you for a very interesting and helpful article.
Dave Starr
March 2nd, 2006 3:28 am
This subject is going to be a big help … I’ve been totally CSS-clueless, this has shown me several ways to get going on some basic knowledge skills.
Katibird does mangae to sum up the whole process though in one important point .. get your blog up and running and _post_. The nice design, the maximizing of ad placement, all the bells and whistles are great but they are worthless if your blog is off line or you are not posting whilst you p-diddle with style sheets and other techno geek things.
Dorm Room Biz » Blog Desig for Beginners 2
March 2nd, 2006 5:09 pm
[...] Read the full post for this part of the series here. [...]
Thatch
March 9th, 2006 11:17 pm
Thanks for the tip about the colour backgrounds.
Bloody Brilliant.
Editor? Have a look at Crimson editor. Handles html and css
http://www.crimsoneditor.com/
No affiliation… I just use it.
Designing Intuitive, Attractive Blogs » Technology, Blogging and Politics
March 20th, 2006 4:44 pm
[...] Recently, he contributed to the Blogging for Beginners series at Problogger. At this time, Parts 1 and 2 are available and I look forward to Part 3. Even if you’re not a designer (as I am not), the window into the thought process involved is quite spectaculor. [...]
Marco
March 23rd, 2006 5:52 pm
When will the 3rd part be released?
Tom Reagan
March 31st, 2006 7:16 am
yeah…can somebody drop a comment on any of my posts on my site when part 3 comes out? i am dying to read it…
thanks everyone…
Mitch
April 15th, 2006 12:40 pm
is he going to do part 3? It’s been over a month of waiting. Hope he doesn’t keep his design clients waiting this long!
The Rainforest » Blogging Tips
May 4th, 2006 2:23 pm
[...] Blog Design for Beginners [...]
Enthousiasmeren » Blog Archive » Les in bloggen
June 4th, 2006 2:52 am
[...] Blog Design for Beginners Part 2 [...]
Jan
July 4th, 2006 11:46 am
Very great article.. I’ve bookmarked this hoping to get track of the next part of the series… by the way, when will the next part come up? More power! :-D
Sage Adams Weblog » Blog Archive » Blogging Tips
August 31st, 2006 4:34 am
[...] Blog Design for Beginners [...]
Dustin
January 5th, 2007 1:22 am
I think interface design is very key. Look at the iPod, late to market, very expensive, but the best interface yet. And nobody can stop them.
Christian Sweningsen
April 23rd, 2007 8:26 am
Hi,
Thanks for the series; but the “Blog Design for Beginners Part 2″ seems to have a huge gap in the content, following this –
The Blog Studio’s Uber fantastic flexible thingamajig
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.
HUGE GAP
Joe Magrino
June 12th, 2008 4:14 am
Where is Part 3?
Michael
November 30th, 2008 5:20 pm
I offer affordable custom blog design start at $449 USD. You can contact me via my profile at 5apart.com
Tadukau
January 5th, 2009 10:47 am
Still this information is not enough to make a good blog design… :) I think it’s easier to find some template…
amosis
February 1st, 2009 11:58 pm
I am not opposing you but Now Nobody write css(I think ) as good free themes are available..& some of them are really good as well as proffesional
Comments will be closed off on this post 90 days after it is published. Apologies to those this impacts but it's a regrettable and temporary measure to combat a growing comment spam problem. See our most recent posts where you can comment here.