Web Design Articles:
1
|
Design Checklist
@ 2003 By Daniel Clarke
Here's a checklist of 10 ways to optimize your website for peak performance:
1. Load Time
It's probably the most important reason people avoid certain web sites and for sure one of the main reasons for lost sales.
The generally accepted maximum time for a page to load is around 10 seconds. Here is a free service that tells you how long your web page takes to load:
NETMECHANIC http://www.netmechanic.com/cobrands/ FutureQuest/load_check.htm
Your pages should be no more than about 25Kb in size. To calculate the size of your web page, highlight the HTML document, then click on 'File' and 'Properties' and notice the file size. Then do the same for any graphics you have on that page. Then add those numbers together to get the size of that page.
HOST COMPARE http://www.hostcompare.com
CNET WEBSERVICES http://webservices.cnet.com
2. Browser Compatibility
Browser display problems and can ruin your Web pages. Web pages look different under different conditions. Browser display differences can be caused by:
- Multiple Browsers - Different Versions - Computer Platform - Screen Size - HTML Errors
You have to look at your website through other people's browsers. I am doing this regularly and I've sometimes been shocked with what I saw! Try this, it'll help:
ANYBROWSER http://www.anybrowser.com
3. Browser Safe Colors
The Browser-Safe Palette is the actual palette that Mosaic, Netscape, and Internet Explorer use within their browsers. The palettes used by these browsers are slightly different on Macs and PCs. This palette is based on math, not beauty.
The Browser-Safe Palette only contains 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use.
Here's a good palette of web safe colors:
WEB-SOURCE SAFE COLORS http://www.web-source.net/ 216_color_chart.htm
4. Broken Links
About 4-5% of all links on the Internet are broken. A site that contains broken links gives a bad impression to visitors and is a frequent cause of lost visitors. Also, the major Search Engines and Directories will not list your page if it contains any broken links or missing images.
Here are some free link validators:
LINK SCAN http://www.elsop.com/linkscan/quickcheck.html
NET MECHANIC http://www.netmechanic.com/maintain.htm
5. Meta Tags
What are meta tags? They are information inserted into the "head" area of your web pages. Meta tags, for example, can tell a browser what "character set" to use or whether a web page has self-rated itself in terms of adult content.
The meta keyword tag is also useful as a way to help your page come up for synonyms or unusual words that don't appear on the page itself.
The Keyword Tag should contain about 5 to 10 keywords that appear on your page. Never include words that do not appear on that page - in some Search Engines your website will be penalized for this. Do not repeat the same keyword - this is called 'keyword stuffing' and is also frowned upon by the Search Engines.
Separate your keywords with spaces (not commas). This allows the Search Engines to combine your keywords into phrases, for people who do 'phrase searching'.
Here are some programs that will generate your Meta Tags for you:
META MEDIC http://www.northernwebs.com/set/setsimjr.html
MULTI-META-MAKER http://www.multimeta.com/tools/ multimetamaker.html
6. ALT Tags
What are ALT tags and why should I use them? You have a web site. Your designer did an excellent job and it looks great. You have plenty of images, including one containing your business name, logo and slogan.
Though your site may look fine, it's not optimized to score high with search engines. Since search engines don't index images, they won't index any text your web site presents in image format - in this case the above-mentioned business name and slogan. To fix this problem, there are ALT tags, which are basically images descriptions.
Always add ALT tags to your images to make sure search engines recognize all the content on your site. ALT tags filled with keywords can also be used to boost your keyword frequency and help you achieve better rankings.
Note: ALT tags also make your site more accessible to visually impaired people using text readers. That's because text readers can't read images, but can detect text in ALT tags.
7. HTML Optimizer
Another way to make your page load faster is to compress (or optimize) your HTML code. An HTML Optimizer removes all blank spaces in your HTML code and also removes certain unnecessary tags.
The result is shorter downloading / uploading time. Pages will appear in client's Internet browser in exactly the same way, but they will be about 20% smaller.
A word of caution: in most HTML Optimizers you will find an 'Options' menu that tells the program to ignore certain parts of your code. Make sure your Optimizer does not compress embedded script tags - if they get compressed, the script will usually not work.
ADVANCED HTML OPTIMIZER http://www.pcbit.com/htmlopt/?htmlopt
8. HTML Validator
Validating your HTML will help insure that it displays properly on all browsers. Most of these tool read your web pages directly from your site.
Always check the validity of your HTML. Some Search Engines give lower rankings to pages that have poor quality HTML (such as incorrect nesting of elements).
Here are some free online validators:
HTML HELP http://www.htmlhelp.org/tools/validator/
BOBBY http://www.cast.org/bobby/
WATSON http://watson.addy.com/
9. GIF (or JPEG) Cruncher
Shrinking the size of your images is one of the best ways to get a faster-loading web page. You can usually reduce a GIF or JPEG image by 40% to 50% without losing any significant definition or sharpness.
SPINWAVE http://www.spinwave.com/ crunchers.html
10. WIDTH, HEIGHT and BORDER Tags
The WIDTH, HEIGHT and BORDER attributes are essential for each image that you have on your website. When you hyperlink an image, always make sure that the BORDER attribute is set to zero (BORDER=0). If you don't do this, your hyperlinked image will have an ugly blue border around it.
The WIDTH and HEIGHT attributes allow your page to load faster, as the browser knows in advance how much space the image requires. To find out the width and height of any image, just double click on the image file. This will automatically open 'Microsoft Photo Editor' - your image will appear, with the width and height of your image (in pixels) displayed on the tool bar.
Daniel Clarke is the webmaster of TorontoBizGuide.ca He wants to share with other webmasters how to build a successful online business. Subscribe for your free Newsletter at: http://www.torontobizguide.ca
You can reprint this article (if not stated otherwise above) on your website or publication with notice "Reprinted from Zongoo! Computers".
|
|
