Designing For the Web

It’s Like Print, Only Different

• Have you ever priced 4 color printing? - Color is free on the web.
• Have you ever found a typo in your phone number after having 10,000 copies of a mailer printed? — You can fix it immediately at no cost on the web.
• Is the cost of mailing your monthly newsletter bigger than your rent? — Distribution is much cheaper on the web.

In short, the web offers the potential for enormous cost savings in advertising, sales and customer service compared to print. It can also include features, like movies and sound, that are impossible in print.

Putting those advantages to work for you, however, requires a design that makes it easy for visitors to quickly find the information that they need to make buying decisions. The key design elements that go into developing an effective web site are described below. Some, like the choice of fonts, are similar to the kind of decisions that you may already make in designing printed material. In some cases, like the use of color, the costs will be very different — usually much lower — on the web versus print. Many factors, however, are unique to the web and must be included in the overall design of your site.

Establishing Your On-line Identity

Overall Design and Layout

Getting Around Your Site

Text and Fonts

Color is Free — But Use it Wisely!

Graphics and Pictures

Multimedia — Adding Sounds and Movies

Establishing Your On-line Identity

Thousands of new sites are added to the web every day — how will your site stand out from the crowd? You probably do not have a budget large enough for a site that is so innovative that people will come just to see the really cool Flash movie or 3-D world that you’ve created (Even if you did, those sites attract mostly tourists, not customers).

There are several things that you can do to create a unique identity that do not add to the cost of your site:

• Pick a domain name (the something.com that people enter to go to your site) that identifies you. It could be "joeshardware.com", or "bills-sushi-on-main.com", or "theyellowhouseofblues.com".
• If you have a logo or other unique identifier, use it on you site. People that already know you will recognize that it’s your site and new visitors will remember it when they come back later.
• The most important thing that can differentiate your site from the rest is a clean and simple design that provides easy access to the information that visitors are looking for.

▲ Return to Top

Overall Design and Layout

The title of one of the most popular books on web site design sums it up nicely: "Don’t Make Me Think." People have short attention spans and very little patience when they visit a web site, especially for the first time.

• They want to find useful information on every page, with clear directions showing where to go for more.
• They want to be able to make choices about where they go and in what order.
• They want to know what they need to do at every step, especially when the site asks them to do something, like fill out a form.
• They don’t want to get lost or be led down a path with no easy way to get back to where they started.
• They want to be able to jump from one place to another, not re-trace their steps one-at-a-time.
• They don’t want to wait forever (more than about 10 seconds) for a new page to appear once they’ve made a choice.

In other words, entering your web site should be a lot like walking into a store: the aisles should be logically arranged and clearly marked, the shelves stocked with products they want, and they should feel welcome to be there.

▲ Return to Top

Getting Around Your Site

Print media is mostly linear. You read brochures and books from front to back (at least if they are written in English or European languages). Newspaper articles generally run from the top to the bottom of a page, perhaps with a clearly marked jump to a second page if it’s a long story.

The web is different — it is non-linear. That is, users can move from page to page in whatever order they choose (you could design a site that restricted them to a single order, but that would frustrate most of your visitors - see Overall Design and Layout). The ability to make those leaps from one place to another is what makes the web a web.

You decide how users will be able to move around you site by creating the links between pages. On a small site, every page might have links to every other page, making navigation easy. Laying out navigation for larger sites requires more care. There are three basic designs that you can use:

Large sites will probably combine all three designs: hierarchical at the top, with networks, hierarchies and linear links at lower levels, depending upon how you want the user to move. For example, while you would not use linear links where you want the user to explore your site, they are appropriate where the user is filling out pages in an order form.

The important thing is to understand and plan how you want the user to move about in your site and develop a design that accommodates that plan.

▲ Return to Top

Text and Fonts

Anyone who has used a computer to prepare a flyer or a brochure is used to having dozens of creative fonts, in any size that you might want, to chose from. You have absolute control — from size and spacing, to position on the page - over how they will be displayed on the page.

Preparing text for the web is different in a couple of very important ways. First, you no longer have complete control over how the page will be displayed on the visitor’s screen. This is because each web browser program, even different versions of the same program, will display pages slightly differently. Also, the user has choices that they can make regarding size and font that will be used to display text. The size of their screen and resolution of the "window" in which they view your page will also have an affect on how the text is displayed.

The second difference is the limited number of fonts that can be used to display text. The web is designed to be used by people anywhere, using any kind of computer. In order to achieve that universal access, the developers of the web and the browsers that are used to view it, limited the basic set of fonts that would be supported everywhere to two basic styles:

Serif: Times New Roman, Times, Georgia and generic serif

Sans-serif: Arial, Helvetica, Geneva, Verdana, and generic sans-serif

If you use a font that is not supported, and is not on the user’s computer, then the page will be displayed using the browser’s default font. This can really affect how your page looks, so the best thing is to stick with the list of supported fonts for all of your text.

But, you say, you’ve seen plenty of web sites that use fancy fonts — how do they get around this problem? It’s simple — they create graphics using whatever fonts they choose and place them on their pages like pictures. That’s why you mostly see non-standard fonts used for things like headings, buttons, captions on pictures, etc. The body of the text will almost always be one of the standard fonts.

If you really like a particular font, couldn’t you just make the whole page a graphic? Sure, but there are a number of downsides to that:

• Graphics take a lot more file space than text and take can much longer to be displayed — more information about graphics.
• Graphic images have a fixed size — they can’t expand or contract to fit in the browser window.
• The quality of the graphic text may not be as crisp or clear as text that is displayed by the browser using a standard font.
• The large search engines, like Google and Yahoo, cannot read text that is in a graphic image. As a result, they may not show your site when users enter search terms that include words that your site uses (see our section on promoting your site for more information on search engines).

Serif or Sans-serif — Which to Choose?

When it comes to picking between the standard fonts, a general rule of thumb is to use serif styles for the body of your text: it makes it easier for your eye to follow lines of text across the page. It does look more formal, though, so you might want to use a sans-serif font if the overall design of your site is casual or modern. You might compensate by making the text a little larger.

Sans-serif fonts, with their clean, simple shape, tend to be more legible than serif fonts when used for short blocks of type. This means that they work well for headings and other places where you want to get an idea across very quickly. They are also commonly used for captions on buttons or navigation bars.

▲ Return to Top

Color is Free — But Use it Wisely!

Adding even a second color to a printed brochure is outside of the budget for many businesses. With the web you can have all of the colors you want at no extra cost.

But, like free ice cream, it’s easy to overindulge in free color if you are not careful. Here are some things to keep in mind:

• Be sure that a colored background doesn’t make it hard to read your message.

• Select colors that complement and reinforce the purpose or theme of your site:

• Don’t use too many colors, or use different colors on every page of your site; use color to create continuity and a consistent theme.
• Some colors look better than others on the web; stick with those that are "web-safe."

▲ Return to Top

Graphics — Giving Your Site A Personality

Back in the ancient times of the internet, in the early 1990s, the web was all text. As more people became aware of it and found more uses for it outside of the lab, the demand for more visually interesting sites began to grow. Now it would be hard to imagine the web without pictures.

Graphics are the spice that add flavor and a unique look to your site. Graphics can include fancy fonts, patterns and textures, sketches, drawings, logos, photographs, or other non-moving images (we discuss media - graphics that move or change, and sound - in the next section). You can use graphics as decoration, for buttons and links, as backgrounds, or as an integral part of your message.

Using Graphics on Your Site

However they are used, graphics can have a big impact on the success your site. Obviously, you want people to think that your site is attractive — it has to create a positive image and make people want to do business with you. The right pictures can go a long way in creating that image. To make the most of your graphics, remember the following:

• Any graphics more complicated than customized text or basic shapes should be professionally done.
• Photographs should be well composed, with proper lighting; they shouldn’t look like birthday party snapshots.
• Consider using stock graphics; there are many sources for free or low-cost graphics and photos on the web or on CD-ROM.
• Do not make copies of copyrighted photos or graphics from other web sites; other sites are a great source of ideas, but leave the material that they paid for there (the same goes for text, by the way).
• A picture may be worth a 1,000 words, but too many pictures can become a mob all talking at once.
• The era of spinning logos and other distracting "clever" images is over!

Graphic Files — Don’t Make Me Wait Forever

The biggest problem with graphics, and the one that is guaranteed to drive people from your site, is making them wait too long for a page to load. A person on a 56K dial-up connection will download the data needed to display your page at an average rate of about 4 kilobytes per second. By comparison, a simple graphic file might be 6 kilobytes, while a small photo is 10 or more kilobytes (see examples of different kinds of graphic files). So, every graphic adds at least 1 or 2 seconds to the time required to display the page the first time. The good news is that browsers save the files and can load them much faster the next time the page is visited, but only if the person waited around long enough the first time to actually see the page.

Rule of thumb: keep pages small enough to load in less than 10 seconds on a dial-up connection. This means that a page should be no more than about 50 kilobytes, including the text, graphics and other related information. Of course, if you know that most of your users have high-speed connections, then you can ignore this limit.

In some cases it might not be possible to stay inside that limit; you might have a page with product photographs, for example. In that case, consider breaking the page into several pages with fewer images on each. You might also use small "thumbnail" images that link to separate pages with larger versions of the same image. At least only make the user wait when the is reason is clear; they will be more patient waiting for a catalogue page with products that they have selected to load than for a page that said "About Us" and winds up having a dozen photos of your store. This is especially true for your home page; new visitors are not likely to wait very long.

▲ Return to Top

Multimedia — Adding Sounds and Movies to Your Site

Media Choices

There are three basic media types that can be included in a web site design:

• Sound, which include sound effects added to other elements of your site (a button "click"), music, and vocal tracks
• Video, which may or may not include a sound track
• Animated graphics, the most popular form of which are Flash "movies." These have the advantage of being much more compact (ie, small file size) than other media types, and they can include pictures, sounds, text, and animations.

If you want to include media elements as a part of your site, consider the following to minimize problems with lengthy download times or potential distractions:

• Keep animated elements small and limited to one or two pages. For example, a short Flash animation describing your major products that runs the first time a visitor comes to your home page can be quite effective.
• If you include background music or a large introductory Flash movie when visitors first enter your site be sure to give them the option to turn it off or skip past it.
• Don’t make large video clips play automatically when a visitor enters a page; provide a thumbnail picture or other style link to the clip. Also, be sure to show the size of the file so that users can decide if they want to wait for the clip to download before clicking on the link.

▲ Return to Top