1. Reset your styles without using * {margin: 0; padding: 0; }
Eric Meyer made resetting your styles very easy. All you have to do is load his reset.css file int your page’s CSS file and you’re done. Head on over to Eric’s site and copy his code into your own file called reset.css.

Open up your site’s style.css file and add the following line of code to the top of your CSS file:

/* Eric Meyer's reset.css fileMore Info:
http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/  */

@import url('reset.css');

But why is this useful? I like it because it does exactly what it’s intended to do: it resets all the styles that a browser has by default. With just one line of code I got rid of any default padding, margin, border, or anything else that could cause a bug in my design and take time to find and fix.

2. Use shortcuts for colors, font family and size, and margins and padding

A shortcut for colors:

color:#ffc

This code will give you the same color as writing “#ffffcc.” If you’re new to colors they work like this: “RRGGBB” – how much red, green, and blue do you want your color to have?
“#000000″ is black, “#ffffff” is white. Instead of RRGGBB you can just use “RGB” in your CSS. So “#000″ is black, “#FFF” is white.

Some people write their code for fonts like this:

body {
   font-size: 1em;
   font-family: Arial, Helvetica, Sans-Serif;
   line-height: 1.5em;
   font-weight: bold;
}

I would write my code like this:

body { font: 1em/1.5em bold Helvetica, Arial, Sans-serif; }

And then of course, the margins and padding. I have looked at a lot of CSS that is full of styles that look sort of like…

body {
     margin-top: 5px;
     margin-left: 5px;
     margin-bottom: 0;
     margin-right: 0;
 }

Why not simply write

body { margin: 5px 0 0 5px; }

The way the margin and padding code works is very simple:

margin: [top] [right] [bottom] [left].

Or, if the top/bottom and left/right are the same you could write it

margin: [top/bottom] [left/right]

Shortcuts may not seem like a big deal when you can type 100 words per minute, but when you’re writing CSS all day long they make a huge difference in the size of your CSS file and the time it takes to write, update, or change your code.

3. The difference between classes and IDs is important
If you’re truly interested in understanding why and how to use IDs vs. classes there is all sorts of material available on the subject. The simple rule to follow is this:

An ID is used once per page, for a unique element. A class is used to style multiple elements the same way.

For example, on your main page you might have a <div> that encloses your posts. That should be styled using a class. However, you might have another <div> that holds your logo – that can be styled using an ID since it is a unique element used only once on the page.

4. An element is allowed to have more than one class.
I didn’t realize this for far too long, but you can give any element more than once class. This comes in handy pretty regularly when you’re working on large projects and want to keep the CSS and XHTML light and easy to update.

The XHTML might look like this:

<div class="post featured">
...featured post content...
</div>

and the CSS imight look like this:

.post { color: #333; margin: 0; padding: 0; }
.featured { background: #ccc; }

So the featured post has the same font colors and margin/padding as all the other posts but it gets its own background color so that it stands out as featured.

Cool.

You’re not even close to done, though.

Once your redesign launches you need to figure out how well it works. Don’t listen to all those people in the comments telling you how much you kick ass and how great it looks. They don’t know what they’re talking about. You need data.

Getting the data

Head on over to CrazyEgg and get a heatmap setup so that you can figure out where people are clicking. Once you know where they’re clicking you can realign your site to put the key action items where people seem to be looking the most. You’ll also know whether or not that AdSense block is in the right place, whether anyone is seeing your “Keep reading” links, and all sorts of other useful information that will help you realign the layout that you thought was perfect.

Along with CrazyEgg I would suggest signing up for Google Analytics. You can track where visitors go on your website and get an idea of how long people spend on your site. If people are spending an average of 5 seconds on your website, you did something wrong. Go back, rework the site, and figure out how to capture their attention. Make fonts bigger, make links a different color – do something and see if it works. If it doesn’t try again.

A design is never done

Your design might look great but you can always tweak it and try to get just a little bit more out of it. Once you’ve gotten everything you can out of a design, it’s time to redesign…again. Your design is there to solve a problem, if it’s not solving problems then it’s not a useful design.

Designing on the web is not about making things as pretty as you can. It’s about making things work for users. It’s nice to make things look great and work for users, but the primary goal is making the user experience as smooth as possible.

Redesigning without using web analytics, heatmaps, and whatever other tools are at your disposal is useless. Your goal shouldn’t be to just make your site look nicer – make it WORK. Make it USEFUL. Make sure your design decisions aren’t based on “this looks cool.”

Not everyone browses the web like you do

As a designer one of the most important things to realize is that not everyone is browsing the web the way you do. Some people like search boxes, others like navigation bars, others like clicking through links in posts.

This is why looking at heatmaps and web analytics is so important. If you base your design on what YOU do then you’re not giving average users much of a chance to navigate your site. I personally think big footers are great, but do users really scroll all the way down to look at them? Maybe. Maybe not. You need to run an analysis on your site if you have a big footer to see if people are actually clicking the links.

So what am I writing about next week? I’ll take you through the design decisions on my recent redesign of OkDork.com and explain what the CrazyEgg heatmap tells me.

Ben Bleikampis a freelance designer and student from Columbus, OH. He enjoys Chipotle burritos and hates waking up early.

If you’ve never setup a local development server, what better time than now? It’s easy, it takes less than 30 minutes, and you’ll save tons of time in the future when you’re working on new sites!

I talked to Aaron Brazell on the phone and started to get an idea of what they were looking for. I did a few comps for them, and the first 3 or 4 were pretty bad. Actually, they sucked. Everyone was sending emails back and forth with dieas. Then one of the guys said they wanted the page to feel like a place where people could “discover” b5media. That got things moving in my head and I came up with a design very quickly after that.

The comp is actually almost exactly the same as the final product.

Why I did what I did

The design itself is meant to provide a brief overview of the network for people who are new to the site, wondering about advertising options, or wondering how they could start blogging for b5media. If I did my job right the front page will be enticing enough to convince these audiences to click through the rest of the site and keep learning about the network.

The Ajax splash is the most obvious part of the design. It has information on advertising on b5media’s network, blogging for b5, or subscribing to some of their 100+ blogs. The goal was to let someone from any single person from the 3 key audiences find the information they wanted quickly.

The random channel is something that b5media didn’t have before on their homepage. It’s similar to what 9rules does – it gives each member a chance to show up on the home page and drive a little bit more traffic to their blog. The content is pulled using b5′s custom API. If you want to know how it works, talk to Aaron.

The blogroll was actually something they had already been working on, all I had to do was drop in the JavaScript and add some CSS to make it match the rest of my design.

It’s not perfect

I know it’s not perfect (yet). The background image on the content doesn’t match to the background perfectly – that’s my fault because in the middle of the design I messed with my color settings in Photoshop and didn’t realize it until the design went live. The test comments I was looking at didn’t look as obvious for some reason. This mistake will be fixed sometime this week – once the guys are back from AdTech.

There might be errors in IE6, IE7, and even Firefox. If you find a problem, let me or one of the b5media guys know and we’ll figure out a way to fix it.

That’s all, folks

It was fun working on a small team to get the design launched by the deadline. Being a freelance designer means that a lot of times it’s just me working with a client who questions a lot of my decisions. b5media let me do the designing and worked with me on the coding. Aaron Brazell put together a few PHP scripts and even a custom WordPress plugin to make all the pieces of the design work. Everyone sent me what I needed on time. And it was impressive (and fun) to see it all take shape at the end.

I’m going to dig a little deeper in the code in my next post at The Blog Herald and explain some of the techniques I used to make the site look “right” in most browsers.

Please…pretty please: stop using so many different fonts in the body of your website. As a general rule you should use exactly 2 fonts. If you’re really good at what you do and think you can use a 3rd font judiciously do so at your own risk.

The majority of web sites really have no need for a 3rd font. Use a font for headings and a font for body text. Make sure the font is easy to read. Make sure it’s a font that the majority of your visitors have.

If we don’t have the font, go ahead and give our browsers another option. When I am working on a website one of my “standard” font rules looks like this:

p { font: 1.2em Arial, Helvetica, Sans Serif; }


This way if the user doesn’t have Arial on their computer, it goes to Helvetica (which looks better anyway, but doesn’t come standard on most PCs) and at the very least they get a Sans Serif font.

Another rule of thumb that I wasn’t planning on talking about but just popped into my head: please try to give your font and background a good amount of contrast. Bright yellow fonts on white backgrounds are the reason I don’t use MySpace – don’t make it the reason I’m not reading your blog.

Any other tips for keeping websites useable? Post them in the comments.

It’s amazing to think back about how unified we were, and think that even critics of Bush were proud of what he was doing. Five years later, politics have skewed our perspectives a bit, but we can still remember how we felt that day and how proud we were of America.

When I first heard about the planes crashing into the World Trade Center I was a sophomore in high school on my way to geometry class. I remember hating geometry. I was relieved that we would have a substitute that day because our teacher had been sick.

As I was walking through the hallways I heard a few people talking about planes hitting buildings, so I thought a plane had crashed locally – one of Delta’s main hubs is the Cincinnati Northern Kentucky International Airport.

One of my friends had been in the library the period before and saw the news online. He asked me “Isn’t this nuts? A plane hit the World Trade Center…” Yeah. Crazy.

I went to class, realizing that it was a tragedy, but not understanding that it was an attack. When I got to geometry a few people had crowded around the television, and as I glanced over I saw the second plane hit the towers. At the time I thought they were replaying the first plane hitting – but as they panned out, I saw two plumes of smoke. Both towers were hit. It took a little bit for everyone to realize it wasn’t an accident.

Mr. Meltebrink (the substitute teacher) said something about a historic event, the start of a war, etc. While we all knew it was an attack and warranted retaliation I don’t think anyone realized how big of an impact that day would have on our lives.

It’s amazing how many conversations and comments I can remember from the day. The rest of the day we went from class to class, never staying away from a television for more than a few minutes at a time. Suddenly all the quizzes, tests, and homework assignments seemed a bit trivial.

I remember in 6th period I had religion class (I went to a private high school) and our teacher, normally excited to teach and fun to listen to, was very somber. He warned us about the next few days and the graphic images of bodies being pulled from the wreckage. Now, as we know, there were very few bodies pulled out of ground zero.

I remember coming home and seeing that every channel, not just the standard news channels, had plugged into one of the many feeds showing the live coverage. The anchors all looked exhausted, some of them were in the studios for more than 24 hours straight trying to bring everyone the latest news. Even MTV interrupted regular broadcasting and was showing the ABC news coverage.

It’s hard to believe September 11th, 2001 was five years ago. It seems like it was yesterday. All of the memories are so vivid.

Make your ads blend in. Not because people will click on them, but because they won’t take away from the content you’re trying to highlight. The first thing I want to notice on any website, especially a blog, is the content. Not the advertisements.

So how do you go about this? (Keep in mind, these aren’t techniques that will necessarily make you more money – they are techniques that will keep me at your blog longer than 4 seconds)

If your advertisers will allow you, design banners that match your site. Use your colors, use borders that match the rest of your blog, and use the fonts that you have used on any other graphics.

If your advertisers won’t allow you to design custom banners, you can at least put a border around the advertisements so that they aren’t floating in the middle of no where.

If you’re using AdSense, make sure the colors you use match your site. If your links are yellow on your site, make the links in AdSense banners yellow.

When I used to promote 6 Figure Blogging I designed a custom, “plasticy” button to put on College Startup. I didn’t do it because I wanted a higher CTR, but I did. My goal was to make the site look complete. I wanted everything to flow together nicely.

Check out the AdSense implementation at Karen Cheng’s site. She was mentioned in Darren’s post about designer AdSense implementations.

Know of any other well implemented advertisements? List them below in the comments. Get some ideas flowing on how to integrate ads so that they don’t take away from the user experience. Maybe your users will appreciate it and click your ads to say thank you :)

1. Line-height is important.

Open up your stylesheet. Find the rule that defines the font size and font family for your main paragraphs. It might look something like this:

p { font: 1.2em Arial, Helvetica, Sans-Serif; }

Then, add a quick rule:

p { font: 1.2em Arial, Helvetica, Sans-Serif; line-height: 1.4em }


It doesn’t necessarily have to be 1.4em, just make sure that it spaces out the lines in your paragraphs a little bit more than the default. It will make reading your posts a much better experience for your users.

2. Make sure your title tag includes the title of the current post.

I hate when a blog doesn’t include the title of the latest post in the title of the page. When I bookmark a particular post I have to add the title of the post on my own. Not cool. Let me know what post I’m reading. It’s usually pretty simple code. If you’re using WordPress, look at the default template and copy & paste that code from the title tag and edit it accordingly.

3. Make your links stand out

This has been beaten to death by every single designer that has ever talked about standards. Make your links stand out. They don’t have to be blue with a underline, they can be bold and red. They can be italicized and pink. Just make sure it looks different from the rest of your text. At the very least make sure the color is noticeably different. I want to know what is a link, that way I can actually click on it.

A useable blog means happy visitors, happy visitors like to come back, and that means more traffic for you. Make sure your blog is easy to ready, easy to navigate, and easy for users to enjoy. After that you just have to worry about writing great content – and that’s easy, right?

A lot of blogs have a pretty standard comment form. A lot of blogs with great designs have a great looking comment form. Part of having a custom template should include customizing everything – even the forms.

In this screenshot you see the comment form from 9rules.com. Mike Rundle did a great job making the comment form fit into the site, added a great looking submit button, and helped make the comment form stand out and add a little extra detail to the site.

Can you tell which site this comment form is from? Probably not. It’s from the default WordPress theme. It’s boring, it would work on any site but it certainly wouldn’t stand out and definitely doesn’t show any attention to detail.

Obviously comment forms aren’t the most exciting thing on a website, but great designers know that the details matter. Just because it isn’t the first thing a visitor sees doesn’t mean it shouldn’t be impressive. Custom themes should be one of a kind, they should stand out. Everything should be custom, not just the background image and the logo.

This is part one of a series of articles about the details of design. I’ll be pulling different elements from different sites to demonstrate well executed designs that really focused on combining all the elements of a blog to make something beautiful.