WEB-SITE DESIGNING PILLIARS (part 2)------------------------------------------------------------ copyright (c) Pavel Lenshin ------------------------------------------------------------
USABILITY
Usability is what makes your WS pleasant to deal with. While everyone defines personally for her(him)self how to make design nice to look at, memorable (in respect to branding) and serve customer/business needs in
best way possible,
technical side of usability can and should be corrected using
standard requirements.
SOURCE CODE OPTIMIZATION
Firstly about
four problems that come to my mind with "dirty" HTML source code:
1. Potential cross-browser conflicts as some particular useless Tags (a piece of HTML source code) may be neglected by one browser but create some visual errors, when viewed in other browser. 2. The more useless HTML Tags web-page has,
more drive space it occupies. 3. As
derivative of
previous problem,
more size of that web-page,
longer it takes to visitor to load and view it. 4. Search engines like plain and clear textual information for easy search and scan. By having a lot of useless pieces of HTML code, you prevent SE spiders to proper index your web-pages. The result is
obvious decreasing of your Search Engine rankings. That is why Meta Tags correcting is not
only thing you should pay attention to.
Statistic shows that more then 85% of all WSs online demands graphics or HTML code optimization. That is actually a common problem,
core of which lies in
use of highly popular "home" web editors like FrontPage or other.
The "winner" among
worst is well-known Netscape Composer, due to
extremely "dirty" HTML code it generates while editing old or creating new web-pages. If you have ever used Composer and no one have "cleaned" those web-pages afterwards, they definitely contain a lot of HTML "garbage".
Based on my own experience every 50Kb Netscape Composer's web-page can be easily optimized to
40Kb file size or less, as a simple result of
deleting junk HTML tags. If you implement Cascade Style Sheet and HTML compressor you will get
same, but "clean & shiny" web-page totaling 25-30Kb (40-50% space savings) with
enhanced visual effects.
The example above shows saving on a single web-page, but if we speak in terms of 50-60 pages WS, that occupy (without graphics) 3-5Mb of hard drive space,
potential savings as a result of HTML optimization may reach 1-3Mb. So if you are experiencing
lack of hard drive space with your hosting provider,
solution to that problem lies in simple WS optimization. It doesn't only save a lot of space, but, as we know, eliminates potential cross-browser mistakes, helps SE spiders to properly index your web-pages and make your visitors' surfing more quick and smooth and therefore pleasant.
GRAPHICS OPTIMIZATION
When we speak about poorly optimized graphics we get two problems: more occupied space and worse load time. Given that
first obstacle may be overcome by acquiring personal server with several Gigabytes of hard drive space,
letter problem will continue to exist as
majority of web visitors have low speed dial-up connection.
To make your graphics optimized on
basic level, you should save it in
proper graphic format. Many popular pictures of eBook covers can be easily optimized simply by re-saving .JPG format into .GIF or vice versa depending on particular file. That tactic alone can bring 15Kb file to occupy 7-10Kb in
matter of 2 min.
The basic math shows that 10 optimized pictures (without HTML optimization) on a web-page are capable to decrease
overall size of it from 120Kb to 70Kb with no visual loss in
quality of picture. Are you aware of statistics how many visitors leave your site just because they are tired to wait until all pictures load? It doesn't mean that you have to simply delete these pictures completely as some people suggest, what it does mean is that they are better to be optimized because in case with eBook covers, they proved to triple selling potential and their absence will be hardly compensated by new visitors.
To choose
right format, follow one simple rule: "If
target picture is more likely to be a photo, with many colors, unshaped objects and different lights, this file should be saved in .JPG format. If, on
contrary, a picture is more likely to consists of a number of vector objects like circles, triangles, squares, doesn't have too many colors or similar to some drown comics, then .GIF format is
best to use."