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

18

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:

freelance-blog

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?

18 COMMENTS

  1. Hey Ramona,
    Good tips in improving the design of logs. I don’t even have a good header yet, I’m planning to go to Fiverr to get on designed. At this point I’m in audience building and blog networking so I don’t want to clutter my page up.

  2. Oh man. This is a good post, but is making me want to hide out under a rock somewhere since I have a lot of your “don’ts” on my site. I’m very new to the game and find it hard enough to focus on content. The design part is overwhelming for someone like me. This post is very helpful, if my blog becomes successful I can hire you to do design!

    • Don’t worry, it’s not that bad. It’s actually the default WP theme with some tweaking. The articles are not difficult to read and in time you can surely tweak more or find better options. πŸ˜‰

  3. Great tips and I agree very much so. Although my blog is using a free theme I consider it as a non widely used theme and it meets the responsive element that I feel is needed. Thanks for these tips. I will hopefully soon be able to upgrade to a premium theme until I can save up for a custom one which I agree is needed to help your brand and personal image develop.

  4. This post is incredibly helpful, but as a new blogger and html/css/php (or whatever the word/term is for website design) illiterate, I’m not sure how to address my design flaws. I have all these ideas and a whole design wishlist, but until I can afford a designer, I am at the mercy of my googling skills.

    • The design doesn’t look bad at all anyway. Sure, there are some tweaks that will probably be made in the future, but right now I think you’re on the right track with it πŸ˜‰

  5. My blog is guilty of #2. I have a large “sunset” header that goes across the entire page. I plan to shrink the “sunset” banner to something smaller and more fun, but I don’t know what to replace it with. I’ve tried getting rid of it altogether, but I didn’t like that look, either. I expect I’ll come up with something, eventually. I use a local test site on my server for running upgrade tests and theme experimentation.

    • saveandconquer.com/wp-content/uploads/2013/08/sunset-banner2.jpg is the path to the banner. If you want to cut some of the height for instance, you need to overwrite this image. If you wish, drop me an email via the contact form and I can make the edit for you. It’s not a huge deal anyway for me πŸ˜‰

  6. Very nice tips! I do use a free theme on my blog, but I absolutely fell in love with it when I saw it so I said why not? Regarding the ads, there are plugins that can be used to show them only to search engine visitors and so on – this way, you can reduce their numbers and keep the returning visitors happy.

    • Welcome to the blog, Kyle. It’s always a good idea to update the theme at least every 2-3 years. I like to do this yearly, to keep up with the latest trends, but even an update every once in a while can help. Keep us posted on the progress, would love seeing the changes you bring

LEAVE A REPLY

Please enter your comment!
Please enter your name here