Photo credit: http://www.flickr.com/photos/93726493@N00/2451591110/
Do you know that your sidebar may cost you a lot of money?
To tell the truth it’s not the only part of your web design that may make you lose some bucks.
Give a look around the web and you’ll notice many silly (but common) web design mistakes.
Would you go in a restaurant with a dirty frontage and some rubbish near the entry?
I wouldn’t. Those things make you think that such restaurant is low quality and serves unhealthy food.
A similar thing happens when you land on a bad looking blog: you classify it as low quality, and you leave as fast as light.
Even if a first time visitor remains on an ugly blog, probably he won’t buy products because of the design. People need to know that you are reliable and professional to buy from you, but a bad web design gives a sense of unreliability.
Of course, a phenomenal web design will help you to sell more products, reduce bounce rate, increase your perceived expertise and better engage your readers, but it will cost you a lot of money, and probably you don’t want to invest them until you grow your business and can afford such investment.
The good new is that you don’t need a phenomenal web design, you just have to avoid 7 silly mistakes that can easily kill your business.
1. Unprofessional Overall Look
The first thing that you see when you land on a new blog is the overall look of the page.
If it doesn’t seem good enough you will leave the site in few seconds.
Let’s see an example of unprofessional look:
The overall look of this blog make it seems unprofessional. It may have the best content in the world, but you wouldn’t read it because of its look.
There are many design mistakes in this page, but I want to focus only on the overall look now.
As you land on this blog, you see a white page with a quite ugly picture, a green header with a very bad text (green text on a green picture is a huge mistake!), a very flat menu and a light blue background. Would you buy from this blog?
Of course not!
The biggest difference in the overall look of blog comes from the theme that you use.
I highly suggest you to take a premium WordPress theme instead of a free one: it’s on a completely different level in web design and seems professional.
There’s a huge difference between a WordPress free them and premium one.
There’s a reason because all the most popular bloggers have a premium WordPress theme (and usually, they hire a designer to bring it to the next level too): it’s because premium themes are far better than free themes.
I hear from many people that they don’t want to spend money on their blog. Well, it’s ok, but then I hear them complain about their poor results and I wonder “Why are you complaining? You want people to spend money on your business, but you’re the first who doesn’t spend money on it. This is hypocrisy, isn’t it?”.
Your blog overall look it’s too important to neglect it.
You could even choose a free WordPress themes, but in this case, you need to customize it and make it look great (with most of the free themes you’ll need to know codes or ask to someone who knows codes…but in the latter case you will spend less with a premium theme that you can customize by yourself).
A WordPress free theme may look good with a great customization.
The overall design should look harmonious.
Pay attention to details.
Your background should fit well in the overall look.
And follow all the next web design tips 
2. Bad Header
The header is a key element in your web design. It can help you to get the attention of the people or it can scare your visitors and make them leave your blog.
Surfing a little the web you’ll notice that most of the blogs have terrible headers. It’s probably the most undervalued element in the web design, even though it’s one of the most important part of the page.
First and foremost, if you want to insert a picture or a graphic work in your header, insert a great one.
A bad graphic work in your header is worse than a skunk in a sealed atomic bunker.
A bad graphic work in your header, and first time visitors will run away from your blog.
Many people make their blog title pretty flat and sometimes even unreadable. We’re talking about your online business card, you should make it great and readable!
The title and the description are unreadable…this header need to be changed as soon as possible!
Your title is your brand, if people can’t read it, they won’t know your brand.
Your logo goes in the header too, and should be clear because, together with the title, it’s an essential part of your brand.
The header gives you the chance to show first time visitors what’s your blog about. This is crucial to make people decide if they are in the right place or not.
A great and clear header from Pamela Wilson of Big Brand System. This header is pretty simple, but it works great. The headline is perfect too.
Not including a headline (that should anticipate your Unique Selling Preposition) is a mistake that may cost you lots of customers.
Through the header you can even make a first attempt to connect with a first time visitor: you just have to show your picture.
Ana from Traffic Generation Cafe inserted her picture in the header of her blog. It’s a great way to enstablish a first contact with first time visitors.
The header is a key to have a great overall look, and it’s also a big opportunity to hook your first time visitors, take care of it.
3. Wrong Color Scheme
Colors are extremely important.
The unprofessional overall look of a blog is often due to a bad color scheme (other than a bad theme and a bad header).
There are many case studies and scientific researches beyond colors and color schemes. It means that colors have a crucial role when it comes to design.
Too many colors and your blog seems a very low level one.
There are too many colors here. 3,2,1…let’s push the back button!
When you bombard your visitors with many colors you’re distracting them: they can’t focus on your message (headline, menu and blog post titles) because all the colors are taking their attention.
My advice is to use 2-4 colors. Using the right scheme you could use up to 6 colors, but if you are not 100% sure about them, probably you’ll have better to insert fewer colors.
Bamidele Onibalusi of YoungPrePro shows us a perfect example of an appealing color scheme.
Notice that the opposite color mistake is pretty common and dangerous too: flat color schemes are pretty boring.
There’s too much white in this site. It has a quite clear look, and it’s a good design for some reasons, but it will bore you pretty soon because of the excess of white spaces
Colors should be mixed in the right ration.
If your blog is too colored, it will have a bad impact on your visitors. If your blog is too white, it will be too flat.
The most important concept is that you have to balance colors.
Notice that you should use colors and white spaces to make people pay attention to certain parts of your blog.
Here’s a perfect example on how to use white space to highlight important parts of your blog by Caleb Wojcik of Pocket Changed.
White spaces can be used to highlight some parts of your blog such as headline, blog post titles, your optin form or your product image.
If you want to highlight something just put some white space around it, and make the object colored (or black).
4. Overcrowded Sidebar
How many overcrowded sidebars have you ever seen online?
I guess too many. There are sidebars in some blogs that are more crowded than the main streets of Los Angeles at 5pm!
The blogosphere is full of blogs with way too many ads in the sidebar.
Do you know that it’s a counterproductive approach?
The more items you do have in the sidebar, the fewer people are driven to click on them. Simply nothing can standout and grab the attention of a person – without mention that a sidebar full of ads makes you look spammy, and as a result your online reputation will be irreversibly damaged.
This sidebar has an endless amount of banners…definetely spammy!
The sidebar has a key role in your business.
Your sidebar should accomplish one of the following three tasks, and possibly all of them:
- Make people subscribe to your email list
- Make people buy your stuff or your affiliate products
- Make people read more content on your blog
All the other goals are not required. As a bonus task you may want people follow you on social media, but it’s not as important as the previous tasks.
This doesn’t mean that you should add, your Facebook box, Twitter feeds and other social network widgets on your sidebar. Keep your sidebar clean.
As a general rule you have better to keep 3-5 items in the sidebar. If you insert less items, your blog may seem empty, in the opposite scenario it will look quite messy.
It means that you should choose carefully what you insert in your sidebar.
5. A Non-Obvious Overcrowded Menu
The menu is a crucial part of your blog because the people who arrive on it for the first time need to know where to go.
It should be clear and immediate.
I’ve seen many blogs with non-obvious page names in it. That kind of menu doesn’t help you to decide where you should go on that blog, and this is a big problem: when people don’t know where to go on a blog, they click the back button.
Even if you see the whole blog, you won’t guess what these pages are about. Does “jobs” stand for “find a job” or for “offer a job”?
Try to make the page names in your menu obvious. Think like a first time visitor who doesn’t know anything about your blog, and help him to figure everything out fast.
It means that you should also cut complex page names out of the menu, keep it simple.
Immediacy is the key to a functional menu.
Of course, a menu with too many pages isn’t immediate. You don’t people have a hard time trying to figure out what’s on your blog.
This is probably the most crowded menu that I’ve ever seen in my entire life! Just too complex…
Insert just the most important pages in your menu. As a general rule, have 3-6 pages in your menu and try to avoid the cascade menu.
Cascade menus are quite complex, and because people can’t see every page in them, they will damage the immediacy of your menu.
Daniel Gonzalez of Conversion Love shows us a very immediate menu. It’s wonderful, you don’t need much more than this in your one.
6. Too Many Ads
Ads have the huge power of making you lose potential customers.
If ads are your main monetization strategy, leave them on your blog, but if you are selling a product or a service, delete them from your blog.
It’s not only because people who click on ads will leave your blog and probably will never return: it’s because ads make your blog look messy, spammy and unprofessional.
Of course, you can insert them in the right way and make them look good in your design, but you have to be really good at this for doing it.
The most common ads excess, as said before is in the sidebar, but it’s not the only one. There are many blogs which insert ads in the header (huge mistake!).
Forbes is terrible when it comes to ads – there are too many of them in it. This one in the header is an example.
Many bloggers insert ads in the content of their blog, with terrible results – ads in blog posts make you look really spammy.
This banner inside that blog post is horrible…readers won’t like it.
Many people even bring this kind of ads to the next level: they use text ads in their blog posts, a sure way to have messy, unreadable page (please, don’t do it!).
The post begins…and a text ad interrupts it. Rise your hand if you hate this kind of ads.
I’m completely against ads, because they’ll make you waste more money than you could earn with them, but if you want to insert them in your blog, don’t exaggerate and try to keep an equilibrium.
7. Unusual Page and Text Colors
Have you ever noticed that 99,9% of the most successful bloggers use black text on a white page for their posts?
It’s just because it’s the most readable content format.
Forget about using strange colors for your page and/or text because you’ll only make people leave your blog without reading your content.
After reading two senteces of this, probably your right eye will be dead. The left one will follow in the next 3 words…
Avoid grey both in text and page background too. Very dark grey text on a white page it’s ok, but why using it when you can make your text black?
The same is true for the opposite case: black text on a very light grey could be ok, but it’s better to use black text on a white page.
Your content is the most important part of your blog, you want that everyone reads it – losing some clients because of your blue text isn’t the smartest idea in the world.
Your Time
What do you think about your blog design? What would you improve in it?
Leave a comment with a link on your blog and I’ll be more than happy to check it out and give you a feedback about your web design.
Mauro D’Andrea
![The Science of Pricing: Pricing Strategies to Increase Your Sales [Infographic]](http://www.blog-growth.com/wp-content/plugins/wordpress-popular-posts/timthumb.php?src=http://www.blog-growth.com/wp-content/uploads/2013/03/The-Science-of-Pricing-Pricing-Strategies-to-Increase-Your-Sales-Infographic.jpg&h=60&w=60)
![How to Increase Blog Traffic in 3 Easy Ways [Infographic + Video]](http://www.blog-growth.com/wp-content/plugins/wordpress-popular-posts/timthumb.php?src=http://www.blog-growth.com/wp-content/uploads/2013/04/How-to-Increase-Blog-Traffic.png&h=60&w=60)
Thanks a lot for this awesome collection of mistakes. Sometimes you think that it can’t be true what people offer you as a professional blog and yes, you are right, I leave as quick as I can. Especially, when I see a green header with green font and neon something on it – nothing can make me stay.
The first impression is important – online and offline.
You’re welcome, Monja!
Exactly: too many times we think that look doesn’t matter, but the reality is that look plays a key role in today world.
Thanks for linking to my post, Mauro.
It’s my pleasure, Sharon. Your post was great!
I agree with all your points except the one about avoiding grey text.
The reason is the “immediacy” you talk about. Sometimes you can’t avoid having way more text on a given page than users want to process. Varying shades of text can help it be “scan-able”.
For example, take a page that’s a long list of post titles and excerpts, like a category archive page on a blog. That’s a common look.
If everything is black text on a light background, everything pops out and looks sharp and crisp. That’s a good thing right? But even with just short excerpts, it doesn’t even take ten posts to make that a lot of information that my eye is noticing all at once. I’m overwhelmed!
You can make it easier on my by keeping just the most important text black (probably the Titles if I’m trying to find a certain post.) Then lighten the excerpt content to a dark gray, since I’ll read it next if I see a title that looks promising. Finally, all the meta info (tags, post-date, the author) can go one shade brighter.
Now we’ve created a hierarchy of information just using shades of gray and text. Instead of seeing a splash of black text when I land on a page, I notice the titles before anything else and can easily “scan” them over. It saves me a lot of reading, and your users don’t like to read any more than they have to.
I’m sorry, I wasn’t really clear in my post, I was referring only to the body of your blog post/page. I think that you have to use different colors for the text in your pages (my headings for example aren’t black), but black text should be the standard when it comes to the body of your blog post and pages.
I agree with you, it’s useful to use different colors to establish a hierarchy of information – but not many colors or you risk to overload the visitors.
Another post full of brilliant insights. Thanks for sharing your in-depth knowledge and experience about the dos and donts for proper web design.
You’re welcome! I’m happy to help