Seven Deadly Sins of Web Design

By Sharon Marek and Kenn Moffitt , Web Developers UNT Central Web Support

Web design sins are generally the product of inexperience. And as experienced sinners, we'd like to help you avoid these deadly mistakes - some that we've made, and others that we see every day.

Pride

Here's a Web design secret - not everyone on the Web will be viewing your Web pages with your cool computer system. The Web is composed of a diverse group of people, all of whom have different combinations of computer, operating system, platform and Web browser. The sin of pride in Web design is failing to consider how your design choices will affect your audience. 

• Netscape and Internet Explorer (IE) display Web pages differently (depending on the features that you have added to your page). It is important that you check your Web pages on both Netscape and IE for inconsistencies.

• Web pages can be interpreted differently by different versions of the same browser.  Netscape 4.0 has some features that won't work at all in Netscape 3.0. So it is good practice to check your Web pages in as many versions and browsers as possible.

• Web pages can look different on different computer platforms. For example, Macs show fonts two point sizes smaller than PCs with the same point size specified.

Also keep in mind that not everyone viewing your pages has the same physical advantages. Visually impaired individuals may be browsing your site with a text to speech reader. (A text to speech reader will read only the text on your page.) If you use mainly graphics on a page, the text to speech  reader has no text to read. Make sure that you represent all important images with an alternative text attribute. (You can generally configure alternative text in the image properties.) Alternative text makes your Web site more accessible not only to the visually impaired, but also to people with slow connections or older video cards.

Envy

There is a lot to envy on the Web - sites that have brand new interactive components, flashy visual technologies, incredible internal structure - envy is understandable. But using the new thing without understanding it is a very bad idea. It takes time and experience - expertise - to make new technologies effective and older technologies innovative.   

Finding information about new technologies on the Web is relatively easy. And step-by-step instructions for the most innovative use of older technologies are readily available. But there is a great difference between knowing what to do with a technology and knowing how to do it.

Understand before you implement.  Read about the new thing before you try to use it - and ask a lot of questions. Is there a standard? Will it work in all browsers? If not (and it's probably not) which ones will it work in? Are those the browsers that hit UNT most often? Is there a way to convey the information differently for older browsers? And please, don't forget the most important question: will it add value to my site? 

Find sites that use the innovative technique badly, and avoid their mistakes. Find sites that use the new technology well, and build on their success.

Gluttony

Graphic overindulgence on the Web is very common. The relative ease of use combined with the frequent lack of a design background in novice Web workers creates some interesting forms of self-expression.   Graphic design is indeed important to the Web. The Web as we know didn't "take off" in popularity until images were added. But there are a few rules to keep in mind when you are creating your page:

• Images add download time to a page. Use graphics wisely. This includes learning how to make images that download very quickly. You can check out builder.com for hints on tweaking your images for speed.  

• Animated .gifs are the plastic pink flamingos of the Web world -- decorations of questionable value.  An animated .gif does add motion to a page -- but is a rotating, flaming email icon really enhancing a page when the visitor has to sit through a longer download ?  How impressed is the reader seeing your whirling, pulsating "New" icon for the fifteenth time?

• Background and text colors can be changed on a page, but should not be changed without a good reason. The most legible combinations of text and background are high contrast - dark text on a light background or light text on a dark background. Red text on a green background is bad - the low contrast between the colors will make that page very difficult to read.  Black text on a white background is optimum.   

• Although the default link colors can be customized, remember that a good portion of the Web audience is new. Novice Web users understand that the blue underlined word is a link. Be very careful that your color changes don't confuse your Web site's navigation. Link colors must contrast strongly with the background color but should NEVER be the same color as the regular body text.

• Finally, a brief word about background images. The purpose of your site is to present information to your audience in an effective manner. Make sure that your background image doesn't make your text difficult to read. As  Creating Killer Web Sites (by David Seigel) says, "gift wrapping paper makes bad stationary".

Lust

Every day brings a new toy or technique to the Web. And everyone wants to be on the cutting edge of design -- to show the world just how tech savvy they are. However, you must avoid the temptation of  adding these new technologies for the sake of the technology alone. Techno-lust has been known to lead good Web designers astray.

For example, there is no need to use a scrolling Java applet to present a list of subjects on your site.  People with browsers that don't support Java can't see the list. People with browsers that do support Java won't necessarily see it, either. Java and other technologies such as Flash, DHTML, and RealAudio have limitations and do not work consistently for all browsers across the Web. 

These technologies were created to address specific needs -- to serve some specific purpose. A trendy new technology's existence doesn't make it appropriate for the task at hand. Always strive for a solution that will benefit the widest possible audience.

Your content should drive the technology that you use -- not the other way around.

Anger

Would you like to drive your readers to the sin of anger?  Then be sure to:

• Link to pages that don't exist -- those animated under construction .gifs are a fine substitute for the missing information!
  
  (Not Really! Avoid making your readers angry, and debut new pages or areas of your Web site when - not before - they exist. Draw attention to your new material, not the lack of it.)
  
• Ignore screen resolution issues! If you've got a 19" monitor running 1024 x 768, then design for that, because everyone else has one, too!
  
  (If you are unfamiliar with these terms, you can learn all about the the perils of screen resolution at Andy's Art Attack, a particularly good source of image information.)
  
• Don't provide any email contact information on your Web site. What could your readers possibly have to say to you?
  
  (You'll avoid compliments and complaints by not providing contact information. You'll also miss out on opportunities to help current and prospective students find the information they need. Read UNT's Web Publishing Guidelines for more information.)   

Greed

You'll see marvelous images on Web sites -- wonderful sound and animations -- and brilliant content.  You'll want it all for your site. We understand this greedy impulse. But copyright is as real on the Web as it is in print. And while it is easy to take graphics, sound, text and more from Web sites, it isn't right or legal without the permission of the copyright holder.

There are hundreds of Web sites that allow the use of their images in exchange for a link back to their site. If you use their images, follow through on your part of the deal, and link back to them. If you find an image that you can't live without, and are unsure of who owns the copyright for that image, send the site owner email. Ask permission to use the image, and keep the email that gives you permission. Realize that permission for a cartoon, a science fiction character or your favorite song is very hard to come by, and generally costs money.

If you really like what someone else has said or shown on their site, provide a link to that site! That gives the original artist credit, and keeps you out of the copyright business. If someone challenges your use of content that you did not create, apologize and remove the challenged content. (Read about why on Law and the Web at builder.com.) 

Sloth

It's been said that Web site creation and procreation have something in common -- that the act of creation is much more exciting than the care and feeding that inevitably follows. And while a Web site is less demanding than a child, failure to maintain a Web site is the deadliest of Web design sins - sloth.

UNT's Web Publishing Guidelines clearly state that you should only put on the Web what you can maintain. Inaccurate and out of date information reflect badly on the university as well as the individual responsible for the Web site.

A few other hints:

• Run a spell check on your Web site. If spell check is not available, invest in a dictionary. Incorrect spelling is particularly inappropriate on a university Web site.

• Check your links on a regular basis. Web sites move or reorganize frequently, and they're not likely to notify you of the change.

• Indicate the date each page was updated last. This freshness dating lets your readers know how often the page is updated while encouraging you to keep your Web site current.

• Read all about this in UNT's Web Publishing Guidelines!