Thursday, 28 March 2013

Web design tips for small businesses

Thanks to Jackie Barrie for this guest post, extracted from her new book: ‘The Little Fish Guide to Writing Your own Website.’

Follow the F-pattern

Eye-tracking studies show that website visitors tend to glance along the top two lines of text, then scan down the left hand edge taking in only the first two words of each line, and perhaps look across the page once more. They spend very little time looking at the bottom right hand corner of the web page. The pattern of their views looks like the shape of an F.

Designing your website - heatmap

These heatmaps show eyetracking results for three websites. The areas where users looked the most are coloured red; the yellow areas indicate fewer views, while the least-viewed areas are blue. Grey areas didn’t attract any fixations.

When you know about this F-pattern, you can arrange your content to suit it. For example, write a powerful headline at the top of the page that answers ‘what’s in it for me’. Add a sub-heading mid-way down the page, especially if the first couple of words are significant ones. And avoid putting anything important in the bottom right hand corner.

Splash pages

Have you noticed those websites that start with an animation and – if you’re lucky - a ‘skip intro’ link? Have you ever watched the intro without skipping it? No. Me neither. This is called a ‘splash page’ but any extra click e.g. ‘enter site’ is a chance to lose site visitors. Please don’t do it. The only people who benefit from splash pages are the web designers who get paid to create them.


Aim for a site that is no more than 3 clicks deep, so that the user doesn't have to work hard, and is never more than 3 clicks away from the content they seek. Site navigation is not the same as print pagination. As pages can be read in any order, site visitors need to be able to get to anywhere, from anywhere. To do this, you can include a sitemap (this is good Google practice too) and/or breadcrumb trail, especially for complex sites with lots of pages.

Inspired by the story of Hansel and Gretel being lost in the woods, a breadcrumb trail is a set of links that show where you are within the site e.g. Home > Services > Copywriting.

Breadcrumb trail from Art Division, showing Home > Web Services > Online Marketing

On his site, Vincent Flanders has collected some wonderful examples of what he calls ‘Mystery Meat Navigation’. That is, navigation that baffles the consumer.

The point is, you have to make it easy for your site visitors to find what they want. So don’t let your web designer try to be too clever with the navigation they use.

Jackie Barrie writes without waffle for websites, blogs, newsletters, brochures, leaflets and speeches, in fact, anything to help your company make more money. She is the author of ‘The Little Fish Guide to DIY Marketing’, and ‘The Little Fish Guide to Networking’ and ‘The Little Fish Guide to Writing Your own Website’Find out more at


  1. The visual of the F pattern is very useful. I'd previously heard that the attention line was smile shaped, but maybe that's print rather than web.

    I also share your feelings about splash pages. They're like adverts at the start of a Youtube video; they get in the way between you and the information you're interested in.

    I can start to feel negative about a brand if they get in the way too much. Some of them are ubiquitously omnipresent.

  2. In print, it's a Z-pattern (at least in English where we read left to right). That's why the prime advertising space in a newspaper is the bottom right hand corner of a right hand page (apart from the outer covers), and why it's where you put your call to action in the ad.

  3. I have just started my career in the Web designing field and one of my client wants to create responsive web design. so I was searching for such kind of online help and now i find this article. The above mentioned tips are really very helpful for me.


Popular Posts