Thursday, 17 November 2011

Five Ways To Make A Great Landing Page

After taking some advice from people who know more than I do, I've made some changes to the site. This is what I've done.

I've said it before: you have only got four seconds or so to engage your audience when they visit your website. If the landing page doesn't grab them, they won't read any further. These are the lessons I've learned about web design and information presentation.

1. Less is more on your landing page

When I browse a website I want information. If it's got bog all on it, I won't bother reading too much further. Actually, I'm in a minority here. Clear clean layouts with sparse content on the home page is actually more popular with casual viewers than the information-rich pages I prefer to read myself. Basically, if you can't say what you do in ten words or less, you won't attract clients through your home page and readers won't trawl for information.

What about SEO?

Black hat SEO techniques involving hiding keyword-rich text is frowned on and can actually get you banned from the Google search results, but you can use the image tags to hold your explanatory prose where punters won't see it all. What they do need to see are striking images and eye-catching headlines that make them answer "yes" or "no" to whether or not they want your products and services.

How it works

It's important to use an eye-catching gimmick of some kind. I've got a fading slideshow at the top of the page (it only appears on the home page and beneath that I've got three question mark pics like this one with the questions in bold coloured and shadowed text:

  • Do you need a new website?

  • Have you got a domain?

  • Have you got a web host?

There's a short exposition of these questions followed by a call-to-action button with a rollover mouse effect (Find out more). I'm quite keen on those. The button leads to my hosting page where I offer advices on hosting and domains. There are three call-to-action buttons, each of which leads to a different part of the site. The point is, each image should do as much to explain the site's purpose as a dozen words. And that saves on ploughing through tons of text.

2. Keep it simple

I'm as guilty as sin of over-egging the internet pudding, and the more clever I try to be, the more I fail at it. Using more than two colours in a colour palette can strain the eye and you don't want too much crowding of content. That's why the only fancy flourishes on this site are the menu and the slideshow on the Home page.

How do you catch people's eye?

Use something like a slideshow, but only once, and not more than four or five pictures. Coloured text or fancy fonts should be used sparingly.

How it works

If they like your slideshow or header image, they'll scroll down. If the content is clearly presented and easy to read, you've got them and they will read on.

3. Bite size bits

I'm the opposite of many web designers and developers. I'm verbose, so I need to trim my text and avoid the text blocks o' doom because people are unlikely to read them.

What about the information?

Put it on other pages. It's the Home page that people usually see first. I've got some other stuff on there besides the crashing need for businesses to get online, but the most important stuff has been put at the top for people to see when they arrive. On the other pages, keep it short, sweet, and to the point, using images where possible to explain how things work. Use your imagination: why not add a video? Carousels, pop-out pictures (lightbox), charts and diagrams can help to explain things better than a page full of words.

How it works

People tend to skim rather than carefully reading through content online. If you haven't got them with the first four words you haven't got them at all and your efforts have been wasted. It's really not worth writing out a load of detailed information unless you know people will read it. Have it handy, though, perhaps on a page on your blog or on another file. That way people who want in-depth detail can read it while the skimmers get the info-bites they want and either stay or move on.

4. Clear clean layout

That picture above shows a three column layout, one I like because I think it makes the page look balanced. I'm using a grid system at the moment, but whatever you choose, make sure there's plenty of space between your text areas or people may find it hard to tell where one section ends and another begins. Don't use tables for layout. Ever. They can slow page loading time and are really old-fashioned.

What about blogs and CMS?

Many WordPress templates have a magazine layout option so you're not stuck with a two column look with a sidebar or two. The point is, make sure you differentiate between text areas when you're using more than one column or your readers may become confused.

How it works

Decluttering makes it easy to find what you're looking for on a web page. It also means there's no distraction from the message you want to get across.

5. Mobile ready

People use their mobile phones to browse the internet, and the sites they favour are those that look good or are easy to read on their phones. Flash doesn't work on mobile phones, and for that reason, unless you have a browser detector and a fix script, don't build your site in it and expect to get mobile users. Either make a folder on your hosting account with mobile-friendly web pages on it or use an online service such as Mobilizit or Onbile. Google Sites has a mobile template, too.

What about responsive design?

You don't have to make a separate area for mobiles, but if you accept that the screens are usually around 430 px wide (on their sides) you can build for that using responsive design or by making sure your text blocks or divs are no wider than the smallest mobile phone screen. In a responsive site, the div blocks flow and either grow or shrink to fit the screen.

How it works

The width of my header banner slideshow and my unwillingness to shrink it necessitated the building of a mobile-ready subdomain. This one doesn't have a slideshow on it so it loads more quickly than the main site. The mobile version is stripped down and only has two columns at the most to save people the bother of scrolling across on their phones. If they skim on a PC, they'll skim more on their phones. The point is, as long as there's a way to get the content to sit neatly on a mobile phone it doesn't really matter which option you choose, it just needs to be one that works.

No comments:

Post a Comment