100 Do's and Don'ts in Web Design Part 4


Don't use blink
The tag <blink> should never have been introduced to HTML.
Blinking text is irritating, it offends your readers. Don't use it.

Don't use columns for text
You can show your text in 2 or more columns. This can be implemented with tables or with the not official tag <multicol>
The result is newspaper-column like page.
But columns have a large drawback on a screen. It takes more up-and-down scrolling to read the text, especially if it's a large page.
Avoid using columns this way.

Don't use small serif letters
Serif letters are developed for printing. They don't look good on a computer screen. At least not in smaller fonts.
You should avoid these letters, especially if the serif is tiny, like Times.

Don't use all capitals
It takes more time to read text that consists of only capitals.
Besides, using all capitals is the online equivalent of shouting.

Don't overuse bold text
Bold text is meant to give some focus to a part of your text. Don't put whole paragraphs in bold. It has the same effect as shouting.
Keep focus - and bold text - short and functional.

Don't overuse italics
Text in italic is hard to read on a screen. The resolution of a screen just isn't capable to present italics without distorting them slightly.
This is even more noticeable if you use a small font.
So don't use italics for larger portions of your text.

Don't use small fonts
Don't use small fonts (font size smaller than 4). Small letters are hard to read and that's even worse on a computer screen.

Don't use too many fonts
Using all kinds of fonts on one page - or in one site - is a very bad typographical practice.
Unless you run an online font-archive.

Do use punctuation
Present information surveyable.
Present it in small chunks. Use headings to separate them. Use lists to avoid long textual summing ups.

Don't hide your links
The default color settings of links is pretty standard.
You can change link colors. But if you do you'll have to be sure that links can be recognized.
Don't let those fancy colors hide your links.

Do use all lowercase or all uppercase links
Many browsers discriminate between differences in case. Even if your server doesn't, don't rely on it. If you'll need to move to another server you will be happy if all your links still function. The easiest way to accomplish this is to use links consequently all lowercase or all uppercase.

Do separate adjacent textual links
If you place textual links horizontally be sure to separate them clearly. With spaces, a vertical line, bracket, whatever.
The point is that it must be clear to a visitor where a link starts and where it ends.

Do limit the size of predefined text
Predefined text (between the tags <pre> and </pre>) cannot be wrapped. If you use it be sure to limit the size, especially the width.
Otherwise your visitors might need to scroll horizontally to read the text.

Do limit the width of text
Reading full width text on a full screen browser is quite terrible. The lines of text get too long; giving you a headache reading them. Limit the width of text-lines using tables, blockquotes etc.

Do use textual dates
Probably you do use dates. For instance to show the most recent update of your site.
But it's a world wide web.
Do keep in mind that 02-03-2000 will be the second of March or the third of February, depending on the country your visitor comes from.
If you use text for your month, like March 2, 2000 the date will be correctly interpreted.

Do provide a visual e-mail address
The mailto: trick is great. Start the e-mail-application right from the webpage. But it only works if your visitor uses an integrated e-mail application. For all the others provide a readable e-mail-address.


Do use transparency
The presentation of images often improves by giving the images a transparent backgroundcolor. They'll better integrate visually with the background.

Do use interlacing
Interlace larger GIF-images. The visitor will get a quick feedback while the image is still loading. For very small images - like bullets - interlacing makes no sense but in all other cases it does.

Don't use too many images
Too many images slows down your site. Don't chase your visitors away; limit the number of images.

Do make your graphics reproducible
If you create your own graphics make them reproducible.
You might need another one of the same kind, so be sure to write down all the effects and the parameters you've used to create the graphics.

Do break up images
If you use large images you can break them up in several parts.
You can combine the parts in the webpage to form the original image.
Doing so the image-parts can be downloaded parallel, thus reducing download time.

Don't use PNG (yet)
PNG is a great format for graphics and will eventually replace GIF.
But right now many browsers are in use that don't support PNG.
For the time being stick to GIF and JPEG.

Do combine background-images and background-colors
Even if you do use a background-image, still provide a background-color. The background-color should approximately be the main color of the image.
If text has a color that contrasts with the background-image, it will still be readable before the background-image is loaded.

Do use a browser safe palette
Use a browser safe palette for your colors.
This will prevent colors from dithering on older monitors.

Don't use too many colors
You have access to 16 million colors. Be selective - don't try to use them all. Too many colors distract form what you're trying to say.

Don't override only one standard color
If you override a standard color, be sure to override them all.
Your visitor has her own color settings. If you change i.e. only the fontcolor to darkblue, text might become unreadable on a dark background. So be sure also to change the backgroundcolor.

Source : http://www.spiderpro.com/pr/prstgm001.html

Share this :

Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔