Number 1 Rule: Keep it simple

CW KISWhen it comes to websites (as with most things) there are best practices and rules.

The Number 1 Rule: Keep it simple.

Don't make the user think about anything! The key words to remember are "instant gratification." The Web is becoming faster and filled with more and more information every day. Users have the freedom to pick and choose whatever medium best suits their needs the fastest, and you can bet they will instinctively exercise that freedom at every opportunity. If your website doesn't immediately and effortlessly meet their expectations, they will click their Back button and get right out. This rule will be emphasized more a bit later, but always keep this in the back of your mind.

 

Know your HTML. This one may seem obvious at first glance, but there are too many people out there using WYSIWYG (what you see is what you get) editors and trying to pass themselves off as "web designers" without knowing any HTML. Don't get me wrong; I think WYSIWYG editors have their place among the consumer base, but they're simply not the right tool for a completely effective and successful Web design that will hold a visitor's interest and make your ideas worthwhile.

There are plenty of places online where you can get some basic HTML training, and of course you can always keep an eye on WPDFD for new ways to do things in HTML. If you don't know HTML and are serious about building an effective Web design, you can start by perusing the links below to get a handle on HTML.

    * W3Schools HTML Tutorial

    * PageTutor.com: HTML Tutorial

    * [Book] My Website is Better Than Yours

    * [Book] Amazon.com: HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) (Paperback)

Use "Web safe" fonts. There are hundreds of thousands of fonts nowadays, but only a small handful of them are considered "Web safe." Not every computer is going to have every font installed, so when you use a font on a Website that a visitor doesn't have, their web browser will default to a fallback font. The fallback will likely make your design look much uglier on the site and deter visitors if it's difficult to read.

You can find a list of Web-safe fonts here.

Stick with standard layouts. Naturally, as a designer, it's fun to get creative every now and then and come up with a site that doesn't follow conventions. Maybe your site is completely Flash-based and uses the keyboard's arrow keys for navigation, or maybe your site scrolls left and right instead of up and down. While these designs are creative and make a statement, they are not effective designs. This is because users, when they visit a website, expect a standard convention. Sites like these cannot be easily scanned or navigated, and it slows the browsing process. If the experience is jarring in any way, you're likely to lose a visitor.

Good, standard layouts can be found everywhere. Take a look at this very site, WPDFD. It's a two-column layout with top main navigation and a header/footer. It's simple and the focus is on the content. Your browsing experience isn't hindered in any way. Other sites with good, clean and usable designs include A List Apart, Simplebits, and artypapers. Oh, and of course, you can't forget Google and its host of utilities.

Try to keep images small. Not necessarily physically small, but small in file size. It's true that a majority of users are connecting with a broadband connection these days and page loading time is not nearly the concern it was back in 1998 when the majority of users were dialing up to the Internet with a telephone line. But bandwidth is still a concern for a Website, especially one that hopes to attract a lot of traffic. Primarily, bandwidth costs money. Secondly, if you keep your site's filesize as low as possible, your site will load up blazing fast on a broadband connection, and that still impresses users today.

On the same note, try to keep code clean. Using good coding techniques will keep your site's HTML small and easy to maintain, and again, it will conserve bandwidth and help your site load faster, which is what visitors want. If you used any of the links above in the "Know Your HTML" section, you'll learn how to code proper HTML. There are steps you can further take, though, and practices to avoid common pitfalls, that you can find in the following links.

    * Clean HTML Code - Cleaning Up HTML Coding

    * What Beautiful HTML Code Looks Like

    * Learn About HTML Validation

Avoid distracting elements on the page. Distracting elements, like animated gifs or Flash animations/advertisements with too much movement and action tend to distract a visitor. If your page is riddled with this kind of distraction, your content becomes more difficult to find, and even worse: it becomes more difficult to read when the visitor does find it. This is a good way to push your potential new visitor right out the door, and expect them never to come back. If you have a good reason to use an animated gif, use it, but keep it part of your content, not part of your layout. An animated gif of a weather radar in an article discussing precipitation patterns is fine, for example, because it furthers your content. An animated gif that spins in your sidebar that says "E-mail Me!" is a distraction, and just a decoration. Avoid decoration of this sort.

Advertisements are often flashy and animated. It's important to make money off of your Website, but try to keep a policy in place where advertisements must not be too flashy and they should remain as relative to your content as possible.

Users Don't Read, They Scan. An important concept that you'll want to keep at the forefront of your mind while building your Website is that the average Web user is looking for instant gratification. You need to keep things simple as your site is only one of hundreds of thousands out there and if your site doesn't meet visitors' expectations immediately after they see it, you'll lose them. Again, it's important to reiterate: keep it simple.

It would be ideal if every visitor read and analyzed every portion of a Web page, but they don't. Instead, they quickly scan your page for the following things:

    * The information they're looking for

    * The pictures they want to see (if any)

    * The place to click to get further on your site.

    * The way out, or the way back.

The first two things you see on the above list have to do with the user. Those are the "instant gratification" items. If they can't find these things immediately (a span of a second or two), they look for the next two, which deal with your design and the functionality of your site. If they can't quickly, effortlessly, and easily find all the places to click to get further on your site, they'll look for the last option: the way out. This is usually their browser's back button.

Eye-following studies have been done to determine where a user looks when browsing the Web. In the results of these studies, you can see that users follow an F-shaped pattern when scanning your page, and their attention is held very shortly on entire sections of the page that don't immediately suit their needs.

Because users are so easily deterred, it's important that you keep your design clean. It's possible to make a design that is good-looking and functional at the same time. The design should serve a purpose and never be fully decorative. Always remember: content is king! The content is why you created your site, and it's what the users are there to see. Make it as easy as possible to get to, and as easy as possible to read. To keep it easily-accessible, make sure your navigation is easy. If a user can't easily identify the ways to get around your site, the user won't be around long.

To be sure your navigation is easy to use, try to build a design that, at a glance for the user, can answer the following three questions:

  1. Where am I? (Present)
  2. Where can I go? (Future)
  3. Where have I been? (Past)

Your site should have indicators or some sort and links that answer all these questions without the user having to click their back button or read the page URL. A List Apart has a great article about navigation that is well worth your time to read.

Tags: website design, graphic design, process, website development, HTML, web safe, navigation, KIS