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.
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:
- dozens of
trans.gif(usually calledspacer.gif) images - extensive use of inline scripts and styles (even with several external files)
- lots of nested tables
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 800×600, 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.
The bottom mouseovers don’t line up in Firefox 1.0 or IE 6.0 SP2.
Is this because of the “compromise” you had to make?
Good job overall… I have followed your site for awhile after discovering your WCH work. Keep it up!
You mean “not line up with upper image edge”? If yes, then yes :), that’s the compromise.
Without min-height, the height of bottom nav row is 2x smaller, so the submenus would then be out of reach.
wow… impresive
very impressed! so good to see an example of a big commercial complex site using inline js and nested tables redesigned in standards. I only started making websites last year, and try to make them using web standards, css, accessible etc. This often leads to discussions with other webdesigners: they don’t care. It it looks ok (in IE of course), then it’s good enough. I’ll show them your example ;)
The real proof of sucsess would be getting porsche to use the new design.
I have been following your site for a while and have recently used ur ADx menu. But I am stuck at one place. I want the dropdown menus to appear in horizontal fashion unlike the one in the porche website where it appears vertically.
Is it possible? Any help would be greatly appreciated. :)
Since the menus are css-driven, it’s a matter of writing different CSS, that would place the submenu items one next to another, similar to main menu items.
Something like:
#menu li ul {width:auto;}#menu li li {width:8em;}
Actually this is not entirely true!!
In fact You have done a rather big miscalculation. You should have put in a standard link (from their site) not a #, this would increase the size considerably, depending on how many links and the amount of characters a link uses.
I tried the same thing with a danish IT-News site, and when i put in the appropriate links, it added another 10kb to the size! However I still managed to get more than 50% code off, even without optimizing the stylesheet!
Claus, I agree.
I figure it would account for 20% less in the savings department. I did not copied all as my main intention was to make usage example for the ADxMenu. It does not change the overal impression, though, as you have noticed too.
You’re right Aleksander.
No matter what You do, it still saves a lot.
Especially since You often kill all the javascript mouseover effects, which takes a serious amount of codingspace, and on a page like the porsche frontpage. There really aren’t that many other elements besides pictures.
Hmm… someone else (hint… I know him) re-made the Porsche USA into XHTML+CSS… and even published the results on porsche.com/usa/ :)
Nice job you did, by the way.
Philipp, nice looking site (ADxMenu would still rule here :)), but with one hidden problem. Background photos are placed in the directory called banner — string every ad-blocker out there is blocking by default, including AdBlock extension in Firefox. See this screenshot.
You could tell your friend ;) to rename that directory.
I made a CSS roll-over menu, but in Firefox 1.0.6 and 1.0.7 does not preload background images. I saw your example and it loads with no issues. I tried to see what the difference is, but I did not manage to find the problem. If you have 5 mins…
http://clients.zenstudio.biz/minisvema/test.html
Sincerely yours,
dio@unlocking.ro
Florin, I looked at your example and it loads ok for me — not sure what I should be looking for…
Scenario in which images would not preload is only when new images are used on a:hover or similar, instead of background-position trick.