Sunday, August 13, 2006

Do's & Dont's of Web Design.

1. Don't use busy backgrounds on your pages:
  • You have to do all your styling in CSS.
  • Background tile or stretch images to hard to load & you lose your visitors.

2. Do end your URL's with a forward slash in your links:

  • End URL's with "/".
  • Not neccessary though by adding the forward slash, we remove a step that otherwise the web server and browser would have to take; removing this extra step can give you a speed boost.

3. Don't set your type to all capital letters in your body text:

  • USING ALL CAPS IN TEXT IS GOOD FOR EMPHASIZE AND TITLE ELEMENTS BUT DON'T CREATE LONG SENTENCES OR PARAGRAPHS IN ALL CAPS; IT'S JUST HARD TO READ & IT APPEALS TOO MUCH. JUST COMPARE THIS PARAGRAPH IN ALL CAPS.

4. Don't have more than a few words in italics:

  • Italics are one way to draw attention to text, but it makes text harder to read. Used for one or two words on occasion is good, but if you go crazy and start using italicized text all over the place or for long sentences or paragraphs, then you're looking for trouble! Just compare this paragraph in just italics.

5. Don't have more than a few words in a bold case:

  • Sounds like the last two.. Nonetheless it is still valid for the same reasons in that the text is harder to read, and then loses its point. Remember that setting text bold, italic, or in CAPITALS are all ways to bring attention to the particular words, but if you're making everything the same, it loses its impact.

6. Don't use h5 and h6 tags:

  • These tags will make your text smaller than the browser's default size and make it bold. This combination will result in text that is really hard to read.

7. Do turn off the blue borders around linked graphics:

  • As you know, you can turn graphics into links or, in other words, buttons by wrapping a link tag around an image. By default, browsers will surround the image with an ugly blue border showing us that the image is a link. Your images that are acting as buttons should look like buttons; it should be obvious that the image is something to click on ... so we don't need the blue border.

    To get rid of the blue border all you need to do is add this code inside your image tag: border="0".

8. Do provide alternate text (using the 'alt' attribute of the image tag) for all your major images:

  • Alternate text is text that you insert in your image tags that is used by text only browsers. Text only browsers are used by the blind to surf the web since images won't help them very much ... the alternate text in your image tags is read by the text only browsers in place of displaying the images.

  • You should put meaningful information in the alternative text that will benefit those who can't see and it will also help you with the search engines

  • The alternate (alt) text will also be displayed as a tool tip in Internet Explorer.

9. Do make images that look like buttons act like buttons:

  • I think we saw something like this already! Just as I said above, button graphics should look like buttons ... and on the flip side, don't create graphics that look like buttons that aren't buttons!

10. Don't use too many colors in your web site:

  • Color is a way for people to identify things; that is why the Coke label is dominantly red and the Pepsi label is dominantly blue. Keep the color scheme of your web site limited to a couple of colors and keep it consistent across your site unless you want to denote some major section.
And at last i would like to give a summary as:

Whatever you do, remember these two points:

1. Always try and make things as clear as possible to your visitors.

2. What may be obvious to you may not be obvious to your visitors!

0 reviews: