“Mosaic Layouts”: How And Why To Avoid Creating Puzzle-Looking Websites
 by: Jonathan Tunn and Alexander Grasmik

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.

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 performance testing with 4 years of experience on board.

Article source: http://www.softwaretalks.com/mosaic-layouts/