Web site designing Pillars
Usability is what makes your Web Site satisfying to deal with. While everyone defines personally for her/himself how to make web site design nice to look at, memorable, in respect to branding and serve customer or business needs in the greatest way possible, the technical side of usability can and should be corrected using the normal requirements.
SOURCE CODE OPTIMIZATION
Firstly here are about four problems that come to my mind with “dirty” HTML source code:
Potential cross browser conflicts as some particular useless Tags a piece of HTML source code may be deserted by one browser but create some visual errors, when viewed in other browser.
The more useless HTML Tags web page has, the more drive space it inhabits.
As the unoriginal of the previous problem, the more size of that web page, the longer it takes to load to visitor and view it.
Search engines like natural and clear textual information for easy search and scan. By having a lot of useless pieces of HTML code, you prevent Search engines spiders to proper index your web pages. The result is the clear decreasing of your Search Engine rankings. That is why Meta Tags correcting is not the only thing you should consider.
Statistic shows that more than 85% of all websites online requirement 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 Front Page or other web editors.
The winner between the worst is well identified as Netscape Composer, due to the tremendously dirty HTML code it generates though 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 erasing junk HTML tags. If you implement Cascade Style Sheet and HTML compressor you will get the same, but clean and shiny web page totaling 25kb to 30Kb 40% to 50% space savings with the enhanced visual effects.
The example above shows saving on a one web page, but if we speak in terms of 50 to 60 pages website, that occupy without graphics 3 to 5 Mb of hard drive space, the possible savings as a result of HTML optimization may reach 1 to 3Mb. So if you are experiencing the lack of hard drive space with your web hosting provider, the solution to that problem lies in simple web site optimization. It does not only save a lot of space, but, as we know, eliminates potential cross browser mistakes, helps Search engine spiders to properly index your web-pages and make your web site visitors surfing more quick and smooth and therefore pleasant.
When we speak about poorly optimized graphics we refers to two problems more occupied space and worse load time. Given that the first problem 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 site visitors have low speed dial up connection.
To make your graphics optimized on the simple level, you should save it in the proper graphic format. Must common pictures of eBook covers can be easily optimized simply by resaving JPG format into GIF or vice versa depending on particular file. That method alone can bring 15Kb file to occupy 7 to 10 Kb in the matter of 2 minutes.
The simple 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. Do know of statistics how many visitors leave your web site just because they are tired to wait until all pictures load? It does not mean that you have to simply delete these pictures completely as some people may suggest, what it does mean is that they are better to be optimized because in case with eBook covers, they proved to three-way selling potential and their absence will be hardly compensated by new visitors.
To choose the right way, 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 contain of a number of vector objects like circles, triangles, squares, does not have too many colors or similar to some of drown comics, then GIF format is the top to use.
If it is hard to control, then save it in both formats and compare quality or size ratio. Not much work, big effect.
Having semi or fully professional graphic editors will let 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.
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 site with 17″ monitors with reasonable 1024×768 resolution;
4% of users enjoy 18-19″ monitors with 1152×864 to1280x1024 screen settings.
What should these numbers tell you? The very simple thing if you created the Website on your 15″ monitor, don not assume that it will look as good on other monitors as on yours.
Let me put down several notes here about the tendency that monitor market will follow in the adjacent future. First is that all 14″ monitors are gradually going to their deserved eternal break. Unfluctuating the share of notebooks with 15″ TFT screens rising exponentially. There are even different new versions with 16″ active matrixes. Do not also forget that notebooks’ 14″ TFT screen take almost the same slanting inches as with 15″ CRT Cathode ray tube monitors. Secondly, the number of 15″ monitors is also declining, outstanding to growing number of 17″ monitor owners that is the third point.
One sentence conclusion of the above statistics is that your Website should look fine, at least, under 800×600 and 1024×768 resolutions. This is a market demand to your website and, as we know, you better not joke with The Market.
Without going deep into theory, there are two ways here are simpler and more complex
Both correct and both satisfy the need above but the letter way, given it is more multifaceted, usually perfectly fits any screen resolution, whether it is 14″ or 21″ and more favorable to Website space usage.
The simple way would be to make the borders of your web page tables of your webpage to be fixed with certain number of pixels.
The most common 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 screen resolutions.
If we try to see it at 14″ monitor with 640 pixels in width, the unfriendly horizontal scrolled would appear because our fixed setting in 700 pixels is wider than 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 lodge only 60% of the screen width our 700 in comparison to 1200 screen pixels width. Why does this designing way simpler? You just will not have any problems building it, no need for resolution or cross browser optimization, as fixed pixels are read correctly under almost all browser.
The more multifaceted way is to have width of one or numerous HTML table’s columns on your site to be set in percent’s like 75% or 100% and, therefore, poses the ability to automatically broaden or narrow according to the specified percent’s, 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 this included text and graphic will thin 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 nice looking under different resolutions but need 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 your preference?
I wish you endless creativity and no more than 70Kb per page