With so many different resolutions (800×600, 1024×768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, Mobile ,etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations.

To design a page that looks good with most configurations, let’s start by defining our main objective:  we must never force a user to scroll horizontally.  In other words, our page must always fit within the available screen width.  This would suggest that we have to design our page for the lowest common denominator.

So let’s look at the stats

Ready for our next decision

Should we design a fixed-width page, or should we specify the width of our page in percentage terms?

There are pros and cons for both.  The main advantage of a fixed-width page is that the layout will always remain as you intended, even when viewed at higher resolutions.  The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will instead see large, unused blocks of space around your page.

The advantage of establishing our page width in percentage terms, as 100%, is that the page will adjust itself to the resolution of the screen.  This is called a “liquid page design”.  The main benefit of this method is that all the available screen real estate will be utilized.  The disadvantage is that the layout of your page will change, and users may find it uncomfortable to read the extremely wide sentences that will result when higher resolutions are used.

If you decide optimize your page for 1024×768, and then decide to follow the fixed-width page method, you must take into account that not all the 1024 pixels will be available (some of them will be used by the browser to display the scrollbar and other “browser chrome”).  To accommodate most browsers and platforms, specify your page width at a maximum of 960 pixels.

If you decide to specify your page at 100% width, you won’t have that problem, since it will adjust automatically to the available width.  Just make sure that your page looks best at 1024×768, and that the layout doesn’t change much when you view your page at 1280×1024.

I believe some people create and publish websites for the sole purpose of tormenting their visitors. Browsing various websites and navigating the Web can often be like trying to read on an airplane while a kid kicks the back of your seat and the baby next to you alternates between screaming, crying and drooling on you. There are some excellent websites out there to be sure, but there are also a lot of dreadful ones too. The latter are the bane of so many people’s existence, especially those who use the Web regularly.

The Net continues to grow in popularity and importance for consumers and businesses alike. Therefore, the quality of sites needs to keep pace. Creating and maintaining high-quality websites is more important now than ever. Higher quality equals more revenue.

The following lists the top ten ways that a Web site misses the boat and contributes to hair loss and nervous breakdowns. Notice the common thread that runs throughout each of these. Namely, a bad Web site neglects to consider the site visitor’s experience in some fundamental ways.

1. Animation

Seven year-olds like watching animated cartoons on Saturday morning, business people, professionals and most other adults don’t. Sites that include showy Flash animations as an ‘Intro’, animated gifs on every page, or flying words are really annoying. They take away from the content and distract the visitor from achieving their goals. Unless your site is an entertainment site, try to avoid maddening motion. However,if your product or service can be better demonstrated using Flash, Quick Time, or other multimedia, which is common, offer your visitors the chance to click a link to view it. But don’t force them.

2. Too Much Scrolling

Once I scroll down a full screen’s worth, my eyes start to blur, I feel slightly lost, my head spins and my interest wanes. Computer monitors really aren’t the best medium for reading. The Net and many sites are so big that it’s important to always provide a clear frame of reference for your visitors at all times while they’re on your site. If a page requires two full screens of scrolling or more, simply split it up into multiple pages. (this page really is too long)

3. Long, Text-Heavy and Blocky Paragraphs of Unbroken Text

I really have to be into a topic or desperately need to glean the information to trudge through big chunks of unbroken text online. If I’m just shopping around for a product or service, you’ve lost me if I have to endure this kind of torture. Again, it is harder to read text on the Web than in other mediums such as books. Additionally, Web users are notoriously impatient, so make your content easy to read and non-intimidating. Use titles, sub-titles, small paragraphs, bullets and numbering.

4. No Obvious Ways to Contact the Company

If all you supply is an email on your Web site, your legitimacy may be questioned. Why can’t you answer the phone? Why hide behind an anonymous and cold email address? Make it easy for your existing and potential customers to talk with you.

5. Unchanging or Out-Dated Content

If I start reading content on a site and soon discover that the content was written three years ago, I split. Since there’s so much information out there, my reasoning is there’s got to be comparable information online that’s more current. If you keep your content fresh your site will attract repeat visitors. And repeat visitors are more likely to turn into customers.

6. Long Page Downloads

It’s amazing that this is still a problem. When I click on to a site and have to sit there waiting for it to appear in my browser, I start sweating, picking my teeth, tapping my toes, rolling my eyes and soon want to throw my computer through my office window. I’m obviously a little impatient, but again, I know there are other sites out there with the same information that will download more quickly, so why wait? I’m gone.

7. “Me, me, me!” instead of “You, you, you”

Generally speaking, no one cares about you, your company or your thoughts. What they do care about is what you can do for them. So sites that show pictures of the company building or tout their deep philosophy on the way business should be conducted really don’t bode well for keeping the interest of site visitors. On the other hand, sites that speak directly to potential customers about how they can solve their problems, make their lives easier, safer, richer or more comfortable have a much better chance of keeping the eyeballs glued.

8. Non-Explanatory Buttons or Links

Here are some examples of buttons that leave me dazed and confused: A wedding site with a button called ‘Blanks’, a boating site with a button named ‘The Lighthouse’, a book site with a button called ‘The Inside Story’, or a Web design site with a button called ‘Tea Time’. They sound like Jeopardy categories. Imagine trying to find your way on a highway where its various signs read ‘Over Here’, ‘Moon Beams’, and ‘Lollypops’. Good luck navigating your way through. It’s the same with navigating websites.

Button and link names need to tell the visitor where the link leads to. Make it as easy as possible for a visitor to know where they’re going before they click. However, there are times when naming a link an ambiguous name may pique the curiosity of a user and get them to click on it. But as a general rule, keep your links and buttons as descriptive as possible.

9. Inconsistent Navigation

Imagine sitting down at a restaurant and the waiter comes over to you and hands you five different menus, one for the appetizers, one for the soups and salads, one for the entrees,one for the desserts, and one for the drinks. Annoying. Now imagine if each menu had a different format, layout and method for listing the items. Brutal. I really don’t want to work that hard at picking out my dinner, I’m hungry and I just want a meal. Don’t make your visitors work hard either by expecting them to re-learn your navigation system each time they enter another section of your site. They too are hungry; for useful information and they’re even more impatient.

10. Inconsistent Look & Feel

When the look & feel completely changes from one page to another in a Web site, I think I am visiting another site, another company, a partner or subsidiary. I get very confused. This screams poor planning and often results from tacking on new sections later after the original site was built. This can lead to design-drift. It may be tempting to stray from the original design; you may have a better design now. But wait till you do a complete next-generation re-design of the entire site before introducing a new look & feel. If not, lots of visitors will be scratching their heads with one hand and possibly clicking away with the other.

Finally, any site that employs a number of these notorious features is particularly painful to experience. When I click to a Web site that has five different fonts and colors, scrolls down to the core of the Earth, incorporates zinging words and big fat blocks of text, lists no phone number and has content written and dated in 1996, I scream and know deep down inside that pulling my fingernails out wouldn’t be as torturous as having to remain there a minute longer.

I’ve noticed a disturbing trend in Web design over the last couple of years. Web pages—especially home pages—are getting bigger as designers pack increasing quantities of information into each page.

Previously, a home page might contain a logo and tag line, an attractive graphic, some site navigation buttons, and a welcome message. Now, it’s common to see all of that and much more, including:

• Headlines and text for multiple news items
• Separate headers and quick links for several site features
• An assortment of graphics for promotions and advertisements
• Logos for various affiliates, memberships, and awards
• Copyright notices and other legal disclaimers

This barrage of information can be overwhelming for site visitors, which often leads to them having a hard time finding what they’re looking for among all the distractions.

Design for users

There are several contributing factors for this trend. One factor is designers who work on large, high-resolution monitors and don’t adequately test their designs on smaller monitors at lower-resolution settings.

Viewing a large Web page on a large monitor enables viewers (i.e., designers and visitors alike) to see most, if not all, the various page elements. Seeing the relationship between those elements is what enables the visitor to understand their logical organization. Visitors use that understanding of the page organization to find what they want.

When visitors view a large Web page on small monitors or in small browser windows, they can see only a few of the page elements at any one time. They can’t observe the relationship between various page elements unless they build a mental picture of the entire Web page by scrolling around and observing the component parts. Many Web site visitors don’t have the required visualization skills for this mental exercise, and many others aren’t willing to invest the time and effort. The result is that a large portion of the site visitors have difficulty understanding the organization of large Web pages and finding what they want on those pages.

The simple solution is for designers to tailor their designs to the screen resolutions and browser window sizes that site visitors actually use. Fortunately, we’re no longer restricted to 640 x 480 resolution. A 15-in. monitor running at 800 x 600 resolution is a more practical minimum configuration, and many current computers come with 17-in. monitors and default to 1024 x 768 resolution. Still, that’s substantially less viewable area than a typical designer’s system, which might include a 19- or 21-in. monitor operating at 1280 x 1024 or higher. If you design Web pages that need that much screen real estate to look their best, then your site visitors with smaller monitors will have trouble using those pages.

Usability Improvements

Oddly enough, I think part of the blame for the usability problems of large, cluttered Web pages is an overzealous effort to improve usability.

Many designers are reacting to complaints about the excessive number of clicks required to reach specific pages. They’re also hearing criticism of pages that are devoid of content and simply present a series of links, which makes them function like full-page menus. Designers respond by flattening the navigation structure of their Web sites and using fewer, but larger, pages.

To reduce the number of clicks necessary to reach certain content, designers often place quick links to that content on the site’s home page. Visitors can click a single link instead of drilling down through the navigation tree. It’s a good idea–provided the quick link is easy for the visitor to find and identify. However, it’s counterproductive if the number of quick links and other elements competing for visitors’ attention create a visual clutter that makes it hard for visitors to pick out the item they want.

The ultimate in click reduction is zero-click content—news items and other content that are on the home page rather than being on separate pages that visitors access via navigation links. This is another good idea that can help ensure that as many visitors as possible can see important content. However, it’s easy to place too much content on a single page—especially a site’s home page. If visitors must scroll around a page to see all the content, they aren’t really saving any time or effort. In fact, scrolling is often less efficient than linked pages because well-constructed links provide a description of the linked content, whereas the only way to find out what is hiding beyond the edge of the browser window is to scroll over for a look.

Adding quick links and text content to a site’s home page can help improve usability by increasing information density and making content accessible with fewer clicks. This is good up to a point, but if designers take it too far, these same tools can push the page design from clean to cluttered and create overly large pages that won’t fit in typical browser windows. Perhaps it’s time to return some sanity (and some much-needed white space) to the more cluttered Web site designs. The result will be Web pages that are both more attractive and easier to use.

Article by Michael Meadhra