Developer's manual

Reducing the overall filesize (client-side)

There are quite a few things you can do to bring down the filesize; some are quick and easy, others more involved. The easy ones first:

  1. save an average 7K by using a plain CSS style sheet instead of the script-generated stylesheet.
  2. reduce the size and number of server requests by limiting the use of images - for example, don't have background-images in the navbar or menus.
  3. save another 6K by not using the keyboard navigation module - although this will of course reduce the overall accessibility of the menu, by limiting keyboard access to the navbar.

Other ways of cutting down the code size require a bit more consideration:

Concatenating your custom file

You can reduce the size of your udm-custom.js configuration file by 10K or more, simply by removing most of the comments and whitespace from within the customisation arrays. You'll still be able to edit it later on by referring to the online or downloadable manual for details of each variable.

So for example, this custom array:

//menu behaviors
um.behaviors = [
	'250',      // open timer ["milliseconds"|"0"]
	'600',      // close timer ["milliseconds"|"0"]
	'yes',      // reposition menus to stay inside the viewport ["yes"|"no"]
	'default',  // manage windowed controls for win/ie ["default","hide","iframe","none"]
	];

Can be reduced down to this:

um.behaviors = ['250','600','yes','default'];

Observers will note how the original array has a trailing comma, while the concatenated array does not. The trailing comma is there purely to reduce potential confusion when using the expanded array; leave it or take it out - it doesn't make any difference.

Anyway have a look at the following two files and you'll see what a profound difference this makes overall - the filesize has dropped from 13K to 2K:

Using the "lite" or "ultra-lite" menu script

The main menu script is also available in two stripped-down versions, so you can choose to sacrifice features you don't need or don't mind losing in favour of smaller, and therefore faster scripts:

If you want to use one of these versions simply change your udm-dom.js script include to point to that instead - you should already have them in your udm-resources folder. Then note which features are not available:

udm-dom-lite.js

As udm-dom.js except:

  1. reposition menus to stay inside the viewport doesn't happen
  2. menu dropshadows are not supported
  3. popup menus are not supported
  4. rigid horizontal overflow is not supported
  5. there are no menus in Mac/IE5

See the "lite" menu script demo to see it in action.

udm-dom-ultra.js

As udm-dom-lite.js except:

  1. there are no menu indicator arrows
  2. there's no support for modules or extensions, or any other API scripting
  3. dynamic menu creation is not supported
  4. menu classes do not automatically cascade

See the "ultra-lite" menu script demo to see it in action.

How it all adds up

With a plain stylesheet (average 6K), a concatenated custom file (2K), the required control script (5K) and the "ultra-lite" menu script (11K) - the smallest configuration is 24K. But for best accessibility I would recommend keeping the keyboard navigation module (6K), which means using at least the "lite" version (16K), and bringing the total up to 35K. If you use the full menu script then it's 40K.

All the scripts, style sheets and images will be cached after their first use, unless a visitor has their browser set not to do that.


Search

We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.

-