Give me 31 Days and I’ll Give You a Better Blog… Guaranteed

Check out 31 Days to Build a Better Blog

Give me 31 Days and I’ll Give You a Better Blog

Check it out

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

FREE Problogging tips delivered to your inbox  

Blog Design for Beginners Part 2

Posted By Darren Rowse 1st of March 2006 Blog Design, Start a Blog 25

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:


Site-So-Far

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!

About Darren Rowse
Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.
Comments
  1. 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.

  2. Textmate.com looks like it’s an expired domain.

  3. Yeah, you want macromates.com. Great editor though! :)

  4. […] Blog Design for Beginners Part 2 […]

  5. 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!]

  6. For beginners??

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

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

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

  10. […] Read the full post for this part of the series here. […]

  11. Thatch says: 03/09/2006 at 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.

  12. […] 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. […]

  13. Marco says: 03/23/2006 at 5:52 pm

    When will the 3rd part be released?

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

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

  16. […] Blog Design for Beginners  […]

  17. […] Blog Design for Beginners Part 2 […]

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

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

  20. Christian Sweningsen says: 04/23/2007 at 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

  21. Joe Magrino says: 06/12/2008 at 4:14 am

    Where is Part 3?

  22. I offer affordable custom blog design start at $449 USD. You can contact me via my profile at 5apart.com

  23. Still this information is not enough to make a good blog design… :) I think it’s easier to find some template…

  24. 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 are closed for this post.