Website re-aligned and search added

.. and still improving, well we should

This post was due for a long time, but I have been just too busy running after an mission impossible.

It is many moons ago that I posted about the Google Mini and the amount of fun it was to implement it. It was easy as well.

Also many moons ago I posted about the fun it is to develop websites the right way. I wrote about the speed with which one could change the original layout from a width of 768 pixels to 1024 pixels.

So far so good

Some weeks ago (it seems many moons again), after all those moons, we finally put these changes live. So, what the heck was I saying about speed and fun? Am I completely insane?

Well, I might be, for still working here, but more about that later, I guess.

Search webservice

As said I had the Google Mini implemented in hardly no time at all. I used a simple wrapper around the API to make it available as a very simple webservice. It had only a few methods.

1. A simple search method, basically just the one input field, that you can feed a search query. Basically the website just passes the value from the search box to the webservice.
2. An advanced search method, as you would expect this adds the extra fields that you know from the Advanced Search page like Big Mama Google provides.
3. Navigate page method, which is used for moving to the next or previous page of results.

These three methods are more than enough to get the information we need from the Google Mini. Actually it is more than we want as we as yet do not use the advanced search method.

Presenting the results

The webservice methods all return the search results in the standard XML format to the calling web site. The presentation of the results in a readable fashion is deon on the side of the website. Just a short bit about our website's architecture.

We have a great many different types of pages: home page, product cockpit pages, information pages, form wizard pages that share many common elements like headers, navigation, footers, sidebars etc. To make development and maintenance easy we have structured these as containers that are loaded with general and specific components. The type of container is decided in the CMS and the code then loads the container, which then in turn loads the controls using information from the CMS.

Thanks to the wonders of Object Orientation and a good implementation of that in our framework it was a breeze to create a specific SearchContainer. Just a matter of picking the right base container type and creating a specific SearchResult component.

The SearchComponent parses the XML that the SearchService returns. Using this information some sub-components (inner classes) are created, like: the search box with prefilled the search term, the serach button, the navigation to result pages, a list of the results, with title and a snippet.

Using as little HTML as possible (the results are listed as definition list) and a special stylesheet for this container the layout stays consitent with the rest of the site.

Providing a search box on each page with of the site was also very easy to do. Only the Navigation component had to be changed and ready!

Redesigning or better realigning

Our web site was originally designed for a maximum width of 800 px. Which is a bit an outdated requirement. Today the screen size you are looking for is slightl different. I wrote about the new standard in screen resolution some time ago. So, we wanted to stretch our site up a bit, making pages shorter and having more real estate for content.

So, not really redesigning: the face of the site would remain the same, it would only get wider. A typical case of realignment. So, a case of stretching the stylesheets and the background images. Not too difficult, but just a lot of work. Thanks again to our Container based approach (also used to split up the stylesheets) this was a relative simple job. With hardly any real code changes. The real code being C# and the unreal code being CSS.

Then when a new homepage design was proposed it was decided to implement that in one go. This caused some delay. Again this was not a too difficult task: it was after all only one container that needed changes. But there were some new content items going in.

All in all, chunks of chewable size, but together still quite a bit of work. It had impact on every page of the site. And that's where things went a bit wrong.

What went wrong?

These months we are extremely busy with (re-)launching improved products. As a Ducth insurance company we are focussed on the health care insurance for next year. People can only change during the month of December so we should be up and running before that. Also a new Car insurance is launched in December. The wider layout was needed for the health insurance wizard as there are just so many options a customer can choose from. Presentation-wise more space was needed.

All available resources were needed for these two products. And needed for quite some time as well. So, management decided that we had to push the Google Mini / Wider Layout project to production as soon as possible. That's when corners were cut, shortcuts taken, very limited testing done. And so errors were not found before the project went to production.

The errors were not killing the site, but they are disrupting here and there. And hurting my pride.

What went wrong then?

It's not too bad to have minor and less minor errors in a production web site. It's bad if you ignore them. You have to fix them.

But since two new major products were to launch it was decided to use all the available workforce on these products and not fix the errors. resultig in more errors in the projects that are coming to the web shortly.

To me, that's not very clever and not in line with my quest for quality.

Is there a bright side?

Yes, I think there is some good stuff in the Google Mini / Wider Layout project. After all, what was done was built in relative short time and thanks to our site framework it was easy to implement. We should have tested better and longer. I hope that is a lesson learned for the future.

But then again the best hope was Bob Hope.

Bob Hope

My next door neighbor just had a pacemaker installed. They're still working the bugs out, though. Every time he makes love, my garage door opens.

Tags:

• re-alignment
• redesign
• search
• Google Mini