Five Ways To Make A Great Landing Page

You have only got four seconds or so to engage your audience when they visit your website. If the landing page doesn't catch their attention, they won't read any further. These are the lessons I've learned about web design and information presentation.

1. Less is more

The information displayed should be clear, concise, and factually correct on a clear page with a clean, well-spaced layout. If you can't tell viewers what you do in ten words or less, you won't attract clients through your home page because readers won't trawl for information.

A slideshow or large image should only appear on the home page. You can use stacked columns with subheadings for the various components of your service or bullet points with pictures instead of bullet symbols. Repeating words for the sake of it annoys the viewer: choose your words carefully to reflect the service you provide rather than to push your website up the search results index.

Use headlines with the keywords that describe your business and services. For example, if you provide a car repair service, give each type of service you provide a section of its own, e.g. roadside repairs, vehicle recovery, and MOTs. The title and alt tags on images help as much with SEO as with accessibility. Insert your keywords into these tags to increase your keyword density.

A call to action button should be included in any commercial site to encourage the viewer to do what you want, e.g. sign up for a newsletter or purchase a product.

What about SEO?

Viewers need to see striking images and eye-catching headlines that make them answer "yes" or "no" to whether or not they want your products and services. Black hat SEO techniques involving hiding keyword-rich text is frowned upon and can actually get you banned from the Google search results.

How it works

Website visitors want to be able to tell at a glance what the website is about and whether or not their demands and needs can be met there. The more concise the information is, the more likely it is that they will click the links to the other pages. Calls to action should be clear so the viewers understand what awaits them when they click the link.

2. Keep it simple

Don't use more than two colours in a colour palette and don't crowd content. Avoid flashing images and garish colours as these can strain the eye and in some cases cause seizures. Black text on a white background is ideal. If you prefer to use another colour for your text or background, ensure there is sufficient contrast to make it legible. Fonts should be clear and clean — Arial or Times New Roman are ideal as they can be read from a distance. Font-size should be no smaller than 10px.

How do you catch people's eye?

Use a slideshow, but only once, and no more than four or five pictures. Coloured text or fancy fonts should be used sparingly. Avoid stock photos; images should ideally be of the work you do or the goods or services provided. Videos should not loop or play automatically.

How it works

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

3. Bite-sized bits

When describing your services, keep the headlines short and your descriptions concise. The idea is to give your viewers a good idea of what you do at a glance.

What about the rest of the information?

You can link to other pages with more information on if required. People usually see the Home page first. On the other pages, keep the content short, sweet, and to the point, using images or videos where possible to explain how things work. 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 their attention with the first four words you haven't got it at all. Using a link to further information from the Home page enables people who want in-depth detail to access it while the skimmers get an idea of what you do and either stay or move on.

4. Clear clean layout

That picture above shows a three-column layout, which I like because it makes the page look balanced. I use a grid system to make sure there's plenty of space between text areas so viewers find it easy to tell where one section ends and another begins. Never use tables for layout. They can slow page loading time and distort on smaller screens instead of sliding under one another.

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. 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 often 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 script to fix this, don't build your site with it and expect to get mobile users to stay. Use a mobile-friendly template or make a folder on your hosting account with mobile-friendly web pages on it.

What about responsive design?

You don't have to make a separate folder 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.

How it works

In a responsive site, the div blocks flow over each other and either grow or shrink to fit the screen. Images are usually served at different sizes to accommodate a range of screen sizes.

Your landing page is your shop front. The better it looks, the more successful it will be.