Website designing Pillars (part2)
by: 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:
Potential crossbrowser 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.
The more useless HTML Tags webpage has, the more drive space it occupies.
As the derivative of the previous problem, the more size of that webpage, the longer it takes to visitor to load and view it.
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 webpages. 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 wellknown Netscape Composer, due to the extremely กdirtyก HTML code it generates while editing old or creating new webpages. If you have ever used Composer and no one have กcleanedก those webpages afterwards, they definitely contain a lot of HTML กgarbageก.
Based on my own experience every 50Kb Netscape Composerกs webpage 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ก webpage totaling 2530Kb (4050% space savings) with the enhanced visual effects.
The example above shows saving on a single webpage, but if we speak in terms of 5060 pages WS, that occupy (without graphics) 35Mb of hard drive space, the potential savings as a result of HTML optimization may reach 13Mb. 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 crossbrowser mistakes, helps SE spiders to properly index your webpages 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 dialup 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 resaving .JPG format into .GIF or vice versa depending on particular file. That tactic alone can bring 15Kb file to occupy 710Kb in the matter of 2 min.
The basic math shows that 10 optimized pictures (without HTML optimization) on a webpage 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ก.
CROSSBROWSER & SCREEN RESOLUTION OPTIMIZATION
The numbers are the following:
2% have outdated 14กก with 640*480 pixels in width and height respectively.
49% of websurfers 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 1819ก monitors with 1152*8641280*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 (Cathoderay 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 webpage (tables of your webpage) 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 webpage 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 crossbrowser 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 crossbrowser 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
copyright (c) Pavel Lenshin
About The Author
Pavel Lenshin is an Internet entrepreneur, webdeveloper and marketer, founder of the entrepreneurship portal, where you can find discounted Internet services, marketing solutions, FREE ebooks, FREE reports and finally uncover innovative business strategies through FREE กNET Business Magazineก.
Visit: http://asbone.com
This article was posted on January 09, 2005
by Pavel Lenshin