Site design: mechanics
Books are a text medium and, in spite of its visual content, television is regarded as a verbal medium. Movies, on the other hand, are a visual medium. To test this, close your eyes while watching a television program and do the same while watching a movie at a theater. Compare the time intervals where there is no dialog. You’ll find that with television, the dialog is nearly continous.
The point: web sites don’t seem to lend themselves to such well crafted distinctions. Sites appear to amalgamate many medium. Drawing upon this observation, there are no hard and fast rules of site design that are going to make or break the success of your e-commerce web site. None-the-less, there are still some guidelines that can improve the chances of having a successful site. In this issue we continue the series with a few of the technical basics.
SCREEN SIZE
Unlike television, one size does not fit all screens. Your audience can be using a screen display size anywhere from 640 by 480 pixels up to 1280 by 1024 pixels. If a web page is 1000 pixels wide by design and it’s being viewed on a 640 pixel screen, there will be a lot of horizontal scrolling required to take in the full page. This may ruin any carefully planned visual impact. On the other hand, if the page is 640 pixels wide and is being viewed on a 1200 pixel wide screen, text may be too small to read.
There are two ways of optimizing page size and one compromise approach.
1) Adjust the page size by using a JavaScript to detect the screen size. Adjust the content size accordingly or supply size specific pages.
2) Make the page size flexible. Declare percentage widths for table and cell parameters.
3) Compromise a fixed width page size to fit the most frequently expected screen size.
Using scripting code to detect screen size and adjust content can be complex. Serving up separate pages to fit particular screen sizes creates overhead problems with page updates. Making page sizes flexible can lead to unexpected results. Compromising page size is the simplest, and not an unreasonable approach, to setting a page size for viewing by a visitor.
The road warrior group will mostly have an 800 by 600 pixel screen size. The most common size for desktop users is 1024 by 768 pixels. With these two sizes in mind, 90 plus % of visitors will be covered.
Check the rendering of a page in different browsers and screen size at:
http://www.anybrowser.com/ScreenSizeTest.html
Get more info on using screen size at:
http://webdesign.about.com/library/weekly/aa102401a.htm
FILE FOOTPRINT:
Footprint is the total byte size of a file including any imbedded graphics, audio, flash, or other special features. It is reflected by the time it will take for the file to downloaded and render as a page in the visitor’s browser. High speed broadband and DSL Internet connections are gaining in availability but, 70% to 80% of visitors will still be using a 56K modem for their internet connection. Therefore it is advisable to design the opening or default page of a web site so it can be fully downloaded and viewed within 8 to 12 seconds. This is a generally accepted duration that the casual visitor will wait for a page. After that time, the visitor is likely to go elsewhere.
The key here is “the casual” visitor. Return visitors with greater interest in the site offerings will no doubt wait longer. However, first time visitors will probably be casual visitors and you want to keep them at the site. This means that the opening page must be presented quickly.
Estimate the download time by dividing the file footprint size, comprising all imbedded files as well as the file itself, by the Modem speed. Modem speeds are given in bits per second. File sizes are usually reported in bytes. The bit size of a file is about 8 times the bit size, making a 50KB page footprint equal to about 400 kilobits. Dividing 400 using a 50 kilobit modem, gives a download time of 8 seconds. This time will increase nearly 50% under actual TCP protocol conditions of error checking, and packet reconstitution.
IMAGES
Web site graphic images are good for getting attention and relating a visitor to the intention of the web site. Images, however, can have a large file size contributing to the page download time. The most common image file types in use on the Internet are “gif” (CompuServe bitmap) and “jpeg” (Joint Photographic Experts Group). “jpeg” is sometimes shortened to “jpg”. Both of these file types use compression to eliminate redundancy, thereby significantly reducing the file size from what it would be as a simple uncompressed bitmap file. Gif images have the advantages of supporting transparent color and segments which can be stitched together to form an animation. Jpeg images will have a larger file size for the same image but produce a better quality display.
As a rule, gif images are used for drawn objects having a limited amount of complexity and only a few colors. Such items as navigation buttons and banner ads are usually gif’s. Jpeg images are more likely to be used where photographic quality is required.
The layout size of an image as presented in the visitor’s browser will be determined either by the image size itself or by the width and height setting used to specify the image in the HTML markup defining the page. In almost all cases the width and height parameters in the markup should be the actual image size. If the parameters are specified larger than the image, the image may become pixelated when viewed in the browser. If the parameters are specified smaller, the page download time will be greater than necessary because the actual image size is larger than needed, increasing the file footprint. It is preferable to resize copies of the images to fit the page requirements.
Mel Davey is the creator of ImagineNation (http://imaginenation.com/), a full service E-Commerce Application Service Provider, offering Storefronts, Order Management Utilities, and 3rd party credit card processing.
