Flexible design

Give control back to the users.

It is impossible to know exactly how users will experience your site. Each user has a unique set of equipment, preferences, and habits for web browsing. Here are a few variables:

• Hardware: Different monitors have different resolutions, screen sizes, and color settings. While some users enjoy speedy DSL connections, others use slow modems.

• Software: Some users have the latest version of Internet Explorer, while others are still using an older version of Netscape Navigator. Operating systems vary, as well; while most users have some flavor of Windows, others use Linux or the Mac operating system.

• Personal preferences: Some users surf with JavaScript turned off, perhaps because of security concerns or simply to avoid those annoying popup windows. Some users will have their browser text display set to "large," while others prefer "medium." Some people don't even see your site at all -- users who are visually impaired use screen readers (devices that read web pages aloud) to browse the web.

This presents a huge challenge to web designers. How do you create a site that will be accessible and usable to as many users as possible? First, give up some of the control. A traditional graphic designer using print media can control what information looks like when it reaches the audience, and the audience can't change it. A printed brochure will look the same everywhere. A website, however, will look different depending on the user's equipment and preferences. Web designers therefore have to abandon some of the traditional design ideas about precise layout and content presentation. Instead, aim for a design that is attractive but flexible. Simplicity helps. Here are a few other things to consider:

Load time

As users become more familiar with the web they also become more and more impatient. People view the web primarily as a source of information, a gigantic encyclopedia at their disposal. Users are not terribly interested in your sexy design, and they certainly aren't interested in your pointless Flash intro or splash page. Users want information and answers, and they want them now. They do not want to wait for your site to load, no matter how neat it will be when it is loaded. After all, lots of other sites are just a click away. So, keep your pages small so they'll load quickly. A good goal to aim for is 50 KB or less per page -- that includes your HTML code, images, everything. Less than 50 KB is great. Most RKI-designed homepages are under 30 KB.

Scalable text

Text is crucial. It's your content, the reason users visited your site in the first place. To make sure your users can read it, be sure to use scalable text that users can resize. That way users who need larger text in order to read comfortably can increase the font size on your site. Also, any Mac user can tell you that text generally appears smaller on a Mac than on a PC. Finally, using absolute text sizes can create problems when users try to print out your web pages. For these reasons, make your text scalable and avoid absolute units like points and pixels.

Layout width

Typically, the smallest screen size is 640 x 480 pixels. Although 640 x 480 users are in the minority (5 - 10% of all users), they shouldn't be discounted. To make sure your site scales gracefully at 640 x 480, you can either use a table for layout with a fixed width of 600 pixels or so, or a percentage-width table that shrinks and expands to fit the screen size. Be sure to test your site at a variety of screen sizes. BrowserSizer is a useful utility that shows you how a page would appear on different screen sizes.

Web safe colors

There are 216 web safe colors that will appear as expected on almost any monitor. (A helpful palette of web safe colors is available at lynda.com.) If you use a color that a particular monitor doesn't support, it will try to approximate that color by "dithering," or creating a pattern that is a mix of other colors it can display. Dithering isn't that much of a problem with images -- they just won't appear as sharp as the original -- but dithered text can be very difficult to read. So, make sure that all of your website text and background colors are web safe. You can't go wrong with black text on a white background!

"Mystery Meat Navigation"

Vincent Flanders, creator of the great site Web Pages That Suck, coined the term "Mystery Meat Navigation" to describe the disturbing trend of using JavaScript rollovers to provide important navigation information. For example, a site might have a series of pictures for buttons, and in order to find out where each button goes you must roll over it with your mouse and study the new graphic that pops up. (For a local example, check out the Centre College Vice Presidential Debate site.) Some users surf with JavaScript turned off, so they won't be able to see your rollover explanations of what each icon means. Also, if the graphic that pops up contains text, it may be too small or low-contrast for some users to read comfortably. These important accessibility problems aside, Mystery Meat Navigation is a lousy technique because you're asking impatient web users to memorize an assortment of icons in order to browse your site. Not likely! For an excellent analysis of this problem from the originator of the term, visit Vincent Flanders' Mystery Meat Navigation page.

[ home | about us | our services | portfolio | web usability | contact us ]

A division of Roberts & Kay, Inc.