Web Design Articles - Making Effective Web Sites & Designing

What is web publishing?

What are the goals of your site?

Is the goal to entertain, to provide information or graphics, or to provide some unique service? Or, perhaps, it's something other than this!

If it's for a business, are you trying to grab the attention of new customers, give information about products and services, do market research, or provide customer support? Do you also intend to highlight your after sales service?

How does the design and implementation of your web site support your goals?

For commercial sites

If your site is a commercial site, most of the surfers will go to your site with an intention to get information. They won't be there for "a total web experience," or to be entertained, or for the thrill of visiting a "Fabulous web site."

They'll want to know things like:

"What options are available and what do they cost?"

"What are the features of your products and services?"

"How can I contact your company?"

"Where and how can I buy your products?"

"Do you have a range of products or services?"

A commercial web site is a significant link of your company and, in some cases; it will be the prime option in which your customers and others interact with you in the future.

During the infant stage of the web many companies wanted to "just have a web presence" so they turned to graphics, advertising agencies, and the new generation of web design firms. Although these firms had a good background in graphic arts, most of them were quite novice in the ball game of creating web sites. They over-emphasized the graphics aspect and tried to entertain in the same way as print ads or TV commercials.

However, an effective web site needs a lot more than this. It should start with a requirements definition that evaluates the real needs of the company and how they can best be served through the web. This should be followed by a careful design and planning stage. The next phase is to build and test the site.

But the pitfall here is that a web site needs continuous updating and maintenance to sustain and stay in tune with the times. A lot of sites are designed in a way that failed to adhere to these aspects. You also have to consider the operations aspects of the site, such as guaranteeing response time and availability.

If you plan to build a web site that really makes sense, you should consider engaging the services of a systems architect before you contact the graphics companies or hire those Java programmers. An architect will plan your site as a system designed to meet your corporate goals, rather than just a bunch of interconnected HTML pages.

Make your site easy to navigate

Give serious thoughts to the roadmap of your site and how its different elements are linked. How is this navigational information conveyed to the user?

Could someone, after visiting your site, draw a simple diagram showing how the different elements are connected and how you get from one place to another?

If someone comes to your site looking for a specific piece of information, how easy is it to locate it?

How does a visitor figure out all of the things they can see or do at your site?

How does a visitor figure out how to navigate your particular site?

How can the visitor tell if they have seen everything?

How can a visitor tell what they have and have not seen?

Make it easy for a visitor to determine what is new and when things were changed.

A site that is difficult to navigate will also be difficult to maintain.

Complexity will limit the size of your site.

Complexity will make it difficult to test your site.

Some tips to generate repeat visitors to your site:

Make it large enough to require more than one visit to view the entire site. But make it easy to remember what the visitor has already seen by avoiding complex design.

Change your site often. But make it easy for the visitor to figure out what was changed, and when.

Make your site a source of reference material - a list, an index, a database. Perhaps allowing the user to search it for a particular topic or item.

Make your site an authentic and reliable source on a particular subject.

In the world of the web, every visitor is different

Remember that there are great variations in the computer platform, display setup, processor and disk speed, connection speed, and the particular browser software being used by each individual visitor to your web site. And the visitors themselves will be different, in every conceivable way.

Don't assume that every visitor to your site has the latest hardware and software, a super-speed connection to the Internet, and the eyesight and reflexes of an energetic young teenager!

There will be a great variation in how your site looks to different users if you rely on fancy HTML gimmicks.
There will be a great variation in how your site looks to different users even if you don't use fancy HTML gimmicks!

You have to decide whether the goal of your site is to impress those special few with your technical razzle-dazzle, or to make it a site for the enjoyment of masses.
Don't create a site that caters to the select few of the total visitors you are targeting.

As a result of heavy Internet traffic, web pages bloated with gratuitous graphics, older hardware or software, a fair number of folks are surfing the web with the graphics turned off in their browsers. What does your site look like without its graphics?

You are going to lose a lot of points if you mention Netscape (or Microsoft), in any way, on the first page that your visitors see. This includes describing your site as "Netscape-enhanced," telling your visitors that your site is only presentable if they have the latest version of Netscape, or pointing to a site where they can download the latest version of Netscape. Think of the message that it sends about you and your site. Think also of the first impression your web site leaves among the first time visitors.

How does your site look with Lynx? Try it and you'll see how your site looks with a text-only viewer. This may be the only viewer that a Unix user will have, especially in foreign countries. If your site is mainly informational, don't deny access to these potential visitors.

And you had better prepare yourself for the invasion of the surfers who will reach your site through add-ons to their TV set, cable box, or plug-in for their game playing machine. These new widgets will have limited capabilities, very much like the earlier versions of the more popular browsers.

The major online services have well over 10 million paying customers. Very soon, most of them will have web browsers, but they won't be the very, very latest version of Netscape. Your pages may look very strange to them.

The people with money to spend do not have time to fool with getting a SLIP or PPP connection running. And they don't have time to get and tune the latest version of Netscape (when they hear the word "upgrade," they most likely think of moving to the First Class section).

They will most likely be using browsers that are integrated into a full-featured online service that provides a single package with news, stock portfolio tracking, and a seamless interface to the Internet and the web.

The real point is that if you have a commercial web site, you can keep Netscape around for testing, but make sure it also works with whatever browser is provided by AOL, CompuServe, and Prodigy.

The user interface

When the Macintosh first came out, Apple published a set of user interface guidelines for software developers. Some developers felt that having to adhere to a standardized interface would hamper their creativity. But others realized that it would actually free them to spend more time applying their creativity to step up to the next level of application design.

Consider the signal-to-noise ratio of your interface. How much is useful and interesting, and how much is just noise? Avoid using large or unnecessary graphics that don't add to the content of the page.

Remember that browsers have a lot of user-configurable features -- colors, fonts, etc. These can really mess up your fancy interface.

Don't make the user confuse where to click.

Don't replace bullets and horizontal rules with images. It eats bandwidth and confuses the user. If you use images as bullets, your visitors may try clicking on them and wonder why nothing happens.

Be very careful in using graphic elements as controls (buttons, links, etc). The user has to guess what to do.

Try not to have two or more places to click that perform the same action.

Don't use the "underline" attribute for text. It makes it look like a clickable link.

Find out what your visitors do most often at your site and make that the easiest thing to do. If you're into intricate jewelry or gemstones embedded jewelry and most of your visitors are there to have a closer and sharper look at your samples, have a big button that says "Get a closer look." This is a good rule to follow when determining the size and placement of interface elements.

For some reason, most browsers switch to a grey background by default. The easiest way to fix this is to override the browser's default. Use a white background.
Don't forget that links show up in different colors than regular text, and may change color after a link is viewed. Consider how these links will show up against a colored background. (And remember that these colors will be different on different browsers and can also be changed by the user.)

You can use a shade of gray as a background if you are not displaying text against it. A lighter shade is advisable.
Keep the interface uniform. Have the same controls perform the same action everywhere.

Avoid putting too many interface elements on the same page. Some sites present the visitor with a bewildering array of image maps, buttons, text links, and images to click on. Don't use colored, textured, or graphic backgrounds unless absolutely necessary. They may look fine in your browser, but could end up looking quite different in someone else's browser, or on a computer with different video hardware, color depth, etc. They're distracting, and they really do make text illegible at times.
Another problem with backgrounds is that they are handled differently by different browsers. On some, your page is first displayed, and then, after some delay, the background suddenly shows up, like a layer of smog descending on the page. With other browsers, you sit and watch a blank page until the background has been downloaded.

Displaying images against anything but a plain background may cause them to be rendered incorrectly by the browser. And it may make it difficult for a visitor to view them. You must have noticed that in Art galleries the paintings are placed with a light background so that the picture comes out well in the eyes of the viewers. Don't blink anything unless it's to indicate an emergency such as a life hazard. It's distracting, and it is quite irritating for the surfer. Try to read something over here while something over there is blinking. It disturbs the attention of the viewer.

Don't use tricky (or undocumented) HTML to do dissolves or fades or other special effects. They look different on every machine. And after a while, they can get downright annoying. And they may stop working (or work strangely) on different browsers or on new releases of your current browser.

Don't have something that, when clicked on, takes the visitor back to the page they're already on. Disorienting. This is common on sites where every page has links to every page.

One way to get a precise block of type, such as a name and address, to appear correctly in every browser is to render the type in an art program, then save it as an image (GIF) file. If done properly, a name-and-address block, including email and web addresses, should be about 2K bytes. (But don't forget to include a text alternate.)

You can set large (headline) type, normally black, to a shade of gray. But not too light.

Don't change any of the type colors -- either for displayed text or for links. It only disorients the user.

In general, try and keep the user interface simple and uncluttered. Try and use default values whenever possible.

The little red light

Every web browser has one.

It's a little indicator that turns red when the browser starts to load a page. After all the items on the page have been downloaded successfully, the little red light turns off.

This is especially useful when the web is slow, or when the page is complex. It lets you know when you actually have everything. A very useful element of the browser's interface.

Unfortunately, there are a number of widgets (like animated images) that you can add to your page that keep the red light from working properly. The one most often encountered is the animated GIF.

With one of these widgets on your page the little red light never goes out. And, as a result, it looks like your page is still loading, even though it may actually have finished. Now the visitor has lost the use of part of the browser's interface, and has to guess whether the page is complete. Or perhaps wait for the rest of it. Or perhaps give up and move on.

Hint: If the little red light doesn't go out after your page has loaded, it's a sign that there's something on your page that will annoy people.

Use color wisely

Use color to convey information or to draw attention to where it's really needed.

The standard web interface uses this principle by displaying the hypertext links to other pages in colors that stand out from the rest of the text. In addition, different colors are used to show which links have been visited and which haven't.

So strong are these clues, that you can look at a web page and tell a lot about it without reading the text.

It's also a good reason for leaving the text and links in their default colors. Your visitors will have seen hundreds of pages with the text and links in their default colors and will take advantage of this conditioning by being able to navigate a new site without having to constantly relearn the interface.

It's obvious that if you change the color of the links on your site, or use an image map, much of the possible information will be lost to the visitor and your site will be more difficult to navigate.

Remember, also, that some of your visitors are color blind. At its worst, colors are varying shades of grey. Colored text against a colored background could show up as a grey smudge. Take this into account when you design your pages.

Other visitors, with less-than-perfect vision, may have trouble viewing images and text with strongly contrasting colors (like red text on a blue background). Don't make your page so that it can only be viewed by teenagers.

Image maps

Avoid putting image maps on your pages unless you have a really good reason for using them. Fancy image maps can be far more confusing than a well-formatted text list or a simple set of buttons.

In many cases, it's hard to tell just where to click. This is especially true if the map contains both images and words. And since the words are not underlined, it's hard to tell if they're links.

Image maps take up a lot of bandwidth and, in most cases, add nothing to your page.

If you use a large image map, your visitors may have to wait for well over a minute before they can begin to navigate your site.

Unlike regular text links, which change color after being clicked on, image maps give no clue about what's been seen and what hasn't. This makes it more difficult for the user to navigate your site.

Image maps limit you to a very simple site. It's difficult to include more than a few items in the map, especially if you are including both icons and text in the map.

The time and effort it takes to modify both the image and the map make the use of image maps a real maintenance headache. It will take far longer to update or change your site if it means modifying the image maps as well. This is especially true if you have used image maps on many of your pages.

If you use an image map, make sure that you include a text list with identical items for those who are confused by your map or are using a browser where images are not being loaded. Locate this alternative list as close to the image map as possible to avoid confusion. Make sure that the list contains all the items on the map, and that they are in the same order.

If your image map is a figure that depicts something real, like a map of the India, USA or Germany, don't presuppose that your visitors will be able to identify things (Which one is Hamburg or Scotland?) solely by their shape or location.

Also, make sure that your image map gives some sort of a warning if the visitor clicks in an area that doesn't relate to anything or isn't defined in the map's table. (What happens if the visitor clicks in the ocean, next to India?)

Your page's title

Don't forget to put a title on every one of your web pages. The title is what shows up at the top of the browser's window when a page is displayed. If your page doesn't have a title, the browser will display "Untitled," or "No Title,” or simply the URL of the page, or perhaps nothing.

The title is important. If someone bookmarks your page, the title is what shows up in their list of bookmarks. Or, if someone puts a link to your site on their page, they'll probably use your page title as the link text. Or, if the page is indexed by a search engine, the title is what shows up in the search results. You get the picture.

Even if you do have titles on your pages you still might want to reevaluate the actual wording. Make sure that the title actually says something. Instead of "My Web Page," how about: "Bud Spencer -- My Web page?" Imagine viewing the two of them in a bookmark list.

If you have a business site, you may want to go even further. For instance, you may want to put the name of your business (or an abbreviation) in the title of every page on your site. You never know which of your pages will be bookmarked, and it will be far easier to pick you out in a list of bookmarks, or any other list that uses the page's title.

And don't forget to tell people about yourself and your activities on the main page of your site. Don't make them guess. For example: "Splendid tours & travels is a travel house delivering domestic as well as international package tours to Europe and Far East”.

The width of the browser's window

Imagine you're an art director and you have to design an advertisement for a number of media vehicles like newspapers, magazines, tabloids etc. Now all these different media require different column sizes for your advertisement. Sounds crazy? How would you design such an ad?

Yet this is one of the biggest problems facing web page designers. The height of the browser's window has very little effect on how your page is displayed -- you just see more or less of it, sort of like a window shade. But as the width of the browser window changes, it can have a spectacular effect on how your page is displayed.

This is because the browser will try to rearrange the web page to make maximum use of the available browser width.

Two factors determine the width of the browser's window -- the width of the visitor's screen, which determines the maximum width for the browser, and the proportion of the screen that the browser has been set to.

The practical width of computer screens varies from about 640 to 1280 pixels. This is determined by hardware, software, and the display settings the user has chosen. Your web page should work properly with the browser window set >anywhere< within this range.

There are a number of different elements on your page, but they fall into two groups: those items that can be adjusted in width, and those that can't.

Items that can be adjusted in width are text (which can wrap) and tables and cells (if declared as a percentage of the window's width).

Items whose width is fixed are images, text given a "NOWRAP" attribute, text within PRE tags, and tables or cells declared as fixed (pixel) width.

Say you design your page for the middle of the browser range -- about 800 pixels wide. What happens when your page is viewed at other browser widths?

Let's start with a narrower window. If the page is designed with the right mix of fixed and variable elements, the page should still work. You might want to use a table with multiple columns where the leftmost is fixed width and the others variable width. If fixed-width elements are used, the page may end up wider than the browser and a horizontal scrollbar will appear at the bottom of the window. Now the visitor will have to scroll left and right to see your page.

If the window is wider than you designed for, a number of things can happen. If you've used an image as a background for your page, and it just fits your medium-sized window, it will repeat as the browser adds another copy to the right in order to fill out the increased width. Tables declared as variable width may be rendered strangely, with elements showing up in unexpected places.

In addition, the way a particular browser juggles your page to fit its width will vary greatly with different browsers. And also with different versions of the same browser.

Obviously, a certain amount of testing and experimentation will be necessary to make sure that your pages display properly at all browser width settings.

A Tip

Keep your home/main page small so that it loads quickly – say 10 seconds would be the ideal time. (Especially important when the web slows down.) This will hook the visitor. Think twice about putting that 90K GIF on your home page. Remember that yours is only one of millions of sites -- web surfers have short attention spans.

Images

Don't present high quality images such as art or photographs against a background that is textured or darker colored. Stick to white, a light shade of grey or, if you must use a colored background, use the lighter shades.
Don't use an image compression technique that isn't supported by all browsers. At the present time, GIF and JPEG formats are universally recognized.

A JPEG image may compress to a smaller file than a GIF, taking less time to download, but it may take longer to decompress and display, thus making your effort for naught. This is especially true on older, slower machines.

JPEG compression also imposes a loss of image quality, which may (depending on the settings in your image-conversion program, and your visitor's hardware) be quite noticeable. But JPEG compression will probably give the best results with photographs or other images with lots of colors or fine detail.

With drawings or line art work, the GIF can actually end up smaller than the JPEG. With line art, a GIF may appear sharper than a JPEG since there is no loss of quality in GIF format. However, GIF images can only show a limited range of colors, and may not be suitable for images such as color photographs.

The best option is to try both compression techniques for each of your images and see which gives the smallest file size, the best image quality, and the best performance in downloading and viewing.

And don't forget to design your pages so that they still are usable if a visitor has the image loading turned off. Use the "Alt" attribute to provide text alternatives for your images.

Interlaced GIFs

Don't use interlaced GIFs. These give the effect of the image being continuously redrawn at a higher and higher resolution. The files for these images are actually larger than for the equivalent GIF, and take more time to load.

The effect is annoying and it's hard to tell when the picture is actually ready to be viewed. It's especially annoying when used to render fine artwork. It's also annoying when the web is slow and the image sits half-rendered for a period of time. You may also find that the intermediate image resembles something very different from the actual image. It's just another special effect that will soon be boring.

Animated Images

Avoid using animated images on your page. They make the page load slower -- they use big files, slowing down the loading and viewing of the rest of the page. Your page might just sit there for a considerable time, totally blank, while the first animated image loads.

Because they have much larger file sizes than regular images, animated images eat away a lot more of the Internet's precious bandwidth. It adds in slowing down the web. Animated images cause the page to load improperly -- the little red light on the browser doesn't go out, so there's no way to tell if the page has finished loading. If the visitor clicks the 'Stop' button, it may turn out that the page hasn't fully loaded, so it has to be loaded again. They can also keep you from being able to scroll the page while it's loading.

They're distracting and annoying, making it harder for the visitor to concentrate on the other things on your page. (It is quite disturbing reading something over here while an animated mailbox is flipping opens and closes over there.)

And although it may look cute the first time you see one, after you've seen it repeatedly again and again, you feel like smashing the screen sometimes!
And if you switch to another application, the browser now sits in the background, chewing up processor cycles doing animation.

The animation runs at different speeds, depending on the visitor's hardware, and what else it's doing at the same time -- crawling on slower machines, and flickering between images on fast machines.

And lastly, a number of folks have reported browser crashes on leaving a page that had an animated image. When the browser crashes, it can mess up things like the browser's history list, tables of cached items, and your bookmarks file.

Standalone Images

The most common use of standalone images is on a page with a lot of little images where clicking on one of them loads a larger version. If you just link to the image file, it ends up in the upper left corner of the browser window, all by itself.

Use an HTML page to hold the image. This will let you center the picture and put in a page title and other information.

Text

If you're presenting text documents on your pages, give some thought to making them easy to read.

The viewing area of your browser is much smaller than a normal printed page, so you may have to reformat your documents to fit this new environment, rather than just dropping an existing document into your HTML editor.

Don't run text the full width of the screen. This creates long lines of text that are difficult to read. Text also needs air around it, to breathe. That's why most printed documents have margins.

You can easily solve these problems by using the "Block quote'' tag, which gives a margin on both sides of the page. You can nest Block quotes to vary the width as necessary.

You can use tables to create more complex text layouts such as columns.

You can use dictionary lists ('DL') as a simple way of formatting text that requires indentation.

Don't use long paragraphs of text. It's hard to read this in printed form and, for some reason, even harder on to read on a computer screen. Try to keep paragraphs to four sentences or less.

If you specify a text font other than the default, make sure that the font (or its equivalent) is one that is standard on your visitors' computers. And when specifying one of these fonts, don't forget to specify the equivalent font names for other operating systems and hardware platforms as well.

And try not to put links in your text, especially in the middle of a sentence or paragraph. If you have links that relate to your text, put them at the end, like footnotes. Give your visitors a chance to read your text before sending them somewhere else.

Tables