Close
Close

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:


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.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

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. Alan says:

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

  3. Peter Cooper says:

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

  4. Tim Knight says:

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

  5. John says:

    For beginners??

  6. Prince says:

    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

  7. katiebird says:

    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.

  8. Dave Starr says:

    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.

  9. Thatch says:

    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.

  10. Marco says:

    When will the 3rd part be released?

  11. Tom Reagan says:

    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…

  12. Mitch says:

    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!

  13. Jan says:

    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

  14. Dustin says:

    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.

  15. Christian Sweningsen says:

    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

  16. Joe Magrino says:

    Where is Part 3?

  17. Michael says:

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

  18. Tadukau says:

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

  19. amosis says:

    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

Trackbacks

  1. [...] Blog Design for Beginners Part 2 [...]

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

  3. [...] 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. [...]

  4. [...] Blog Design for Beginners  [...]

  5. [...] Blog Design for Beginners Part 2 [...]