A challenging website project
2004 at 02.47 am posted by Veerle Pieters
Let’s talk a little about some of the latest projects I’ve worked on. It started all with an update of the company logo, and housestyle together with a new brochure ending up with a new design of the online newsletter and website. Needless to say the website was the most challenging part of all.
A website is always a challenge but this one was a special one since I’ve implemented a few things that were new to me and it is also the first one where I used a stretchable layout. One thing is for sure, stretchable layouts give me a serious headache and nightmares.
These are some of the technical highlights of this project.
But now that it is finished and I look back at it I’m glad I did it and learned so much from this experience. The biggest challenge was for me the creation of the top and left navigation. For the top navigation I’ve borrowed a smart technique from Didier Hillhorst. It is a seriously cool technique that is really worthwhile looking into called Navigation Matrix. Thanks so much Didier ;-)
The left navigation main menu buttons use replaced images. So in the code you’ll only find HTML text, the images are defined by CSS. This, in combination with vertical dropdowns for the submenus that reveal when you mouse over them gave some compatibility problems that I needed take a step back and leave this out. In the original version there were 3 different stylesheets: 1 for Safari, Mozilla, Firefox, Netscape,... 1 for and I.E. 6 Windows and another one for I.E. 5 Mac only (since the menu didn’t seem to work in this browser). For I.E. 6 only text was used for the main navigation because of the trouble that the images gave me. This way the look differed too much with browsers that follow the standards and where I could use these images. But the fact that there was such a difference in look didn’t please my client. So I took one step back. The current version only shows the main menu buttons and once you are actually in a section the submenu is revealed. If I would have used only text for the menu (and no images for the main buttons) I think there would be less problems. Here is an idea I picked up from A List Apart to base this menu on.
Another nifty feature I used in this site is the enhanced Shaun Inman’s IFR (Inman Flash Replacement) technique by Mike Davidson. The main sections use a simple gif image, but the sub titles use this technique which I find very impressive. It’s thanks to those 2 geniuses Shaun Inman and Mike Davidson that I was able to achieve these nice titles using just a simple Flash file and pure HTML text. Now THAT is seriously cool. Again thank you for this.
Implementing the navigation on top and left wasn’t easy but dealing with a stretchable layout is even worse. Some of the problems aren’t even solvable since the content doesn’t always flow nicely like you would like it be. For browsers that use standard W3 guidelines you can set a max-width. But we all know that Internet Explorer 6 doesn’t support this. Some things are uncontrollable. My layout bursts from graphics that it makes things so difficult. A stretchable layout is all good and well in a simple design with less graphics. In my layout I used some nested floats that make things a little more complex to deal with. I’ve made a simple sketch to give you an idea:
As you can see there are a lot of div containers that make this layout. So you can imagine it isn’t obvious to make this work in all recent browsers and platforms… And I’ll never make that mistake again: doing this job for the same budget as for a fixed layout. It takes way too much production time because of all the extra testing and trouble you run into. So if I can give a good advice, technical specifications are important (now more then ever) in your price offer. Define as much as possible: platforms, browsers, screen resolution, layout (fixed or stretchable/liquid). Another advice: also add a separate price if you need to make it look and work prefect in I.E. 5 Mac and I.E. 5 - 5.5 Win since these are the most difficult ones.