Building a Better Blog Part 2: Design and Usability

on Tue May 13 22:30:04 GMT 2008 in XHTML and CSS and viewed 14080 times

If you read my quick article on what to expect from this four part (three parts of actually doing something) series on a better blog, you probably just couldn’t wait for the next part. Well, wait no more because it’s here. In this tutorial you’ll learn just how to create an amazing looking fixed width, two column blog complete with gradients, all CSS, and how to optimize it for both your users and search engines.

Jumping Into It

Well now that you’re properly interested, let’s get into it.

This is your finished product, a great looking layout.

First things first is to plan out exactly what you’re looking for in the blog. The idea here is to create a fixed-width layout with two columns. It’ll be fixed width just because, honestly, you don’t need a huge expanse of space to write blog posts. Two columns is just enough. One column is for content, one for navigation and your links and whatnot.

Usability Idea

When you usually hear about two column layouts, the content is usually on the left side. This is because some studies show that visitors’ eyes are usually drawn to the left side first. So for the purpose of this tutorial, your layout will have the content on the right and the navigation on the left.

Besides the layout, there’s also a few other important things to consider here. The header can usually be a great way to add some flair to the design. And of course the footer seems to be something of great importance these days, so that will also be included in the layout.

I: Starting With HTML

Now that we’ve gotten the ideas out of the way, why don’t you write some code?

Step One


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Building A Better Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Building a Better Blog</h1>
</body>
</html>

This is just the basic set up of the page at the moment. Nothing exciting, just the basic HTML, a title, and a single header. The h1 will serve as your title and header later on. But now why don’t you add some more elements?

Step Two

Next to add is just a few paragraphs and some navigation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Building A Better Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Building a Better Blog</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>

<h3>Search</h3>
<form>
    <input type="text" value="Search Term..." name="search" /><br />
    <input type="submit" value="Search!" />
</form>

<h3>Navigation</h3>
<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Archive</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Great Things</a></li>
</ul>

<h3>Awesome Links</h3>
<ul>
    <li><a href="http://www.shadow-fox.net">The Shadow Fox Network</a></li>
    <li><a href="http://www.shadow-fox.net/site/about">Ben Hirsch</a></li>
    <li><a href="http://www.digg.com">Digg</a></li>
    <li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html">Color Schemer</a></li>
</ul>

<h3>Feeds</h3>
    <a href="#">Link to Your Feed</a>

This is your footer.
</body>
</html>

Already you have the basic structure of your webpage.

Although it does look a bit plain, this is pretty important in structuring your webpage. All that was added was some very generic Lorem Ipsum text for the content, a search box, and a few other sidebar things normally found in blogs like links, and of course the footer.

SEO Tip

A good method for being index in the search engines is to have your content to be the first thing that they see instead of some useless navigation. So that’s why you have your title seen first (which should relate to your blog) and then your content to maximize the visibility of your blog.

Step Three

Next on the list of organizing your HTML to create a great looking blog is to organize your section into <div> elements. This way you’ll be able to style your blog easily and you also will be able to separate sections to code a bit better later on when adding the backend.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Building A Better Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS goes here */
</style>
</head>
<body>
<div id="layout">
    <div id="header">
        <h1><a href="#">Building A Better Blog</a></h1>
    </div>

    <div id="content">        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>
    </div>

    <div id="sidebar">
        <h3>Search</h3>
        <form>
            <input type="text" value="Search Term..." name="search" /><br />
            <input type="submit" value="Search!" />
        </form>

        <h3>Navigation</h3>
        <ul id="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Great Things</a></li>
        </ul>

        <h3>Awesome Links</h3>
        <ul>
            <li><a href="http://www.shadow-fox.net">The Shadow Fox Network</a></li>
            <li><a href="http://www.shadow-fox.net/site/about">Ben Hirsch</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html">Color Schemer</a></li>
        </ul>

        <h3>Feeds</h3>
            <a href="#">Link to Your Feed</a>
    </div>

    <div id="footer">
        This is your footer.<br />
        Copyright <a href="http://www.shadow-fox.net/site/about">Ben Hirsch</a>
    </div>

</div>
</body>
</html>

That wasn’t so bad. What you should now have is a very well structured page (HTML wise). The style will be added in a second. The <div>s that were added were the overall layout element to style and position your whole layout. The header, content, sidebar, and footer were all also isolated into their own <div> elements to style easier. And that’s all that was really done. It’s a pretty lean page HTML wise.

Now this should be your finished HTML page.

II: Styling Your Page

Now that you have your amazingly structured and organized webpage, it’s time to start into styling that hunk of HTML code.

Step One

To start, why don’t you organize the page a bit more. Get the layout in the center and define a width.

Usability Idea

A fixed width layout means that it will stay only one size no matter what the resolution. So, to keep it viewable by all, you look at the smallest resolution still commonly used, which is usually considered 800×600. So to keep your layout viewable there, I usually stay with a width of about 770 pixels.


BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    font-size:14px;
    line-height:160%; }

h1, h2, h3 { margin:0; padding:0; }

#layout { width:770px;
    margin:0 auto;
    border:1px solid #406480; }

#content { float:left;
    width:550px;
    padding:5px;
    border-right:1px solid #507EA1; }

#sidebar { margin-left:560px;
    padding:.3em; }

#footer { clear:both;
    border-top:1px solid #507EA1;
    padding:.3em; }

All right! CSS!

The BODY style is very simple, it sets the font family to Trebuchet, a cool looking font for blogs. The font size is about 14 pixels, and the line height is set fairly large for good readability.

The next statement just takes away the annoying margin and padding on the headers.

Now you get into the good stuff. The layout style sets the width to what we (or at least I) agreed upon before, a width of 770 pixels. The style “margin:0 auto;” sets the margin to the top and bottom to 0, and the sides to be auto to keep the layout in the center. Then the border is just to see where the layout is.

Next you have the content style. To keep the content to the left, it’s floated to the left. The width is defined as a good 550 pixels, and the padding on all sides is a good 5 pixels to keep the content readable and understandable when we add some more content. And also added is a small border to the right to separate content and the sidebar.

CSS Idea

To float the content to the left, it must be before the sidebar in the HTML, otherwise the float won’t work. Or you could have the sidebar first and float it to the right. It all depends on what you want the search engines (or people with page styles turned off) to see first. Usually it’s the content.

Now you have the sidebar style. Because the content is floated to the left, it must have a margin to the left to keep its distance from it. The margin is defined as 560 pixels because the content’s width is 550 pixels, but it also has a 5 pixel padding on either side, giving it an actual width of 560 pixels. And there’s also a padding of about .3em as well.

Finally is the footer. It’s a pretty simple style. It’s a clearing element to keep the two columns looking good because of the float. Then there’s a border on the top to know where the footer starts, and a padding, again, for readability.

Now this CSS code should be good to get you started. Now your layout should look something like this.

Step Two

Now that you can see your page beginning to take shape, it’s time to add some style. Flair, if you will.


BODY { background-color:#647D8F;
    font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    font-size:14px;
    line-height:160%; }

ul { margin:0; padding:0; list-style:none; }

a { color:#596F80;
    text-decoration:none; }
a:hover { text-decoration:underline; }

h1, h2, h3 { margin:0; padding:0; }

#layout { width:770px;
    margin:0 auto;
    border:1px solid #406480;
    background-color:#CFDCE6; }

#header { border-bottom:1px solid #507EA1; }

#content { float:left;
    width:550px;
    padding:5px;
    border-right:1px solid #507EA1; }

#sidebar { margin-left:560px;
    padding:.3em; }

#footer { clear:both;
    border-top:1px solid #507EA1;
    padding:.3em; }

I’ll go over what changed.

The first thing added is the background color on the BODY. Just added for style.

Next is the style for the unordered lists used in the sidebar. The margin and padding is taken off. Also taken off is the little blocks or circles next to each <li>. This is mostly my personal preference, if you like them, keep them on.

The next new addition is the addition of some style to the links. They’re given a different color than the bright blue of the usual links. Also taken off is the underline, though the pseudoclass “a:hover” adds it back on when you hover over links.

Now you have the addition of a style for the id “header.” The only thing added for this is a border on the bottom.

And that wraps up basically all the addition of the style. Now your current beautiful layout looks like this.

But this layout is just not enough.

III: Adding Images For Extra Coolness

Now a just CSS blog is great, don’t get me wrong. But sometimes there’s a need for something extra. A bit more, which can usually be done through some images, which is very easy using Adobe Photoshop.

First, I’ll start with the header in the “final result.”http://shadow-fox.net/examples/betterblog/index.html

Step One

This header is very easy to make. First, open up Photoshop and create a new document 770px by 75px.

The gradient on this image is a slight gradient from #CFDCE6 to white (#FFFFFF). You should be able to figure that out on your own with some basic Photoshop knowledge. Otherwise look for a tutorial over at Pixel2Life.com

Next for the interesting little arrow thing, I used a custom shape tool (short cut is U). Then I went through the custom shapes on the top toolbar by clicking the current shape next to the word “Shape:” until I found a shape I thought looked cool. The color on it is #596F80 I believe, but it doesn’t really matter. You can use just about any shape or color for it. But I created that by holding shift to keep the ratios uniform and to keep it perfect, and dragging it to create the shape.

After you have your header all set up as you want it, all you have to do is save it as header.jpg. We didn’t add text for a reason as you’ll see in a second.

Step One B

Now to apply the header image in the CSS.


#header { border-bottom:1px solid #507EA1;
    background-image:url(header.jpg);
    height:75px; }

There’s your new header code. As you see, a background image was added, the background gradient. It was also given a height of 75px to expand it out all the way to display the whole picture.

But now your header header (the <h1>) is getting in the way of your logo.


#header h1 { padding:1em 0 0 3em; }
#header h1 a { border-bottom:2px solid #CCAE8F; 
    text-decoration:none; }

The #header h1 style sets a padding to it to position it into the right spot. The numbers in the padding style correspond to the follow directions: top left bottom right. Clockwise. It’s easy. So the padding applied is a shorthand to say 1em from the top, 0 padding to the right, 0 to the bottom, and 3em to the left to position the text into the right place. Depending on your header image, you might need to tweak it a bit.

The other thing added is a little style the the link to add a border on the bottom and to take the other underline off so it looks a bit better. Or you could leave it. It’s all preference.

Step Two

Next you’ll add a background image to the links in the navigation in the sidebar.

To start this, it’s basically the same as the header image. The only difference is the dimensions and there’s no background image. So create a document 200×25 and fill it with a gradient the same way, #CFDCE6 to #FFFFFF. Then save it as linkbg.jpg. That’s about all until you style your links.

Step Two B

Now it’s time to add that bit of fanciness to your links.


#sidebar h3 { margin-bottom:2px; }
#sidebar #navigation li { background-image:url(linkbg.jpg);
    padding:.1em;
    border:1px solid #507EA1;
    margin-top:-1px; }
#sidebar #navigation li a:hover { border-left:3px solid #E6AC73;
    padding-left:.2em; }

So here’s the new style for the link elements.

There’s a margin to the bottom applied of 2 pixels. The reason is covered in the next paragraph.

The background-image property is used to add a background image. The image is defined as url(the url), and that is linkbg.jpg. Then a small padding of .1em is added so you can read the link. A small border is added just to make the gradient look a bit better, and a margin is added to the top of negative 1 pixels. Without that negative margin, you get two borders on the top and bottom of each link, which can look pretty ugly. This is why a margin to the bottom of 2 pixels is applied to each h3 in the sidebar, because this one link set has a negative margin applied to it, which will make it a bit too close to the header.

There’s just a bit more style to be added. The other style is to each link in the list of just a small border on the left so that you know when you hover over a link. Also added is a padding to the left. To separate the link from the border of course.

Now you’re almost done. There’s one more thing I added.

Last Step

This last thing is a small gradient on the sidebar top. It just creates a contrast between the sidebar and the content. It could be another color, but I like this gradient.

So to create it, open a document in Photoshop of 210×50 pixels. This gradient is basically the same as the others, the same colors, just inverted, white to #CFDCE6 instead of #CFDCE6 to white.

After creating it, save it as sidebar.jpg, and let’s add the CSS.

Last Step B

Last bit of CSS.


#sidebar { margin-left:560px;
    padding:.3em;
    background-image:url(sidebar.jpg);
    background-repeat:no-repeat; }

And that’s basically it. The only change is the last two style rules, which are a background image being added (sidebar.jpg), and a rule that doesn’t let the image repeat. Otherwise you’d get that gradient going all the way down the sidebar, which is obviously not very attractive.

When you see the gradient in action on your webpage, you may be a bit annoyed. The gradient has to be very sharp, or it can look very bad. Just keep on trying. Or you may not want to use it at all. It’s all up to you.

Conclusion

You made it! Now you have a pretty good looking blog design.

Here’s the code to review it all:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Building A Better Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
BODY { background-color:#647D8F;
    font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    font-size:14px;
    line-height:160%; }

ul { margin:0; padding:0; list-style:none; }

a { color:#596F80;
    text-decoration:none; }
a:hover { text-decoration:underline; }

h1, h2, h3 { margin:0; padding:0; }

#layout { width:770px;
    margin:0 auto;
    border:1px solid #406480;
    background-color:#CFDCE6; }

#header { border-bottom:1px solid #507EA1;
    background-image:url(header.jpg);
    height:75px; }
#header h1 { padding:1em 0 0 3em; }
#header h1 a { border-bottom:2px solid #CCAE8F; 
    text-decoration:none; }

#content { float:left;
    width:550px;
    padding:5px;
    border-right:1px solid #507EA1; }

#sidebar { margin-left:560px;
    padding:.3em;
    background-image:url(sidebar.jpg);
    background-repeat:no-repeat; }
#sidebar h3 { margin-bottom:2px; }
#sidebar #navigation li { background-image:url(linkbg.jpg);
    padding:.1em;
    border:1px solid #507EA1;
    margin-top:-1px; }
#sidebar #navigation li a:hover { border-left:3px solid #E6AC73;
    padding-left:.2em; }

#footer { clear:both;
    border-top:1px solid #507EA1;
    padding:.3em; }
</style>
</head>
<body>

<div id="layout">
    <div id="header">
        <h1><a href="#">Building A Better Blog</a></h1>
    </div>

    <div id="content">        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam sollicitudin, ante non tempus imperdiet, pede elit vulputate ligula, a fringilla orci purus ut arcu. 
        Praesent mattis, dolor nec mattis rhoncus, sem odio elementum neque, in laoreet turpis magna eget mi. 
        In pellentesque, mi eget viverra ultricies, velit metus posuere odio, eget ultricies nulla risus non dolor. 
        Donec non nisl. Praesent dignissim pulvinar augue. Aenean luctus. Vivamus in risus. 
        Vestibulum ac ante quis augue vulputate ullamcorper. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
        Proin posuere lectus sit amet tellus. Aenean vel mauris.</p>
    </div>

    <div id="sidebar">
        <h3>Search</h3>
        <form>
            <input type="text" value="Search Term..." name="search" /><br />
            <input type="submit" value="Search!" />
        </form>

        <h3>Navigation</h3>
        <ul id="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Great Things</a></li>
        </ul>

        <h3>Awesome Links</h3>
        <ul>
            <li><a href="http://www.shadow-fox.net">The Shadow Fox Network</a></li>
            <li><a href="http://www.shadow-fox.net/site/about">Ben Hirsch</a></li>
            <li><a href="http://www.digg.com">Digg</a></li>
            <li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html">Color Schemer</a></li>
        </ul>

        <h3>Feeds</h3>
            <a href="#">Link to Your Feed</a>
    </div>

    <div id="footer">
        This is your footer.<br />
        Copyright <a href="http://www.shadow-fox.net/site/about">Ben Hirsch</a>
    </div>

</div>
</body>
</html>

That’s actually a pretty lean page.

Just a bit under 4KB.

And now you only need to wait for the PHP backend. Believe, me it’ll be worth the wait. But for now, use this design and always try to improve on it.

The Shadow Fox Network - Ruby on Rails, PHP, XHTML, CSS, Javascript, and XML Tutorials

Building a Better Blog Part 2: Design and Usability

Jumping Into It

I: Starting With HTML

II: Styling Your Page

III: Adding Images For Extra Coolness

Conclusion

Comments