www.websyte.com/subject Web Knowledgebase

Over 46,000 free articles designed to give you useful information on how to save money, make money, improve your health, happiness, and relationships.

“Mosaic Layouts”: How And Why To Avoid Creating Puzzle-Looking Websites

Google
Web www.websyte.com/subject
Select a Topic

Addiction
Adsense
Adwords
Affiliate
Article
Auction
Auto And Trucks
Auto Insurance
Baby
Bankruptcy
Bathroom
Blog
Business
Business And Finance
Children
Computers And Internet
Cooking
Credit
Dating
Decorating
Depression
Diabetes
Diet
Dog
Dog Training
Domain
Dvd Reviews
Ebay
Education
Email Marketing
Family
Fishing
Food And Drink
Foot
Furniture
Gadgets And Gizmos
Garden
Golf
Guitar
Hair
Health
History
Home
Home Business
Home Mortgage
Home Refinance
Home Schooling
How To
Insurance
Internet Marketing
Investing
Ipod
Job
Kids And Teens
Kitchen
Learning
Legal
Make Money
Marketing
Marriage
Massage
Maternity
Menopause
Mortgage
Online Business
Parenting
Party Planning
Pets And Animals
Photography
Real Estate
Refinance
Relationships
Remodeling
Retirement
Rss
Sales
Save
Self Improvement And Motivation
Shopping
Site Promotion
Speaking
Stocks
Success
Sudoku
Tips
Travel
Travel And Leisure
Voip
Wealth
Web Design And Development
Website
Wedding
Women
Work At Home
Writing

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/