The Basics Of Good Homepage Design.

The first page your visitors see is your most important page. Most often that is your Home Page, and it should invite people to come in and browse around, not send them back to Google.

Does your home page invite people to come in and look around, or does it make them want to take their business somewhere else?

(I should note that the purpose of this article is to helping those who are dispensing information or are focused on making sales... not running personal websites or blogs.)

The most important thing to keep in mind when you are designing a home page is that not everybody has a broadband internet connection, all the latest software & plug-ins, dual-core processors, two gigs of RAM and a 21-inch monitor showing 16 million colors.

Hell, I work here and I don't even have all that.

The point is, we need to design for the lowest common denominator to make the best of the situation. That's the only way we can serve the majority of our visitors.

Here, then, are my tips for making your home page more inviting and usable for the most people:

  1. Be the Hare, not the Turtle.

All of your pages should load fast, but the home page should load fastest of all. As a rule, fifteen seconds or less on a 56k connection. (Some experts recommend a maximum of 8 seconds) Much more and too many people won't wait, they'll just click away and all the work you put in to get them there is wasted.

Check your load time with these free online tools: netmechanic.com and websiteoptimization.com, they will give you an idea of what your visitors are experiencing.

Basic tips to improve your home page load time:
  * Use an external CSS for formatting
  * Use small, optimized images
  * Repeat images whenever possible
  * Always use the Height and Width tags
  * Avoid nested tables
  * Avoid full-page tables
  * Remove everything else that you don't need

  2. Design For Compatibility

Your visitors are using a wide range of operating systems, different browsers, different screen resolutions, and a variety of plug-ins. Testing your design on all of the possible setups and combinations is virtually impossible.

That does not mean that you can ignore the differences. You should have at least the top 4 browsers installed so you can test your designs with them as you go, before anything gets uploaded. The most used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.

After your design is online, there are some free tools that can help you see how it works on different systems. Start with the code validators at validator.w3.org.

Then see how your design looks with browsershots.org. You can test older browsers with the backward-compatibility viewer at delorie.com and the site viewer at anybrowser.com.

Basic tips to improve design compatibility:
  * Don't use CSS for layout
  * Avoid Flash
  * Don't use WYSIWYG editors
  * Validate your code
  * Use a variable-width design

If a web page is completely cross-browser and cross-system compatible, it will look more or less the same for all of your visitors.

Those are the two "Biggies". If your home page loads fast and looks good to 99 percent of your visitors, more of them will stay and browse around, and you are already well ahead of many of your competitors.

  3. Other Important Tips

The following design convention tips will help you keep more of your visitors on-site longer, and convert more of them into customers.

Give them an easy to find site-search function. There is no need to "Label" your search box: the empty field and a button that says 'Search' is all it takes.

Give them previews and basic good navigation. The three things your visitors need to know are: 'Where am I?', 'Where have I been?' and 'Where can I go now?'... for the home page, that means you should be providing a preview of your service or product, with text links to encourage exploration.

Once they start to browse around:
* Use headers or breadcrumb links to show the current page.
* Use color to distinguish between visited and unvisited links.
* Provide logical, consistent navigation.

Use images to show real content, not for decoration. Few visitors will believe that the smiling people on your homepage are actual happy customers, it's usually better to show a product if possible.

Don't use a splash page unless you need to send visitors to different website versions. (High or low bandwidth, different languages, etc.)

Don't send them away with links that go off-site. Text ads and link exchanges on your home page often help others far more than they help you.

  Wrapping Up....

When a visitor first scans your home page, this is what they need to see:
* Company Identity (Logo & Headline)
* Tag line explicitly summarizing the benefits.
* What you offer that is of value to them.
* How your product/service is different.
* How to dig deeper to find specific items.
* Special offers, promotions and more benefits.

Everything on your home page contributes to the visitor's first impression, and you need to make a good one. Your overall design, the colors, the layout and any images you use should all contribute favorably to the impression you want to make.

To see test and survey results about how people see and use home pages, visit Eyetrack III... it's a a little old, but still valid and a real eye-opener.

If your home page sucks, your other pages will never be seen... so pay attention: the last thing you want is to have your website featured on webpagesthatsuck.com.

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

---

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to