Developer's manual

Reducing the overall filesize (server-side)

There's a couple of quick and easy things you can do to bring down the filesize:

  1. 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.
  2. 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.

But the server-side configurations are largely self-optimising - they compile on the server to include only the necessary bits of client-side code for your particular configuration, and that brings the output filesize down to a practical minimum every time. You control how lean it is by selectively using or removing features:

Reducing the filesize by removing features

The following table outlines each removable feature, how much code it uses, and how to disable that feature to make the applicable saving. Although each one only takes a small amount of code, they quickly add up to a worthwhile saving.

The exclamation marks indicate default features which are there to improve accessibility (!!) or usability (!), so those are the ones I'd be most reluctant to lose. Obviously each one of these will have some kind of impact, so please read the linked notes for each feature to help you decide whether you can do without it.

Feature Code How to disable
Ad-hoc menu and menu-item classes 2.5K Each pair of classes uses this much code, so the most efficient thing is not to have any.
Horizontal navbar 2K You can make this saving if you use "vertical" navbar alignment instead.
Menu repositioning (!) 2K Set the reposition menus to stay inside the viewport value in the $um['behaviors'] (um.behaviors) array to "no"
Navbar and menu indicator arrows (!) 2K Set the menu indicator character/image values in the $um['items'] (um.items) and $um['menuItems'] (um.menuItems) arrays to "none". You can also save filesize with this feature by using textual indicators instead of images.
Menu dropshadows 1K Set the shadow background property in the $um['menus'] (um.menus) and $um['menuClasses'] (um.menuClasses) arrays to "none"
Rigid horizontal overflow 1K If you have a horizontal navbar, set the horizontal overflow property in the $um['list'] (um.list) array to "flexible"
Keyboard navigation (!!) 1K Remove the $um['keys'] array from your custom file; this saving is in addition to the size of the module script itself.
Iframe shim 0.5K Set the manage windowed controls for win/ie value in the $um['behaviors'] (um.behaviors) array to "hide" or "none"
Select-element hiding 0.5K Set the manage windowed controls for win/ie value in the $um['behaviors'] (um.behaviors) array to "iframe" or "none"
Using images 0.5K Don't use any images; this saving is in addition to the size of the images themselves.

How it all adds up

With all optional features removed, the smallest configuration is 20K. But for best accessibility I would recommend keeping the keyboard navigation module (6K + 1K control scripting), which brings the total up to 27K. The largest typical configuration - a horizontal navbar with keyboard navigation, all optional features, and one pair of menu/item classes - is 39K.

The output code looks to the browser like regular javascript and CSS, so the files will be cached after their first use, along with any images you're using, unless a visitor has their browser set not to do that.


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.