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

19.06
DESIGN

Do use a consistent look and feel
Your site should stand out as a whole. Use the same look and feel for all the pages at your site. This way your visitors have a sense of recognition when they visit various pages. Using stylesheets makes it much easier to maintain the look and feel of numerous pages.

Do use recurring visual elements
Repeat visual elements (images, colors, fonts etc.) on several pages. This will add to a consistent look and feel.

Don't use dark backgrounds
Dark backgrounds tend to make text less readable. So avoid dark colors or dark backgroundimages. If you do need them, use a nonserif font for the text (like Arial, Universe, Helvetica) and be sure to not to use a small fontsize.

Don't cram your pages
A page with text pushed aside against the border of a table - or an image - looks awful. Don't cram your pages, use colspan and borderspan for tables and vspan and hspan for applets and images.

Don't push your table out of the screen
Tables are very flexible. They're able to get almost anything more or less visible on a screen. But by putting large elements in a table cell you might force the cells to become too large. Thus making horizontal scrolling necessary.
So limit the number and size of pictures, long words (e.g. long links), predefined text etc.

Don't overuse frames
Use only a limited number of frames. Always check if the screen doesn't get crammed if a low resolution screen is used.

Do vertical align the content of table cells
You do you use table cells to get your info on the right position?
Then be sure to align the content vertically.

Don't mix horizontal aligning
Mixing centered text and text that's left aligned makes a mess of your page.
If you want to center text do it consistently.
Exceptions are centering text of headers or centered text placed in a border.

BANDWITH

Do use few colors in your GIF's
Minimize the number of colors in your GIF images.
GIF's can be stored with a maximum of 256 colors. Minimizing the number of colors to 16, 8 or even 2 dramatically reduces the size of the GIF-file and therefore improves performance.
Choose as few colors as possible without ruining the image. You might test both reducing colors with error correction or by selecting the nearest color.

Do use high compression in JPEG
Improve the performance of your site by reducing the size of your JPEG-images.
JPEG can be saved with different compression-percentages. A high compression results in a smaller file size but also in a less perfect image. Test several compressions for each image you want to use. For different images the acceptable compressions will differ.

Do reserve space for images
Generally text arrives more quickly than an image. By reserving space for an image the browser is able to render the text. A visitor can start reading right away. Reserving space is done by defining the attributes vsize and hsize in the tag <IMG>

Do provide thumbnails for large images
In some cases you do need large pictures that take a while to load.
I.e. if you're running a website on modern art.
In such a case do provide small copies of the original images (thumbnails) that link to the original ones.

Do reuse images
Once images are loaded they are stored in cache.
If you use the same image in several webpages the image will be loaded the second time in a breeze. It is necessary to have the image in the same location. Also be sure to use exactly the same filename. Even if a browser can handle differences in uppercase and lowercase, your browsercache can not.

Don't reference images from other sites
If you use images from another site (i.e. an image archive ) do copy them to your own site. Looking up other servers to get the images would introduce overhead and an extended load-time.

Do provide size information
If you use large images, videos etc., give an indication of the size before the actual transfer begins.

Don't use large textual images
Avoid creating images of large pieces of text. It gives you more possibilities but it costs valuable bandwidth. If you do need textual images be sure to reduce the number of
colors.

Don't use wordprocessors
Don't use wordprocessors to write HTML. They really mess it up.
It's not uncommon for a site to double or triple in size because tags are added unnecessarily by a wordprocessor.


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

Share this :

Previous
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 ✔