By: Joe Lindsay

June 6th, 2004

Reader Rating: 8

"Hey Joe, can you add a link to the "Decisions" page from the "Welcome" page?"

"No problem, anything can be done given enough time," I reply.

"We need it next week."

I'm sure you've all had this conversation at some stage. And I'm sure that most of you have had to 'fix' another developer's or designer's earlier work. This discussion was the beginning of what became an adventure in re-design. Let me explain.

The Dilemma

This is the dilemma I faced -- and which we all face at some point in our Web development lives:

• Make the changes to the old page, or
• Start from scratch and build the whole thing again

The Maori Land Court Website [1] was developed in 2001 by a design firm. Like most sites of yesteryear it had things like splash pages and welcome screens before you actually got into the site. Another common practice was that of creating a Web page by taking the designer's image and slicing it into table that is a mess of precisely-sized cells and spacer images.

Then there are the mouseovers; the original spec wanted text on the welcome page in English, but it was to change to Maori [2] when the user hovered over the link. Any changes that I made to the page had to retain this functionality, and as far as practical, the look and feel of the current page.

One of my pet hates is Web pages that use images of text, instead of text (I'm sure Nielsen agrees). Unfortunately, that was how the original designers had developed the site. No doubt, there are designers around that don't want their typography ruined by a substituted font, but I think most users don't really care (after all, the site is for the users).

The Decision

Standards zealots our there would not have a tough decision, but did I really have time to spend all day rebuilding one page? I was sure that I could hack another cell into the table, create the images for the text and put it all together in half a day. Instead, I decided to give a tables-free version a go, just to challenge myself and see if it could be done.

In deciding this, I knew I also had to adhere to the New Zealand eGovernment Web guidelines [3], which recommend that tables should be avoided for layout purposes. A large number of our audience members are rural and have to contend with 9600 b/s dial-up speeds down shared phone lines that go under electric fences.

Inventory

I had a page with 15kB of HTML, a 1kB stylesheet and 46 images (54.7kB) for a total of 70.8kB. The original page [4] consisted of a picture of a whakairo (carving), comprising several slices, with the navigation text to its left. Each navigation item was associated with a translation image, an animated GIF of the words "Maori Land Court" and its Maori translation – "Te Kooti Whenua Maori", and, finally, a small icon.

The Method

I'll explain the process step by step.

The Images

I went into my toolkit, pulled out my trusty Photoshop, and proceeded to reassemble the slices of the whakairo (as an afterthought, I should have just used a screen dump). Luckily, the background was one image on its own, and not part of the slicing, so it was easy to use, as was the animated text GIF.

The icon on the original page rotated a different amount for each menu item. I decided that it was better just to use one image for the icon. The original designer may disagree but, as I have stated, the site is for the users.

The HTML

The basic structure of the document was simple: it had 8 links and some images for decoration, so that's how I built the HTML; one <div> for pictures, one for navigation links and one for accesskeys.

Lost in the Translation

I separated each navigation link into its own <div>, each with its own id. Within each <div> I created the link with both English and Maori text, each within its own <span>. My plan was to use the :hover pseudo-class to turn each span on and off.

<div id="search">
 <a href="search.htm">
   <img src="images/buttong.gif" width="26" height="25" alt="Search">
   <span class="en">Search</span>&nbsp;<span class="mi">Rapu</span>
 </a>
</div>

a span.en, a:hover span.mi {
 display: inline;
}

a:hover span.en, a span.mi {
 display: none;
}

Each <div> was then positioned absolutely using CSS.

Problems

The page worked well in Firefox. My plan was going really well -- until I tried it in Internet Explorer. I was sure my code was valid, so I paid a quick visit to SitePoint Forums [5] and had the solution to the problem in minutes. Apparently, there's a known bug in IE that requires that a property must change on :hover, or the span won't display. So the CSS became:

a:hover {
 background-color: transparent; /*hack for IE */
}

a span.en, a:hover span.mi {
 display: inline;
}

a:hover span.en, a span.mi {
 display: none;
}

Old Browsers

To my surprise, the page looked as intended in IE4 and NN4. The translation mouseovers worked, too. The only issue I had was that, because the icon was included in the link, NN4 put a border around it. I decided that my users and I could live with that.

Unsolved

When moving the pointer away from a link text in Opera 7.2.1, the English text does not re-appear. This only occurs on the text, not if users mouse-out from the icon. I am still unsure as to why this bug exists, but I suspect that I am the only user that visits our Website with Opera. I have tried using the :link pseudo-class on the a element, but this cause a few other strange display problems in different browsers.

The Results

The finished page [6] exhibited a huge reduction in size and server requests. The HTML slimmed down to 3.4kB from 15.1kB, CSS increased from 1kB to 2kB, and there are now only 4 images totalling 37.9kB -- reduced from 46 images at 54.7kB. Total page size including images and CSS is 41.3kB, a reduction of 29.5kB.

Conclusion

While the code may not be perfect, it's not bad. The page worked as intended for most visitors to our site and became much more accessible to text readers.

This project took me only half the time I estimated. The manager that requested the change was happy with the result. My next challenge is how to bring the rest of the site up to standard!

[1] http://www.justice.govt.nz/maorilandcourt/
[2] http://www.nz.com/NZ/Maori/
[3] http://www.e-government.govt.nz/web-guidelines/
[4] http://www.justice.govt.nz/maorilandcourt/oldwelcome.htm
[5] http://www.sitepoint.com/forums/showthread.php?t=157415
[6] http://www.justice.govt.nz/maorilandcourt/welcome.htm