A Simple Request

“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 that most web developers have all had this conversation at some stage. And I’m sure that most web developers have had to ‘fix’ another developer or designers earlier work.

This is the dilemma:

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

The Maori Land Court Website 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 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, look just like the current page.

One of my pet hates are web pages that use images of text, instead of text (I’m sure Nielsen agrees), but 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. But, I decided to give the table-free version a go, just to challenge myself and see if it could be done. I also had to adhere to the New Zealand eGovernment web guidelines, which recommend that tables should be avoided for layout purposes. A large number of our audience 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 consisted of a picture of a whakairo (carving), made up of several of slices, with the navigation text to its left, each with its associated translation image, an animated GIF of the words “Maori Land Court” and its Maori Translation – “Te Kooti Whenua Maori”, and a small icon.

The Method

The images

I went into my toolkit and 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 not part of the slicing, so that was easy to use as was the animated text GIF. The icon on the original page was 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.

Pages: 1 2