Website Heatmap

Recently, I wrote about how authors should think carefully when placing a link to their books on their blogs to increase book sales. A small but important point and applicable to anyone who has a website or blog. It is always worth remembering that visitors to webpages make very quick decisions about what they want to read and therefore what links they click. You only have a few seconds to impress.

So to take the thought a little further, I thought it would be worth looking at a webpage as a whole, and comparing your own blog or website to the ‘heat map’ graphics attached to this post.

Many blogs and websites I visit have the appearance of being added to over and over again without thought given to the layout. If you use Google’s Blogger for your blog, it is very easy to keep adding widget upon widget on the right hand side that then they end up extending to infinity down the page. Clearly very few of these will ever be seen by visitors, so is there any point in having them at all?

webpage hotspotsThe best websites and blogs have one thing in common. Simplicity. However, a large proportion of blogs I visit are cluttered and confusing with bits and pieces clearly tacked on over time resulting in something akin to a knick-knack drawer. So is it time to do a stocktake of your blog or website and turn it into something appealing and easy to navigate?

The first step is to look at your home page. Does all the important information fit into the initial screen view? Or does it need a visitor to scroll down to find the important stuff? If you have an enormous image at the top hogging your header space, get rid of it pronto. Firstly because it takes an age to load and is a great way to lose visitors and secondly it is using valuable screen real estate.

You have to grab your visitor’s attention within 2 seconds, so what do you want them to see? A huge landscape image or the post you just spent hours writing? Get your content in the centre of the screen, or main body area as in the graphic above. Got something to sell, or a link you want your visitor to click? Then make sure it is in a hotspot. Again, on the initial screen view. The bottom of the initial screen view is called the ‘fold’, so think carefully about what resides below it.

What is clogging up your valuable real estate and how important is it? Make some decisions, then move all the secondary items to separate pages and include a navigation bar in the header. Never try to fit all your content on one page. Your visitors come to be informed, not participate in a treasure hunt. In Blogger or WordPress it is very easy to create new pages and the navigation needed.

Lastly, two tips. Slow loading sites are a great way to lose visitors. When you visit your own site, those huge images and widgets only load quickly because your browser has them in cache. For a first time visitor, they can take forever to load. Also consider how readable your site is. White text on a black background is very hard to read, impossible to print and looks very heavy and uninviting.

The key elements to a good site are simplicity, readability, fast loading and easy to navigate. How does your’s rate?

Is Your Blog Visitor Friendly?
Tagged on:                         

18 thoughts on “Is Your Blog Visitor Friendly?

  • 26/09/2011 at 10:47 am

    Derek, I fundamentally agree with everything you say with one minor exception.

    You say that white type on a black background is hard on the eyes. I have to disagree mate. White type stands out. It is easily read compared to black type on a white background, which if your eyesight is as bad as mine, means it disappears, blends into the background.


    • 28/09/2011 at 12:14 pm

      OK, I have relented. After a few of you complained bitterly about the text in my posts being white against a black background I have just changed it to keep the peace. LOL


      • 28/09/2011 at 2:05 pm

        Oh no. If you gave in, does that mean I have to as well? And I really do like my template…

  • 26/09/2011 at 8:09 pm

    I’m in my twenties with nearly perfect vision and I hate reading white type on a black background. The letters start to blur together.

  • 26/09/2011 at 8:52 pm

    What about the image at the top of this page? Is there some reason why it’s not slow-loading, or did you decide it was worth being the exception to the rule?

  • 26/09/2011 at 8:57 pm

    Good point Pooks. The image at the top of my blog is ‘Smushed’, an image minimiser. So it loads very quickly. It is also cached on the server. But I was more referring to images that nearly take up the whole space to the page ‘fold’.

  • 26/09/2011 at 9:01 pm

    Thanks for the clarification. I’ve got the image on top and white print on black background. No telling how many more errors! Something to add to my list.

  • 27/09/2011 at 2:06 am

    You suddenly made me feel a LOT better about remaking my blog design. I haven’t been settled with it and I may go the route of something much more simpler and easier to maneuver around. I’m also a widget clutter freak, so time for some house cleaning on that one! :)

    Thank you for the advice!

    • 27/09/2011 at 9:17 am

      Glad it helped Nicole. One good idea when testing your site is to clear the cache in your browser and then load your site to see how long it takes to load. There is also a great add-on for Firefox called Firebug. It gives the actual time it takes to load a site from your server.

  • 27/09/2011 at 8:15 am

    Good advice Derek. The heat map is a real eye opener.

    One other thing I heard recently is about the use of images in posts. I have heard compelling arguments that the composition of the image should lead the eye into the body of the post. If someone is in the image pointing away from your article, you need to flip the image so they point back into the body.

    Where do you get your pictures?
    They are always such a good match for your topics.

    • 27/09/2011 at 9:14 am

      Very true Andrew. Flipping an image can be very useful. I use it from time to time. Regarding my images, I use my own, Google and Flickr, and occasionally wikipedia but sometimes it can be time consuming finding images that are not copyright protected.

      A note of caution though. Grabbing any image from Google images without checking can have some surprising results as some images carry code that will link back to the original location.

  • 27/09/2011 at 10:29 am

    Hi Derek, Could you explain the term “Smushed”?

    And how did you get your comments from here onto twitter?



    • 27/09/2011 at 5:05 pm

      Sure JJ. is a WordPress plugin that used the service from Yahoo to reduce image size for use on the net. A great tool to keep a blog page size minimal.

  • 27/09/2011 at 10:37 am

    On white text, black background, I’m with Derek. I’m not young. I now have 3 pairs of glasses and spend half the searching for one or other of them. If you want to see a site with really poor text/background, take at look at the Blog Farm (I don’t have a link to hand – sorry). They use a small black font on a patterned green background, which I couldn’t read at all, with any of my glasses.


    • 27/09/2011 at 11:24 am

      Heh – this from the man who forgets to charge up his Kindle’s battery lol :)

  • 27/09/2011 at 1:53 pm

    Hi Derek, I just got my first look at statistics for my web site
    The domain hosting company provide a wealth of information. The most striking thing I spotted was this: Statistics showing the length of time visitors spent on my site:

    0s-30s = 76%
    30s-2m = 11%
    2m-5m = 7%
    5m-15m = 5%
    15m-30m = 0%
    30m-1h = 1%
    1h+ = 0%

    76% spent less than 30 seconds in there!
    (note: this is for my web site, not my blog)


    • 28/09/2011 at 12:47 pm

      Your site statistics really prove the point JJ. You have just a few seconds to catch a reader’s interest. That’s why fast loading pages are so important. I know myself, if I have to wait for a site to load, I usually move on. It also bears out why the content before the fold is so crucial.

Comments are closed.