Folio: G3 Telecommunications
- Type
- Website
- Date
- October 2006
- Agency
- Nixon McInnes
- Skills
- XHTML & CSS
- Link
- www.g3-tel.com
I produced the XHTML/CSS for this project working from Photoshop files provided by freelance designer Alan Henning.
For the basic layout, I used the tried and tested One True Layout which I’ve used on several projects before. I started the build from scratch; although I could have used older templates from an existing project as a base, I wanted to create completely clean XHTML.
My starting point was the Article template as this informed the layout for most of the other pages. I usually start this way, then build other pages using the master styles I’ve already set, adding and removing HTML as required. For the CSS, this works well as it allows me to use a global stylsheet for master styling and then add template specific stylesheets that add to or replace existing CSS rules.
Everything was going as expected until I came to code the Product Information template. The problem was that this used tertiary navigation, and from a structural point of view, these items needed to appear as sub-items within the secondary navigation on the left of the screen. However, the art-direction for the site had the items shown as buttons above the content, but to the right of the secondary navigation.
My initial approach was to use relative/absolute positioning with some clever use of negative margins. I managed to get the tertiary navigation in the right position, but because of the absolute positioning, the content of the three column layout slid underneath the tertiary navigation. In addition, this was unusable for people who might resize their fonts. Clearly, this wasn’t a solution.
I tried several other techniques using purely CSS, none of which gave a satisfactory result. I toyed with using javascript to position elements after the page had loaded, but I dislike this approach as it wouldn’t help people with no Javascript support. As the budget was very tight and I couldn’t spend a lot of time on it, I ended up making a stand alone list that had no relationship with the secondary navigation. This wasn’t ideal but in the end was the most practical solution.
The rest of the build was fairly uneventful, although I did have some strange issues with Internet Explorer 6. Various bugs were invoked due to the interaction of strange floats, relative positioning and anchor hover states. However, these were easy to fix using IE Conditional Comments to feed specific CSS rules to IE6, which is a technqiue I now use on all my projects.
I was really pleased with this project. It was one of the quickest, cleanest front-end builds I have completed.