There’s a lot of little tricks that web designers use that can turn a good page into a beautiful page. Lots of times you won’t notice it. For some reason, your page just doesn’t pop like pro pages. This is also true on blogs. Some blogs just look great, and some are severely lacking in style. I’ve put together a list of 10 things to help make your blog posts look more professional.

1. Style Your Line-Heights

This is a great tip that lots of successful designers echo. Open up your CSS file and set your body declaration like this:

1
2
3

body {
	line-height: 150%;
}

It’s that simple. We’ve just added a little extra space between each line of text on your blog post, and it just looks cleaner and more professional.

2. Full Length Headers

I wrote about this in detail a week ago here. All the steps are in that article. What it does is give your headers the look that they have in this article. Those lines under the headers for some reason just look very professional.

3. Pick the Right Fonts

Fonts are incredibly important. If you haven’t read any design books about fonts, you should at least look into this stuff online. There’s a lot of opportunities for mixing fonts. I, however, have always just used the same font for my entire post. Either way works though, just be sure that if you use two fonts, that they don’t fall in the same category, like serif vs. non serif. A note on web fonts: My favorite has to be Lucida Grande, but strong, visual, professional presence can also be had with Verdana or Trebuchet-MS. Play around with those 3 and see which you like best.

4. Big Photos that Pop

If you are writing a review of a hardware product, don’t fall back and find an image of it online. Go ahead and pull out your digital camera and snap a few shots yourself. I have a few tips for taking your own pictures of products. I find it very attractive to shoot with the device on a wood desk. I prefer dark-reddish wood, but any kind will do. This yields a very nice color to set the product itself off from the background. I think wood gives a better visual background then just plain white. You also want to get on level with the device, and you can bust out the Macro function once or twice. Also, be sure to play around with your flash settings. Sometimes you’ll have to use no flash if the object is very reflective. I’ve found that the Slow-Flash mode can create good colors with less evidence of a flash.

And once you have your photos transfered to your computer, run them through Photoshop. Do Auto Color, Auto Contrast, etc. Also consider running it through a Sharpen filter once or twice to emphasize it. When you are through, throw it up online, and be sure to resize the image to be pretty large. Big pictures contribute a lot to reviews, and having nice big pictures add professionalism to your review.

5. Float Small Picture

Whenever I write a story about an application, I always put a picture of the app’s icon into the story. This is a great opportunity to add some spice to your posts. If you have small images that aren’t big enough to merit its own line, then use a little CSS to float the image.

1
2
3
4

.small_image {
    float: right;
    margin-left: 15px;
}

This CSS class does wonders. Text now wraps around your image’s square and looks very nice. The margin-left setting gives your image some breathing room, so the text is not flush to the image.

6. Syntax Highlighting that Jumps

If you post any sort of source code into your blog posts, I’ve just recently discovered this great WordPress plugin, which I’ve written about here. This plugin will style your source code to look elegant and fit right in with your blog post. Any code blogs should absolutely use this.

7. Use the Blockquote

If you do a lot of writing, you’ve probably come accross a point where another person has put your thoughts better. This calls for a time to quote. Online, though, we don’t just use quote symbols inside your paragraph. You break to a new line and put the authors words by themself. We use the HTML tag: blockquote. Not only does this add a more journalistic nature to your article, it also can look very nice. I style my blockquotes like this:

1
2
3
4
5
6

blockquote {
	margin: 15px 30px 0 10px;
	border: 1px solid #c9c2c1;
	background-color: #F7F7F7;
	padding: 2px 12px 5px 12px;
}

A nice subtle border with a light background makes these things pop and look very nice.

8. K.I.S.S., Dummy

Keep it simple stupid. I’ve found clean, simple designs to always come off as professional, and overly dropshadowed, 3d, etc kind of sites just come off as juvenile. If you have ads, make them subtle. If you have a sidebar, don’t over-complicate it. Everything on your site should not draw attention away from the content. Keep it clean.

9. This is Not MySpace: Colors Contrast

This flows with the previous topic. Backgrounds should not distract, nor should text color distract. I’ve always found that most pro use “Black on White.” You can be professional doing “White on Black” or other colors, but make sure that those two colors contrast significantly and that you have changed your colors around for a reason.

10. Content Always Wins

Finally, even the most beautiful design won’t make you professional. You still have to write well about interesting topics and maintain a good discussion. Like they all say, content is king. And as much as I hate to say it, the cliche is correct. You’ve got to have great content to be professional, so always work on that, always write good stuff.

Conclusion

Want to sound professional? Add a conclusion. Wait, this is actually the conclusion of this article. There are a lot of tips and tricks out there to tweak your design to perfection. These listed here are by no means all of them, nor are they always true on each site. Just think about how these pointers can help your design and maybe incorporate a few of them, or use the general idea of the tip to make your site look better. I’m always interested to hear readers thoughts, so if you’ve found any other good tips, please post in the comments.