In my last post I asked what web design is and before we start changing the margins and the padding for headers and other elements on the page it could be good to check out some of the tutorials around talking about web usability. As so many of you pointed out in your comments, a blog should look the way the creator wants it to look. On the other hand, I write my blogs because I want to be read, everyone doesn’t have to agree with my ideas, but I want at least people to take a quick peek at my writing before their 30 or 20 seconds are up.

I teach IT at a business school and when it comes to business sites it’s even more important to design and create something that makes people want to stay. One of the recourses we have used at school is Jacob Nielsen’s Useit.com web site about usable information technology. I also use the WebReference.com web site. The WebReference.com web site has articles about both the technical aspects and the look of the page. Many of the articles are aimed more at professionals designing corporate web sites and don’t necessarily apply for personal sites. I guess it’s all about how much time and effort you want to put on your template.

One important part of the template is using white space in your design. White space is sometimes also referred to as negative space, and refers to the open areas between the graphics and text on your web page. White space also tells you where one section ends and another begins. Of course the space doesn’t have to be white, you can use your own colors. Even though I don’t like the layout of About.com, they do provide a lot of useful information on graphics design. The information here is more for print than the web,but it is still useful. Another good resource is the Web Style Guide.

To make the sidebar items a little easier to read I’ve added some margins to the side bar titles. My sidebar code now looks like this:

/* Sidebars
———————————————– */
.sidebar-title {
color:#B5582C;
font-weight:bold;
font-family:cursive, arial, sans-serif;
font-style:italic;
font-size:1.7em;
letter-spacing: 0.1em;
margin:40px 0px 10px 0px;
}

I added the information about the margins for the sidebar-title to my stylesheet. Information about margins and padding can be found at htmldog.com. You can find information about how to write shorter code on the page Shorthand Properties.

The next step would be to add some space to the way your posts are displayed. The code for my posts now look like this with the new code in red.

/* Posts
———————————————– */
.date-header {
color:#B5582C;
font-family:cursive, arial, sans-serif;
font-style:italic;
font-weight:bold;
font-size:1.9em;
letter-spacing:.3em;
margin:30px 0px 10px 5px;
}

.post-title {
font-family: cursive, arial, sans-serif;
font-style: italic;
font-size: 1.8em;
letter-spacing:.2em;
color:#020704;
margin:15px 0px 8px 0px;
}

.post-title a, .post-title strong {
color:#020704;
text-decoration:none;
margin:15px 0px 8px 0px;
}

.post-title a:hover {
color:#020704;
text-decoration:none;
background-color:#FAFFFF;
margin:15px 0px 8px 0px;
}

.post-body {
line-height:1.6em;
font-size:1.2em;
margin:5px 15px 5px 15px;
}

You can find the xhtml file here and a test blog here. It’s difficult to see what the profile looks like in the xhtml file, you can only examine the changes properly in the test blog.


If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!


This entry was posted on Sunday, February 13th, 2005 at 7:59 pm and is filed under Templates, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.