HWG-News Tips Early February 2000

Worst Web Design Mistakes

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 5 February 2000 newsletter, for the category 'Worst Web Design Mistakes'.

Ever seen a page that's just really, really bad? Or made one yourself, looked at it, and wondered "what was I thinking?!" Tell us what you think the most common mistakes are -- and how to avoid them! -- in 80 words or less! Please don't mention specific sites or URLs, as we can't run those!

This issue's winner!

The most common mistake we make as designers is to bombard the site we're designing with the latest trick we've learned. Remember that aesthetically pleasing is crucial. AVOID BAD COLOR COMBOS - sharply contrast the text with the background and check it out on different browsers. AVOID HUGE GRAPHICS - it doesn't matter how wonderful the 85K graphic you created looks when the visitor, bored, inevitably clicks away and moves on. There are tons of programs out there to assist you in properly compressing the graphic without losing massive integrity.

-- Submitted by Scott Evans <webmaster@bslash.com>

Other Web Design Mistakes

Not proofreading carefully and thoroughly!!! Ending up with a site full of 'typos', misspellings and/or incorrect grammar, punctuation or syntax is one of the quickest ways to 'scare off' a potential client!! Not only will they not respect you, but if they don't understand what you are saying, that decreases your chances of selling your product or service. If wordsmithing is not your forte, hire someone to do it for you ... it will be worth it in the long run!!

-- Submitted by Shirley Marshall <perfectsites@inow.com>

1. The biggest sin is to think that everything goes on a cathodic tube *must be* like a TV ad.
2. A big common mistake is to use fancy fonts out of standards. Worst if they are too small: while Windows screen has 96 dpi, other platforms shows only 72 dpi, so text can be unreadable.
3. A big common mistake is to replace text with images, burdening a page and making impossible to search engines to understand it.
4. The worst mistake is " ". This is what are telling too many pages on the Net: absolutely nothing.
5. Large images downsized (e.g. an 800x800 reduced to 32x32) are in my nightmares. Even if FrontPage has an option to re-create images of required size, no one RTFM! Marco Bernardini <marco@giorgiobernardini.com>

-- Submitted by Marco Bernardini <marco@giorgiobernardini.com>

The biggest design mistakes I've seen are mis-using fonts and colors, and using elements that lack a relation to the rest of the page. A recent example used a fat font in yellow on a black background for a text-heavy page (all the wide letters blended together). Every page had a different line graphic on it that did not relate to anything else on the page. Moral of this story: You don't have to use all the tools in the box to design a great web page.

-- Submitted by Gayle Bradbury <writeaway@jps.net>

One of the worst mistakes on a web page or web site has to be too many applets on a page. When the page takes over 5 minutes to load because of the applets that really don't do much, to me is a waste of time. I believe if the applet has an intend purpose, such as a shopping cart that would be great, but not for a snowing picture along with something that follows the cursor.

-- Submitted by Kainn Bishop <spacerpg@hotmail.com>

The most common mistakes I see in web design are the same mistakes people make when they first get into page layout.

• unreadable type - choose a single, easy-to-read typestyle, use it consistently.
• not enough white space - balance the page, give the eyes a break with empty space.
• too much glitz - lose the animated spinning images, midi files, drop shadows.
• misspellings/typos/bad grammar - PROOFREAD!
• color emergencies - learn browser-safe color-wheel relationships, avoid busy backgrounds.

-- Submitted by Michelle Moore <michelle@2mgraphics.com>

The most common mistakes in Web design are: centering everything on the page, typing all text in CAPS, and placing EVERYTHING on one page. Paragraphs that are centered are difficult to read, as are sentences in all capital letters. Align the text to one side and use centering or CAPS only to _highlight_ a point or idea. Long text should be broken up into multiple pages for ease of reading, navigation, and retention ("where was that paragraph about 4th dimension theory? Oh, yeah, on page 4...")

-- Submitted by Romy Ohnui <crimson@greytree.com>

Dark backgrounds. Unless you have a specific reason for a dark background, keep it white or light. Dark backgrounds give an impression of amateurism and can make printing difficult for unskilled users. Too many colors. Keep it simple, coordinated and consistent. The busier you make a page the harder it is to draw attention where you want it. Get rid of the animated gifs. They can be cute but generally look cheesy and add to download time.

-- Submitted by James Peacock <jpeacock@winfield-inds.com>

The worst mistake by far is to forget about the people who are going to use your site. I can't tell you how many sites which would attract novice users because of their content, drive the same users away with their use of plug-ins or other bleeding edge technologies. At the same time I've been to sites about web-design that my dog could have created - hardly inspiring me to take any of their advise.

-- Submitted by Steve Garwood <steve367@angelfire.com>

My personal vote for worst web design is pages where there is a dark background graphic with light text (like yellow, for example), but a white background. While you are waiting for the pages to load, you get yellow on white. Another variation on this is dark background and dark text, especially when the text is tiny. It's hard to read royal blue on black in something that looks like 8-pt font. Make it easy to read!

-- Submitted by Carol Foltz <caysedai@yahoo.com<

Poor font color/BG color choices will immediately render a page unusable or at best "not worth the effort." Chose colors that contrast and be sure the font is noticeably darker than the background. The human eye relies on contrast when reading and fatigues without it.

-- Submitted by Mary Jo Hutson <mhutson@uslink.net>

For me, many programmers, especially amateurs, use table without considering the resolutions of the monitor that the users might be using. Example 720(width of table) on a 800x600 resolution of monitor. The effect... Best in 800x600 but worst in 640x480, 1024x78 etc. To avoid, use background with 1300x15 pixels, set table's width to 620 or use percentage properly and for text not to overlap, use NOWRAP.

-- Submitted by John De Luna <webmaster@shoppersjournal.com.ph>

The most obvious web design error is lack of contrast on web pages. If a dark background is used, the font must be light colored or it will be unreadable. Conversely, if a light background is used, the font must be dark. Often the backgrounds are simply too busy, making it difficult to read the text, regardless of font color. If your web pages are unreadable when you're creating them, they won't be any better on the web.

-- Submitted by Debbie Sternecky <DSternecky@aol.com>

The use of non-standard fonts is one of the most common and mis-understood web design mistakes I have seen. People need to realize that the users of your site can only see a specific font if they have it on their PC! If you code multiple fonts, as in <FONT FACE="Valium, Tahoma, Arial"> ad make it so that the last font is one that almost EVEYBODY has, you pretty much guarantee that the users of your site will see what YOU want them to see! Lastily, make sure you browse your site in each font so you know that each one looks like you want!

-- Submitted by Howie <hmmd@erols.com>

One of the worst mistakes that anyone could make during the design of a page is a non-coordinating color scheme. i.e. Yellow text with a lime green background.

-- Submitted by Les Hill <Les@pcsnow.com>

One of the worst mistakes I've seen is the extensive use of javascript where HTML can do the job as well. This really stands out with links. A better approach, if you want annotation for the link, is to use javascript only for the mouseover comment, leaving HTML for the link, for when javascript is disabled. This mistake is made even worse when the javascript doesn't work right, making the site unusable.

-- Submitted by Peter Hanely <phanely@jps.net>

The biggest mistake I've seen yet whilst surfing has been a lack of navigability. To me there is nothing more frustrating than having to go back two or three pages to get to other areas of a site. There should be a bar, preferably along the left side or top of the page since these will stay in those corners regardless of screen resolution, that always exists - giving the user access to other areas of your site. If it's an ordeal to visit your page, people won't!

-- Submitted by Nathaniel Bank <Nathan.Bank@cello.net>

Improper color selection. When was the last time you looked at a magazine advertisement that had a solid black background, with either blue or red text. Better yet, when has this same text also been italicized? Don't make your pages unreadable! Look a magazine for great color combination ideas.

-- Submitted by Jeremy Brown <jtmb@commkey.net>

Most common one I see from sites submitted to us for hosting ...

• Images too large or not compressed at all.
• Too many different little buttons and lines and this and that ... sometimes 40+ little images ....
• No Meta Tags
• Java Applet Navigation systems only ... no text links.
• Complicated or busy backgrounds that make text difficult to read.
• Bad navigation systems.
• No alt text on images.
• Over usage of many brilliant text colours for headings etc.
• Text colours adapted for dark backgrounds that makes the page useless if a browser has images switched off.
• Over indulgence in the application animated gifs.

-- Submitted by Colyn Serfontein <ltf@iafrica.com>

There is nothing worse than clicking on a URL and waiting, waiting, waiting as a massive graphic engulfs the screen only to discover that one must click on the graphic to get to the actual web site!

-- Submitted by Linda M. Woolf, Ph.D. <woolflm@webster.edu>

Using canned art from other sites. Some of this art/buttons have backgrounds that don't match your site background. This shows unprofessionalism and that you really don't care what your site looks like. Learn to create your own art/buttons. And from a designers view, don't design just for design sake. Graphic art is not random, images and text are put in places for a reason.

-- Submitted by Samuel Little <services@slgd.com>

The purpose of a thumbnail, a tiny version of a picture, is to preview the image without having to load the entire image file. Loading the original image file into a "thumbnail" defeats the purpose! Create a separate file for each thumbnail image, and each one should be no larger than your actual thumbnail held up against the computer screen.

-- Submitted by John Setliff <cahmic@jean-pool.com>

The worst web design mistake is the choice of a background image, or color, that makes the text the page difficult to read. A background texture, and a poor choice of text color, will make it difficult to "sell" the message on the site! The choice of background color and text color can also cause problems. Look at your page on more than one monitor, especially a notebook LCD screen.

-- Submitted by dennis@jasinski.com <dennis@jasinski.com>

Navigation should be institutive and simple. Never assume your audience can identify an icon by its appearance alone. With few exceptions (perhaps an envelope signifying "mail" or "contact information", a house signifying "home" and maybe a magnifying glass for "search") there are few icons which are universally understood. To assist, textual elements should be included to guide an audience. Few things are as frustrating and will turn off an audience faster than a confusing navigation system.

-- Submitted by Bradt Duryea-Wright <meddlingteens@hotmail.com>

Check and double check your spelling and every link to make sure they work. Nothing makes us look more like amateurs than misspelled words and links that either go the wrong place or come up with no page at all!

-- Submitted by Cathy Gage <gagecathy@yahoo.com>

• Poor grammar, spelling, and punctuation e.g. plurals formed with apostrophes, inappropriate quotation marks, lack of subject-verb agreement, etc.
• Missing, incomplete, or difficult-to-find company contact information - names, addresses, e-mail addresses, phone nos., etc. - and/or no feedback mechanism.
• No means of providing feedback to the Webmaster.
• Title lines that start out, "The..." or, "Welcome to..." In any sort of alphabetized bookmark list, as many are, titles like these are totally useless, since (a) no one is likely to look for your site name under "The..." or "Welcome to..." or (b) they'll be lost amid all the others that start out the same idiotically useless way. Webmasters who take the attitude that people who don't like these meaningless title lines should edit the bookmark into something better will soon find out that people aren't about to bother with that kind of nonsense.
• There's a reason the title tag exists in HTML. It gives every page a distinctive title, a point that many sites miss. At one site - a site that devotes itself to the examination of trends in technology - pages bear nondescript titles such as "Business News from..." rather than tell you what the story's actually about (for example: "Acme - How to Catch Roadrunners"). That creates a problem when users bookmark those pages: it's nearly impossible to remember what's on the page when you see a vague title in your list of bookmarks, and that discourages people from returning. Also, when search engines index the site, they typically grab the page title and show that to users in a list of results.

-- Submitted by Jansen, Jan R <JJ129686@exchange.DAYTONOH.NCR.com>

The best way to create a web site that is professional in appearance, especially when graphics intensive, is to give the images and the tables height and width attributes. Nothing is so unprofessional as a web site neglecting these items, so that the content "jumps around" the screen as it loads. Adding width and height attributes will only take about 5 more minutes, but will improve the user's experience dramatically.

-- Submitted by Melissa Henken <mhenken@columbus.rr.com>

Reserve placeholders for all your images and don't keep your audience waiting:

After almost 4 years of coding I discovered that most of the better HTML editors that I have been exposed to do not include the dimensions of a JPG image automatically but do so for a GIF image. This is especially important if your entire page is set within a table. Include the HEIGHT="XXX" and WIDTH="YYY" tags for all images including applets to maximize the performance and download time of your web pages. This will force the browser to reserve image placeholders for your page and allow other page elements to download and show up sooner and keep your visitors at your site whle images may still be forming. This is a reminder that we must never forget the basics!

-- Submitted by Wayne Nolting <wnolting@connix.com>

Use of Fonts and color schemes:

Choice of color schemes and fonts are one if not the most important aspects of a web site. Loud, Large, Screaming fonts are unprofessional and the professionals looking at your design work pick up on it the first thing.

Fonts and colors are an art and technique that require study. Be consistent in fonts in size and type your site should use only two or three variations at the most. for color themes there are links in the HWG to help.

-- Submitted by ron <ron@graphiclynx.com>

The worst mistake I have seen has to be a beautifully designed web site with absolutely no contact information. If I can't find a location for the business, a phone number, a mailing address, or an e-mail contact I can't buy your product/service. Also, put the e-mail address on the site clearly as text, some browsers can't use a "mail to" tag. Yes, there is view source to find it, but how many average surfers know that. They prefer something to cut and paste. Same goes for the information all contained in a graphic, not contact friendly.

-- Submitted by susan banta <sebanta@hotmail.com>

Quite apart from the usual design horrors of animating everything throughout a web site, the favourite these days seems to be a massive JPEG image on a splash page combined with a META refresh tag: after 30 seconds of the image *almost* loading, you're redirected to a new page so you never get to see what was holding you up!

-- Submitted by Richard H Morris <richard.morris@web-designers.co.uk>

Never use to frames to break your page into so many tiny sections that the overall effect is one of cracker crumbs. Two frames is acceptable, three is pushing the limit. Too many tiny information windows will confuse and irritate your users.

-- Submitted by Laura Shaw <walt1@texas.net>

When I think of bad web design, two major mistakes come to mind: sites that require registration and sites with too many graphics. Sites that require registration are quaranteed not to be indexed by search engines, and to have a very limited audience (assuming that you do want to have a popular site), especially if the registration process is long. Sites that have too many graphics take forever to download, which is very annoying, especially if the graphics are used for trivial things. Even worse, there are cases where the graphics don't display as intended (because of cross-platform publishing issues) and the result is really ugly. To top it off, some sites are still not using the width and height tags for their images...

-- Submitted by Alexandros Labrinidis <labrinid@umiacs.umd.edu>

Picture this... If you absolutely need to use a large image, there are two tricks you can use: First, you can put a thumbnail in the main page and link it to the original. The other trick is to add the LOWSRC element to the image and create a low-color,low-resolution version of the graphic that will load as a preview image before the full-color version.

-- Submitted by Phil Jansen <webstudio@icon.co.za>

Other Tips Submitted

Sometimes we get tips that don't directly relate to the topic at hand, but they may be useful anyway. Rather than discard them, we've chosen to list them here:

As a search engine editor myself, here are some simple guidelines that will help to get your site higher placement.

• In your <title> tag be very specific to page content or site name. Be consise with no more than 8 words, ideally keep around the average of 4 words.
• In your <description> tag be specific about the content on page, do not repeat title. Description should me no more than 20 words & no less than 8.
• In your <keywords> tag, be sure your title is the first keyword (phrase), and include at least 50% of the keywords in your description. Do not repeat any word more than 6 times. Do not "pad" keywords with words that are not specific to content. Be sure to use words that are embedded in text or alt attributes.
• Always provide links from main page to every page on your site (deep submission) with <title> & <description> tags reflecting content of each page.
• Always use <alt> attributes for every image on your site and embed a keyword into tag.
• Always use a heading tag <H1> that repeats the title of your page.
• You can capitalize the first letter of each word in your <title> but never capitalize in your <description> where it is not appropriate.

-- Submitted by R Pollak <rpollak@theramp.net>

• Content is king, and when you want to add some more descriptive text to your pages, use the ALT tags and the TITLE tags, where you should include those keyword you want to rank.
• Name all the files like html pages and images with the keywords you want to rank, so the search engines will know the your "donut.htm" with the "big_donut.gif" is about donuts.

-- Submitted by Baruch Schwarcz <baruchschwarcz@usa.net>

More Ways You Can Avoid the Worst Mistakes of Web Design

• Join the HWG-Techniques mailing list or read the list FAQ
• Take a HWG Online Education course:
  • Course H101, Introduction to HTML 4.0
  • Course W201, Practical Web Management: Creating an Effective Web Site
  • Course D201, Designing for Universal Accessibility with HTML 4.0