Tricks and Tips

by Joe Gillespie — Jan 1, 2000

All modern browsers can display background images. These can be small rectangular images that the browser 'tiles' to fill the window. The background of this page, for instance, is a small GIF file that repeats to fill the space.

Each single 'tile' can be as small as you like but although a 2 x 2 pixel tile will download very quickly, it requires more processing time to fill the screen, so screen updates will be painfully obvious.

Don't make background tiles too small - experiment with different sizes and number of repeats to find the best compromise between downloading time and screen redraw.

Some older Mac OSes have problems with background tiles less than 64 pixels wide so a minimum tile size of 64 by about 32 is optimal.

Remember that type will usually have to go over your background image. If the background has too strong a pattern, it will make the type hard to read.

You can put dark type on a light background and light type on a dark background without too much trouble.

When you have a mid tone background, you may be able to use colour contrast to make the type stand out i.e. yellow on blue, but you stand more chance of compromising visibility.

Multiple 'instances' of a single GIF file

tiletiletiletiletiletiletile

Browser background images are created from small GIF or JPEG tiles and will download and display fairly quickly but any GIF or JPEG image, once downloaded, can be reused in multiple 'instances' on a web page with little or no extra overhead. The browser stores all images in its 'cache', even after you switch off the computer, and they stay there until the cache is full and it offloads the oldest images to make space for new ones. You can aslo empty the cache manually in you browser's preferences dialog.

Fancy rules, logos, bullets and even animated icons can bring a dull page to life and won't keep the reader waiting.

By keeping the top portion of web page relatively free of large graphics, the user can start reading the page whilst the more serious downloading is happening out of sight 'down below'

Progressive rendering and interlacing help to mask the time delay in downloading larger JPEG and GIF files

Another trick to give the impression of faster downloading of larger pictures is to use 'progressive rendering' or 'interlacing'.

Here the image appears in it entirety almost immediately, but in a low, chunky resolution. As more of the image is downloaded, the resolution gets better until eventually it has rendered completely.

This is preferable to watching the slow progress of a linear 'wipe' from top to bottom as the main elements of the image will be recognised at the beginning, except for small embedded type, which will not be readable until near the end of the image download.

Nevertheless, the constant improving of the image resolution gives the reader something 'slightly' interesting to look at and masks the passage of time - you know how time passes more slowly when you are bored!

Progressive rendering has to be introduced to the original file being saved and depends on having the right program to do it.

The other possibilities offered by the GIF89a format are transparency and animation.

Transparency is where you can choose one colour from your GIF image to be 'no colour' - like painting it on a clear acetate overlay.

So you could change the image's normal background to 'clear' to get the effect of a cut-out halftone on your web page.

I would advise that you make the background of your transparent GIF file similar in colour to the eventual background colour to avoid having an anti-aliased fringe of the wrong colour.

This technique is particularly useful for 'floating' type and irregularly shaped pictures.

animation

This is a sequence of nine images combined into one GIF89a file with a .15 second delay between each frame

The GIF89a format also supports 'animation'. This is just a multiplicity of same-sized images with a pre-set delay between showing each - all stuffed into one GIF file like a flip book.

Again, you need a suitable application to create these animations and there are shareware programs available on the Net for Mac and PC.

Be aware that animated GIF files, if running too fast, can cause problems on web pages making it difficult to click on another button or link.

Animated GIFs in mouse rollovers are not very reliable, some browsers either stick after the first frame or don't handle the transparency correctly.

Here is a simple JavaScript routine that sequences a series of graphics files, which can be GIFs or JPEGs. It's running slowly deliberately so that you can see the individual frames.

animated rollover

Yes, you can do animated JPEGs with this code too, you are no longer limited to GIF animation for mouseovers and such.

Use JPEGs for photographic images and GIFs for graphics with flat colours or transparency.

Bear in mind that some browsers don't support the JavaScript document.image model, most notably, MsIE 3.x for Windows.

Also, remember that all the files have to be loaded first, unlike animated GIFs that give a kind of pseudo streaming effect. I like to do this within the <BODY> section for backward browser compatibility.

Keep the file sizes small and don't have too many.

Have a look at the source for this page. I have commented the code so that you can see what is happening.

This more practical routine was originally developed to provide a smooth opening and closing of a door on MouseOver and MouseOut but it could equally well be triggered by an OnLoad or OnClick event.

This example has five frames created in StrataVision by Carla Otto for a very fine virtual gallery. The JPEG files have been given sequential numbers, which is not essential, but makes for easier reading of the code at a later date.

onMouseOver, the pre-loaded JPEG files are displayed in rapid succession with an inter-frame delay of speed milliseconds. This uses the JavaScript SetTimeout and ClearTimeout functions.

onMouseOut, the sequence is reversed, but this can be omitted or used to go back to the first frame.

The variable max declared at the top of the JavaScript code sets the total number of graphics files for the arrays and frame count.

The next example takes the idea a bit further. This routine plays a sequence of pictures of varying sizes under JavaScript control. There are six GIF and six JPEGs but any combination will work

Play buttonspeed 1speed 2speed 3speed 4speed 4

The Speed control buttons, 1 to 5, use a technique I call 'latched rollovers'. These work like radio buttons. The last one clicked always stays down until another one is clicked.

Initially, the speed is set to 3 (medium). 5 is fastest (no delay between frames) and 1 is slowest (400ms delay).

The Play button is momentary and springs back up as soon as it is pushed. This requires a delay to be added as there is no mouseUp event in JavaScript.

Each button has three states - Up, Down and Rollover. The source code is a little tricky because of the error checking involved. Pressing a button when the sequence is running would confuse the timing loops so button presses have to be inhibited when the sequence is running.

This technique has many uses including animated rollovers, picture flicking and wipe effects.

The pictures in the sequence could have URLs attached to them - be buttons too - but I have omitted that for the sake of simplicity.

Another use is for simulating short video clips without the need for plug-ins. You will find that you can get off with more highly compressed images when they are moving because the eye doesn't have time to dwell on the compression artefacts.

Just keep the first image, which remains static, of a good quality.

The technique can be extended to provide a different delay for each frame by using another array to hold inter-frame delay values in place of the constant 'speed' variable. I'll leave that for you to work out :?)

GIF Animation Tips

Perhaps the easiest way to animate your Web page is with GIF animations. They don't require special plug-ins and are read by most browsers.

A GIF animation is a little slide show in which two or more slides, or 'frames', display in sequence to create the illusion of movement. The animation can be short and small in size, as is appropriate for banner ads, or a long, multi-frame animation that might be used in a browsable CD-ROM-based marketing project.

To make a GIF animation, create each frame in a paint program such as Photoshop and save it as a GIF or create it in the GIF animation program itself if has good drawing features.

Next, copy the frames into your GIF animation program and arrange them in the order you want them to play.

You then have to choose from several options.

Do you want the animation to loop (play over and over again) or to play just once?

How long do you want each frame to display before changing to the next frame?

How do you want the background treated? Does each frame load a complete new background or just the bare necessities?

Optimization

Recently I've been hearing that click-through rates on banner ads diminish when banners go over about 14k.

This GIF animation is a hefty 32K. To slim it down, I could replace the scanned fish illustration with a flat color illustration. The dithering on the fish's body is the main culprit, especially since the fish's fins and mouth move, requiring those parts to load three times.

In contrast, the three flat-color bubbles would have minimal effect on file size.

Another way to reduce file size would be to eliminate the fish's moving parts, leaving just the bubbles rising to the top.

Making lean, fast-loading GIFs is an art form in itself. Experimentation will help you learn the ins and outs of it.

Loadtime is determined by three factors:

  1. Number of frames in the animation: the fewer the frames, the faster-loading the animation.
  2. The file size of each individual frame. GIF animation frame size is determined by the same rules that govern GIFs in general: low bit depth and long runs of flat color make the leanest files. Highly dithered or photographic images make the slowest, fattest files.
  3. Frame optimization. With highly optimized frames, each new frame is able to reuse most of the background of the previous frame, so that only the new or moving part of the next frame needs to be downloaded.

    Frame optimization works well with flat color images, but not with photographic or dithered images.

Click to see Rudolpho and Angus, jumping stars of my sidekick Dave Stephen's Fantastic Flea Circus.

Dave used a variety of tricks to make his comic-book style animation come in well under the required 100 k file size limit.

Besides using flat colors and a limited color palette, Dave discovered that restricting his palette primarily to pastel colors helped reduce the file size.

Even though the animation is large at 362 by 361 pixels, with 14 frames, it's still only 80 k.

It's a good idea to save a copy of your animation prior to optimizing it - making changes later will be much easier.

One last step before publishing your GIF animation is to upload the file to your server, then check it out on as many platforms as possible.

GIF animations tend to run faster in Web browsers than they do in the programs used to create them. I've also noticed extreme differences in how they run on different platforms.

For instance, one animation we made from a StrataStudio Pro illustration ran slowly and elegantly on our Macs. But on the client's NT, it ran almost sickenly fast.

Also, check out how the illustration looks as it streams onto the Web page. GIF animations begin running as they download and you may experience undesirable effects.

One final consideration. Is that GIF animation really necessary? Does it enhance the viewer's experience of your Web page or just become an annoying distraction that will turn people off to the message you're trying to deliver?

Think twice!

How to get your web site listed on search engines

Getting listed on search engines is crucial for every web site. The majority of web surfers use search engines to find what they are looking for on the web. If your web site does not have a good ranking on the most popular search engines, chances are your site will never be seen. The following tips will help you to get your site listed:

Use META tags

ETA tags are tools for helping a web site to get indexed correctly by many of the major spider based search engines. They are lines of code that go into the header of the HTML source document.

Since spider based search engines index web sites based upon what they find in the HTML code of the site, META tags help to ensure that the visiting spider finds the information you want. The two tags that are the most important are the description tag and the keywords tag.

The description tag gives the search engine the description of your web site. Without this tag, search engines will usually take the first text it finds from your site and make that the description.

The keywords tag tells the search engine exactly which keywords you want your site to be searchable under.

Without this tag, a search engine will choose words for your site to be searchable under from the title and text of your site. It should be understood that META tags are not a turnkey solution for getting your site to the top of search engine lists. They will help to get your site indexed correctly and they increase the relevancy for the keywords you choose but they do not guarantee top placement.

How to create META tags:

You can create the META tags for your web site manually. Just add them into the <HEAD></HEAD> section of your page something like this:

<meta name="description" content="A site dedicated to the graphic design of web sites"> <meta name="keywords" content="Web, home page, design, website, business, media, communications, animation, graphics, marketing, page, designers, new media, typography">

You can find useful information on writing meta tags at http://www.vancouver-webpages.com/META/

Submit your web site to the most important search engines

When every page of your web site has META tags, you have to submit your web site to the search engines. Go to every search engine you know, click the "Add URL" link, enter all necessary information and click the "Submit" button. This is a time consuming task but it's worth it.

Wait

Many people expect to instantly get a lot more hits after registering their site. This will not happen, and anyone who promises such results does not tell the truth.

Registering your site will get you more hits, but it will take weeks or months for the increased traffic to become noticeable. After you register your site with a particular index, it can take anything from 5 seconds to 5 months for them to actually list you, if in fact they actually do. Registering at a particular index doesn't guarantee that you'll actually be listed; many indexes are very selective and only list a small percentage of the submissions they get.

The Mac OS based application VSE Be Found helps you to prepare your web pages so that they are more likely to show up on a search. The information VSE Be Found offers is based on reputable resources such as http://www.SearchEngineWatch.com and http://www.nua.ie

If you use a PC, then check out SwissArmyApp http://www.swissarmyapp.com/.

For more information on Web site promotion, have a look in Suzanne and Carla's Mega List of Web resources. http://www.wpdfd.com/resources/Promotion.htm

Johannes Selbach is President of VSE-Online.com, a well-known software developer for Apple Macintosh computers. You can find a free downloadable demo version of VSE Be Found and an interesting partner program at http://vse-online.com

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float