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 the best way possible, the technical
side of usability can and should be corrected using the standard
requirements.
SOURCE CODE OPTIMIZATION
Firstly about the 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, the more
drive space it occupies. 3. As the derivative of the previous
problem, the more size of that web-page, the 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 the obvious
decreasing of your Search Engine rankings. That is why Meta Tags
correcting is not the 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, the core of which lies in the use of highly popular
"home" web editors like FrontPage or other.
The "winner" among the worst is well-known Netscape Composer,
due to the 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 the 40Kb file size or less,
as a simple result of the deleting junk HTML tags. If you
implement Cascade Style Sheet and HTML compressor you will get
the same, but "clean & shiny" web-page totaling 25-30Kb (40-50%
space savings) with the 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, the potential savings as a result of
HTML optimization may reach 1-3Mb. So if you are experiencing
the lack of hard drive space with your hosting provider, the
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
the first obstacle may be overcome by acquiring personal server
with several Gigabytes of hard drive space, the letter problem
will continue to exist as the majority of web visitors have low
speed dial-up connection.
To make your graphics optimized on the basic level, you should
save it in the 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 the
matter of 2 min.
The basic math shows that 10 optimized pictures (without HTML
optimization) on a web-page are capable to decrease the overall
size of it from 120Kb to 70Kb with no visual loss in the 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 the right format, follow one simple rule: "If the
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 the 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 the best to use."
If it is hard to determine, then save it in both formats and
compare quality/size ratio. Not much work, big effect.
Having semi- or fully professional graphic editors will allow
you to get even better results by selecting compression rate,
smoothness, sharpness of edges – if we speak about .JPG format;
or palette, colors, rate of transparency, animation features
etc. – if we deal with .GIF format.
Today's technological opportunities are vast, so it is you to
decide how deeply you want to "dive in".
CROSS-BROWSER & SCREEN RESOLUTION OPTIMIZATION
The numbers are the following: - 2% have outdated 14'' with
640*480 pixels in width and height respectively. - 49% of
web-surfers use 15" monitors with preferable "standard" screen
resolution of 800*600 pixels; - 45% surf the web with 17"
monitors with reasonable 1024*768 resolution; - 4% of users
enjoy 18-19" monitors with 1152*864-1280*1024 screen settings.
What should these numbers tell you? The very simple thing – if
you created the WS on your 15" monitor, don't assume that it
will look as good on other monitors as on yours.
Let me draw several notes here about the tendency that monitor
market will follow in the nearest future. First is that all 14"
monitors are gradually going to their deserved eternal rest.
Even the share of notebooks with 15" TFT screens growing
exponentially. There are even several new versions with 16"
active matrixes. Don't also forget that notebooks' 14" TFT
screen have almost the same diagonal inches as usual 15" CRT
(Cathode-ray tube) monitors. Secondly, the number of 15"
monitors is also decreasing, due to growing number of 17"
monitor owners that is the third point.
One sentence conclusion of the above statistics is that your WS
should look fine, at least, under 800*600 and 1024*768
resolutions. This is a market demand to your WS and, as we know,
you better not joke with The Market.
Without going deep into theory, there are two ways: - more
simple; - more complex.
Both correct, both satisfy the demand above but the letter way,
given it is more complex, usually perfectly fits any screen
resolution, whether it is 14" or 21" and more favorable to WS
space usage.
The easier way would be to make the borders of your web-page
(tables of your web-page) to be fixed with certain number of
pixels. The most popular settings are something between 650 to
750 pixels just to fit that 800 pixels width screen under the
most popular 15" monitor 800*600 resolution. If you go that way
your web-page will have the same look under different sets of
resolutions. If we try to see it at 14" monitor with 640 pixels
in width, the unpleasant horizontal scroller would appear
because our fixed setting in 700 pixels is wider then 640 and it
just won't fit in it. If, on the other hand, we look at our
imaginable site under 1152*864 or 1280*1024, it will look too
narrow, as it will occupy only 60% of the screen width (our 700
in comparison to 1200 screen pixels width). Why does this
designing way simpler? You just won't have any problems building
it: no need for resolution or cross-browser optimization, as
fixed pixels are read correctly under almost every browser.
The more complex way is to have width of one or several HTML
tables columns on your site to be set in percents like 75% or
100% and, therefore, poses the ability to automatically broaden
or narrow according to the specified percents, depending on what
screen resolution the site is being viewed under. If you have
600*800 screen settings (the screen width is 600 pixels) and one
of the table width of your site is set to 100%, then this
particular table along with all included text and graphic will
narrow to 600 pixels, if we set the monitor to 1200*1024
resolution, i.e. having 1200 pixels wide, our site's table will
stretch to the specified 100%, in that case, 1200 pixels. That's
why it looks more attractive under different resolutions but
demands additional optimization, including cross-browser
optimization, as Netscape Navigator browser has some problems
with proper interpreting of percent settings in multi column
tables. Which way to choose depends on the tasks and your
preference.
I wish you endless creativity and no more then 70Kb per page ;0)
About the author:
Pavel Lenshin is a publisher of "NET Business Magazine", author
of a free "Info Business Online: the easy way" ebook,
web-developer and founder of the http://ASBONE.com/ -
informational portal and provider of discounted Internet
services for small business.
