Siolon

Ten Greatest Web Design Taboos

Every web designer has a top 10 list of things that piss them off in web design. I helped teach a class on intro­duc­tory web design, and I con­structed the fol­low­ing list to hope­fully keep those stu­dents from mak­ing the same mis­takes I did.

1. Be cog­nizant of other view­ers and demographic.

When we design for the web, we must under­stand that the major­ity of the time your web­site will not look the same as you see it on your screen. Web design is a dif­fi­cult field, because the designer has some many con­straints in design­ing their sites. Here are a few con­sid­er­a­tions when you are designing:

1. Res­o­lu­tion
2. Screen size
3. Depth of color on screen
4. Poten­tial acces­si­bil­ity concerns
5. Dif­fer­ent browsers
6. Using dif­fer­ent client-side pro­gram­ming languages

2. Kill the Intro pages.

On the Inter­net, there are too many web design­ers who feel that an intro page adds a dimen­sion to their site, and it does—frustration! Most of the time they are done in Flash, have a large file size, and out of scheme with the rest of the site. It’s always best to have the user go straight to the con­tent, and that leads to our next point.

3. Infor­ma­tion should be con­veyed in five seconds.

This is a lib­eral esti­mate actu­ally. Think, What should my user learn about my site in five sec­onds? Think about your­self and the way you browse the Inter­net. If you come to a page and it takes a long time to down­load, if it’s hard to fig­ure out what the site is about, or if the site is sim­ply not clear you’re not going to stay to fig­ure it out. In five sec­onds, a user should know what your site is about and where they can get information.

4. Nav­i­ga­tion is clear, not a mystery.

Have you ever gone to a site where you can’t fig­ure out where the nav­i­ga­tion is at? Some peo­ple hid nav­i­ga­tion behind images and set up other nav­i­ga­tion hin­drances. Make sure that your nav­i­ga­tion is clear, able to be seen by the largest amount of view­ers, and is always acces­si­ble. Also, make sure they always have a way home.

5. Design for the global market.

A lot of really good sites, while good in con­cept, spend much time and effort in con­vey­ing a mood or theme through color or other culturally-specific means. While it is a pow­er­ful tool, there are things that make this a risky play. For instance, in the global mar­ket you might use a color that is of no offense to an Amer­i­can, but a Chi­nese browser might find it quite offen­sive. Be sure to always keep that demo­graphic in mind (see point #1).

6. No sep­a­ra­tion of pre­sen­ta­tion, behav­ior, and structure.

Many web design tools such as Dreamweaver, Front­Page, and GoLive, all design in a man­ner that does not sep­a­rate pre­sen­ta­tion and struc­ture in par­tic­u­lar. They will use the noto­ri­ous tag, or if they use CSS it will be inline styles. Make sure your HTML file con­tains tags that relate to struc­ture. Define the para­graphs, head­ings, lists, etc. Put your pre­sen­ta­tion, or the way the page looks, into an exter­nal CSS file to make updat­ing eas­ier. And strive to put behav­iors (JavaScript, DTHML, etc.) also in exter­nal files. Study XHTML to learn more of these topics.

7. Frames: always say no!

Frames are noto­ri­ous for being on bad design lists and for a rea­son. They often make nav­i­ga­tion, instead of clear, more com­pli­cated. It is hard to book­mark pages, and it breaks the Back but­ton. There is no rea­son to uti­lize frames in navigation.

8. Rely­ing on WYSIWYG editors.

WYSIWYG stands for What You See Is What You Get in other words when you design in Front­Page, the way it looks in the pro­gram is the way it will look on the web. This pro­gram, along with Dreamweaver and GoLive are two noto­ri­ous pro­grams for bad markup. Be sure to famil­iar­ize your­self with the code that is actu­ally being writ­ten. Always strive to less in design mode and more in the cod­ing mode.

9. No large images, and don’t put nec­es­sary con­tent into images.

Many get frus­trated that their con­tent looks dif­fer­ent from user to user so they go to putting con­tent into images. This is bad for sev­eral rea­sons. First, it adds to the load time of your web­page quite sig­nif­i­cantly; two, the con­tent can­not be read by search engines or screen read­ers; and three, often times the images will look dif­fer­ent any­way. Strive to put as much con­tent as pos­si­ble in pure text. It will alle­vi­ate many headaches.

10. Design ele­ments to stay away from.

Here are a few design ele­ments to stay away from. These either detract atten­tion from your con­tent, increase the load time, and/or keep poten­tial repeat cus­tomers from com­ing back.

1. Blink­ing text and ani­mated gifs
2. Back­ground music
3. Need­less use of JavaScript (pop-up win­dows, mes­sages, etc.)
4. Text is not read­able on background
5. Flash