Search
Related Links




    

Informative Articles

2much.net Links To Sex.com In Traffic Deal
(Montreal) January 26, 2005 - Live video chat software creator 2much.net announced today that it would be offering free, targeted traffic to new clients of their LiveCamNetwork 1.9 system. 2much and Sex.com, both Canadian companies, finalized the...

How To Enjoy Low Cost Mobile Computing
The Internet has become common source of information and with increased business and personal travel it is almost a necessity to have a laptop computer with wireless Internet access. The new laptops built for WiFi and the WiFi Hub service...

Top Ten Things to Ask Yourself About Your Website
1. Does it download fast? "Most website crafters are in T1s, LANs and DSL, yet only 7% of the market has broadband and that's leveling off," says Bryan Eisenberg, in "Future Now." "Most customers surf at 56k or slower and roughly 60% still surf...

What Is Voice Over IP (VoIP) And How Does It Work
Introduction To Voice Over IP (VoIP) The way we make phone calls is changing. In fact in many circumstances things have already changed. Take long distance calls for instance, many service providers are already using a technology called Voice...

Wireless Alphabet Soup: What's the Difference Anyway?
At this point, you might have read a few feature lists for wireless cards, and you're about to ask a very common question: what's the difference anyway? Well, answering that question requires a brief rundown of the history of wireless...

 
"Mosaic Layouts": How and why to avoid creating puzzle-looking websites.

When your visitors browse a webpage, their browsing experience depends on many things that you already know - connection speed, computer hardware and software, internet provider are just a few. However, the role that good web design plays in browsing speed is often under-recognized. Pictures and graphics as a navigation aid are often a powerful 'hook' for customers, and can easily enhance a browsing session. When incorrectly used, they can create bottlenecks that hamper the message your site needs to send.

Basically, if you are making an image mosaic, you need to remember a pair of important rules:

Rule 1: The page load time increases together with the number of page elements, even if their total size remains the same.

Rule 2: However, merging page elements will lead to a longer wait until you visitor sees the first portion of your webpage. You need to keep a balance.

In designing a webpage, you have to set priorities. Is your goal a fast browsing experience or maximum visual impact? Will your customers wait for long enough or will they go elsewhere?

Web designers using graphical navigation have many choices - to include graphics and text, to just work from one large image with several navigation elements, or to load many small ones. The latter is a popular method today, but can lead to slow access times. This slowdown is particularly noticeable on dialup connections, but because server requests are less affected by download speed, if you have a bottleneck in this area it can affect all of your users.

Let us examine the server request process:

Step 1: User clicks a link, and the browser sends an HTTP request to the server;

Step 2: The request goes through Internet hosts and routers, and then reaches the server;

Step 3: The server processes the request and sends the HTTP response and data back;

Step 4: The response goes through the Internet, usually on a different route, and then reaches the browser and the element rendered by your browser, and displayed on your screen.

How can you calculate the effect of this complex process on the customer experience? There are two main factors involved: the "Internet latency time" and the "HTTP request".

The typical minimum size of an HTTP request is 256 bytes. This means that when browsers request an image of one byte in size, the browser needs to send a 256 byte HTTP request on both of its server connections, and the server has to send back an HTTP response of the same size, along with the one byte of content. You can use the following formula when calculating the contribution of HTTP request delays:

HTTP Time Loss = (4 kilobits) * Elements / Bandwidth in kilobits per second

In essence this means that on a regular website, where the number of page elements is between 10 and 30, HTTP overheads will add


significantly to your load time. For example, in a page with 50 elements, and a 56kbps connection speed, 3.57 seconds of page load time is wasted. Let's say the page size is 100KB. It means that the 'expected load time' is 14.28 seconds but actual time is 25% greater.

Internet latency time involves how the packet (request) gets to the server and back (steps 2 and 4). The amount of time this journey takes is known as "ping time". The shortest possible ping time to the other side of the world is 85 milliseconds. That is because 85ms is the time the electrical signal needs to travel to the other side and back in a straight line through the Earth. Of course, the shortest possible ping across the world is 133ms, as we cannot cut through the Earth. In practice on overseas websites, the actual ping is often higher, over 300ms not being unusual. To local sites inside the USA and Europe, typical ping time can be 100ms or lower (Source: http://www.internettrafficreport.com).

Internet latency time loss = Elements * (PING in milliseconds / 1000) / 2

In the above formula, "2" is the necessary correction factor given that browsers usually make more than one connection to the server.

It is possible to incorporate ping delay time and HTTP header request delays, described above, into a final formula:

Total loss of time = Elements * (4 kilobits / Bandwidth + PING / 2000)

Despite the growing penetration of broadband in the world - according to Nielsen NetRatings, over 60% of US households and 85% of US work users are now broadband equipped - many users still suffer from slow page load time. This can drive users away and does not encourage return visits.

Remember that just decreasing the size of the smaller images on your site doesn't help significantly if they are already less than 500 bytes. Try to decrease the number of images by combining them into one or more large images. You can use image maps for this purpose, which work from the position of the mouse on the image, and are a good way of cutting down on the problems caused by fragmented images.

The quickest way in grasping the "Mosaic Layouts" concept is that every ten elements you add to your site - no matter what their size - will commonly add an extra second to your load time.

Article URL: http://www.so ftwaretalks.com/mosaic-layouts/

About the author:

Jonathan Tunn is a staff writer for SoftLogica covering personal technology. He studied Journalism at RMIT University in Melbourne, Australia, and acquired his IT background at a transnational telecommunications company.

Alexander Grasmik is a marketing manager for SoftLogica. He specializes in web development and p