Design Considerations For Animated Web Sites

Bandwidth, which is the transfer rate of internet data for the user’s browser, has hindered the creation of websites with multiple media effects and enhancements.

Many techniques and option is available to help to keep website graphics and animation download time for it to a nominal amount and can include the usage of tables, colour reduction and optimization of graphics, use of thumbnails, reuse of images, optimal placements of scripts, and collection of fast loading type of web browsers including Firefox.

Several online web software tools are offered to perform various tests on your sites, like internet site garage, sites can survey, pehtoori (HTML validation service), link alarm, and site inspector.

Bandwidth Issues

It has not been in the past that this norm was the 56K modem. Today, many users (appr 55%) still utilize the 56K modems for surfing, so bandwidth must be a problem for website designers. However, with technological advances like fast cable modems, TI lines, etc, bandwidth can become less of a problem later on. However, today you have to still design websites with bandwidth in mind.

Many techniques and choices offered to assist in keeping website graphics and animation download times to a nominal amount. The following tips will help you create websites that load as fast as possible:

 

Use tables for putting graphics together to cut back the size of gif animation. Depending on what your animation is much like, tables will help reduce its overall file size. For example, you could have a picture you need to animate, but only a small part of the image will actually function as the animation. You can manually chop up the image into different pieces employing a program like photoshop, or automatically, using a special utility like Ulead SmartSaver Pro. If you use photoshop, you should place the resulting graphics back together again within your HTML editor using table cells. Programs like SmartSaver create the HTML file while using graphics already within the table cells. By slicing increase image into sections, the small part with the image that animates can be in a table cell on its own. The rest from the image inside other table cells won’t end up part of the actual animation itself, thus reducing file size.

 

Reduce the colour palette of one’s gif animation. You can decrease how big your gif animation by reducing the number of colours in the colour pattern. For example, when you have a 256 colour image and decrease its colour’s to 64, how big the animation is going to be significantly smaller. However, an excessive amount of colour reduction could possibly have an effect on image quality. Obviously, some complexities exist for animated gif creation. Fortunately, several software option is available that assist with palette and overall gif animation optimization, such as Equilibrium’s Debabilizer, Digital Frontier’s HVC ColorGif, Ulead’s gif animator, as well as online gif optimizing services, like gif wizard, and gif cruncher.

 

Reuse images in a website. Reusing images, whenever possible, is an additional way to decrease download time because of the browser downloads and places the images within the pc’s cache. For example, the use of an image on your webpage then use the same images on four other pages from the website, the style has got to download just once. Thus, download time is kept to the very least since one image downloads as opposed to five separate images.

 

Specify Height and Width with your web coding on your animated gif images. You should always specify height and width within your HTML page to your animated gif images. If you do not specify height and width inside your HTML page, then your browser will wait for the graphic to load before loading the text. You should also remember that setting the height and width with your HTML page with a size less space-consuming than the graphic will not reduce download time since the style’s file size will remain just like it absolutely was before.

 

Specify a decreased-res image to display as a high res image loads. You can create a minimal -res variation of a jpg or gif image to appear while expecting the high definition image to complete downloading. When you try this, the page appears to be load faster towards the user. In reality, the additional image actually adds to the total download time. To add a low-res variation, simply add an attribute for the image tag like the following:

IMG src=”” lowsrc=””>

Be guaranteed to use jpgs for colorful photographic images. While you could compress your photographic images as gif images, jpeg compresses colourful images with generally better results, since jpg images offer 24-bit colour in comparison with gif images’ 256 colours.

 

Substitute thumbnails for larger images over a webpage.

 

Use interlaced jpg and gif images. You can save your images as interlaced jpg and gif images that can display a preview with the images because they load.

 

Alright, now go and CREATE!