ADxMenu

Porsche.GB with new (web) engine

Nov 29, 2004 by Aleksandar Vacić 4 minute read

I was surfing the web on Friday looking for examples of good drop menus I could replicate using ADxMenu, to fill-up the examples sections. I was fairly positive I could find lots of such on automotive sites, as for some reason they tend to have them in packs.

After few attempts, I found a web site that immediately presented itself as perfect example for the use of ADxMenu, and also for CSS-based design.

Porsche GB

I present you recoded Porsche GB, using no tables and full power of ADxMenu.

Analysis

I started from the snapshot I took in Firefox on Friday, Nov 26th. One look at the web code and you can clearly see the trade-marks of last century designs:

The actual snapshot I took also had display:none hard coded on the large banner in the middle and on the second banner (composite brakes) below it. This has lead to design fall-out, as images for the upper row of navigation were misplaced, and the popup menus for the lower nav row completely covered the images (can still be seen on the live site, at the moment of posting this entry).

The page foot-print is 54kB, with additional 62kB of scripts, spread over 7 files.

Re-coding

Removal of unnecessary markup and creation of large navigation lists took me roughly 1.5h - I hate copy & paste. Coding appropriate markup for the design took less than an hour (I went for XHTML 1.0 Strict). Which left me with CSS and imagery.

On/off states for navigation images are merged into one image and with CSS development and clean-up it lasted about 3-4h.

End result was tested in a variety of modern browsers. Firefox, IE6 and Opera 7.52 display as I intended it (with small but acceptable hick-up in Opera). Safari, Omniweb and other WebCore co. have no support for min-height (which I used for navigation lists). Thus I was forced to compromise on bottom navigation. Instead of having 75-80px for bottom position of the submenu, I used 50px so you can actually move the mouse over to submenu. In Opera 6 it looks just as in Safari (sans the submenus, of course), and almost perfect in IE5/Mac - if you know why is that content block moved to the left, please tell.

All in all, it was a nice exercise for a lovely grid design, and a wonderful example of menu use.

The page is now 8.4kB, which means that savings are over 80%. It also has several .css files which would be merged into two files if I were doing this for production site + .htc file for IE - all combined it makes 13kB, giving another 80% saving on external files. Since I have merged navigation images I have very important savings on HTTP requests - about 2x down from the original number.

Benefits are more than obvious.

Last thoughts

For this design, I think that images in the navigation are an overkill. The page is graphic heavy as it is, and I think that it looks better with just words. Original site uses animated GIFs for the text - I used text for better usability, with few compromises to account different text size. I also fixed the size of the header area to match the width of the grid.

The grid size is 783px which is 13px above what I consider the safe limit. Hence, in 800x600, horizontal scrollbar appear, so this should be fixed as well.

If you remove some of the banners in my recoded page, nothing will break - elements will simply reflow. In current design, this is not the case.

Both ADxMenu and modern web design technologies simply shine in this real-world example. Porsche is not the only design with lots of menus and I can only hope that 2005 will be the year when nested tables and unnecessary use of Javascript will start to disapper significantly.