Web Design: 10 BIG mistakes you are making with your blog’s design

I have been visiting hundreds of blogs in the past weeks, after deciding to get off my lazy pregnant behind and start doing something with this blog (which was clearly failing). I have noticed some ‘trends’ when it comes to the blogs I visited/read, some are good and some might also need some work.

My regular ‘job’ is web design and I’ve been doing it for almost 12 years now. I’m picky and never pleased with anything (don’t start me with what I hate about my sites :)), but I do hope these ideas will help at least some of my visitors bring their web sites to the next level:

1. You have chosen a free/premium theme other similar blogs use

Right now I ‘monitor’ closely to 200 blogs and have seen few themes over and over again. Ideally you should have a custom theme designed for you. It’s not as cheap as a premium theme is (right now my rate for a responsive blog design, that’s original and beautifully made is $500 – you can see some of my WordPress themes), so many new bloggers won’t be able to afford this. Sure, once the blog starts earning you some good revenue, having an unique professional design will make it clearly stand out from the ‘crowd’.

Anyway, as you’re starting out and cannot yet pay this kind of money for a custom design, free or premium themes are what you can reach. DO NOT get the same theme as your favorite blog in the niche has. When you see what they’re using, AVOID that theme, don’t go and install it just because you already see it being used by others. There are literally thousands of WordPress themes around the web, you don’t have to get one that’s being over-used in the niche. No matter what theme you’ll come to use, making your blog stand out and have its uniqueness is really important for its success and branding.

2. Your blog header is TOO huge

I have seen that some blogs use a big image in the header. This usually stretches the entire width and is at least 200-250 pixels tall. A general rule when it comes to presenting information to your readers is to provide some enticing content on the ‘first screen’ – before they start scrolling down. If your header image is occupying half that vertical space, you’re already losing some pretty important ‘real estate’ on your theme.

You’ll probably tell me this big image helps with your brand and making sure people remember your blog easily. If you’re using a nice logo (that doesn’t need to be big either) and not the same theme others use in your niche, your blog will already stand out a lot. Make sure you have room for your logo, some regular sized social media icons, the search bar (which is more important to your readers than other elements) and can even place a banner, if an ad opportunity came your way.

This blog doesn’t have any banner ads so far, but there’s enough room in the head section for a 468/60 pixels ad (I made sure I create my custom theme with this in mind), which will either be a premium ad spot for a future client or will promote some of my services. Anyway, that’s the most important ‘real estate’ in my theme, so I don’t like to waste too much space with something that doesn’t give me a good return.

Let’s also have in mind that, the bigger the images in the blog, the slower the loading times will be.

3. You are using (too many) sliders

I have noticed that many sites use sliders to promote various services and features. Some of my design clients asked me to implement them on their sites, since it would allow them to showcase more ‘stuff’ on the home page. Do not go overboard though. Anything ‘extra’ you put on your theme (jQuery, JavaScript etc.) will slow down your site. This annoys visitors, increases your resource consumption and can even hurt your rankings.

As a personal preference, I usually stay out of them, especially on blogs. Anyway, use them with care and don’t go crazy, even if they do seem ‘cool’.

4. You don’t use a fixed/max width for your template

One big mistake when it comes to usability is to make the text stretch forever on a wide screen. My laptop screen is 1600 pixels wide (so not even as wide as other displays). Imagine me having to read such a long line of text. Yes, I can read it, but it will eventually strain my eyes and annoy me. Call it personal preference (even if it’s not), but a design should clearly start and end somewhere (and also be centered on the display). All this is VERY easy to solve, by placing a max-width:980px for instance in the theme’s CSS.

This ‘tells’ the browser to limit the page width to 980 pixels (if it’s a wider screen), makes the entire design flow better and look more organized.

5. The design is too ‘old-school’

Design trends are changing fast and some of the templates/themes people used 3-4 years ago do look outdated. Many blogs now have a very clean/clear design, with simple elements, nice typography and less bars, shadows, embosses etc. Look for themes that have been recently released, look elegant and are simple enough to not detract from the main content/images.

6. You don’t have a responsive theme

Again, new trends. The latest improvement in theme design was to make them responsive. This means that, even if you are viewing your site from a mobile device, you don’t need a separate plugin (with a stock mobile friendly theme – that’s usually horrible and has absolutely nothing to do with your main design/brand), the theme itself will start ‘morphing’ based on the width settings of said device. The ‘boxes’ will start appearing under each other, images will slowly ‘resize’ to fit the screen, the sidebar will appear after the main content, so that the article stretches as much as needed for the reader to be able to see it properly on the small screen.

I have noticed that many blogs still don’t use a responsive design and, if they do care about their mobile users, they use a mobile ‘friendly’ theme. The issue with this (aside the fact that it has nothing to do with the main theme) is that sometimes it loads when it shouldn’t load (my tablet has over 1024 pixels in width, so I don’t need a mobile theme to read your blog, not to mention that sometimes the same theme appears on my wide screen laptop. Not only is this annoying to me – to have to go down to the footer to disable it, but many times disabling it doesn’t work, so I’ll still see the mobile theme load, even if I clearly ‘asked’ for the desktop version)

7. There’s too much clutter

I notice that the era of too many widgets and blog networks badges is slowly fading, but many blogs still make a mess with it. Be very restrictive with what you showcase on your blog and think if the widget/banner really brings anything to your readers or it just wastes space. As a general rule I try to stay away from ‘badges’ and all kinds of similar junk. I use banners for my services/my advertising clients, I promote links that are important and maybe use a facebook box (which I’m clearly reconsidering).

It’s good to have an overall ‘design’ for your content/sidebar, something that goes and is consistent around the site. You don’t need animated anything, you don’t need network badges or god knows what else can be pushed under your nose.

8. You have too many banners

Advertising is good. It’s actually VERY good, since it pays for our work/expenses. I’m all for making money, placing banners, providing any advertising options my clients need from me. I’m not here just for the fun of it, if I can earn a decent buck from my hard work, count me in.

But there’s a thin line between making money off your blog and driving your readers bonkers with banners. As a general rule: better provide fewer banners (at bigger prices) than to fill the blog with $5/month banners in the hope of making it big. Our readers are usually ad blind, so many times the banners will go unnoticed and even annoy (if there are too many). Sure if you have few banners, they will get more attention, you’ll get happier clients (and more money) and the readers won’t be too annoyed, since they still can easily access the wonderful content that brought them to your blog.

9. The font you’re using is too small

There’s a trend in design nowadays for bigger fonts and, as weird as this seemed to me 12 months ago for instance, I can understand its merits, especially when I get to a 12 pixels Arial font main text. I usually try to have around 14 pixels (some go and even recommend 16) and also space up the paragraphs/lines so that the articles are easier to scan. Got so used to reading many articles like this that it’s tiresome for my eyes to read a 10-12 pixels font text on some of the blogs.

10. The colors are ugly or they clash

Beauty is in the eye of the beholder, but there are still ways to find nice colors and still have a nice ‘sharp’ design on your site. Do follow a general color theme (blue/grey, red/blue/black etc.) and use few colors, that go well together. You can then use similar hues to the main colors, if you need some more design elements.

What are other things you consider are important for a blog design to be even more appealing/successful? What makes a blog hard to read or unappealing to you?