Excited about client work
Posted in News on: Thursday, April 12, 2007 by Paul Boag
I don’t talk much about the client work we produce at Headscape, but I am really excited about our latest site and so wanted to share a few thoughts about it with you.
We won the work at least partly due to the boagworld podcast, which in itself is an encouraging start. It proves that guerilla marketing really works and also, clients we win via the podcast tend to be more switch on to the web and our way of working.
The job was to redesign the Visit Thames website from the ground up. New content management system, IA, content, design… everything. It was a big job and a very tight timescale. In fact the deadline was so tight that we initially turns the project down. This is something that we have often talked about doing on the podcast but is hard to do in real life. However, our strategy of not committing ourselves to the impossible proved correct and the client agreed to move the deadline back just enough to get us onboard.
Despite the new deadline this has always been a very tight project and there is still a lot still to do on the site. However, the initial version is a massive improvement on the old site and I wanted to tell you about a few of the cool things we have done.
AJAX goodness
One thing I like about this site is that it uses AJAX and JavaScript but doesn’t rely too heavily on it. The client side code enhances the user experience rather than being an integral part. You can give feedback or send to a friend without leaving the page you were visiting. You can add items to your itinerary without reloading. You can get ideas for trips without jumping from page to page. In short the site implements the principles of progressive enhancement and HIJAX.
Kick ass content management
There are also loads of content management facilities that unfortunately we cannot show you. We have made significant modifications to our in-house content management code base allowing site administrators to do all kinds of cool stuff. Functionality includes:
- Permission and workflows
- Geocoding points of interest using Google Maps (like Google My Map)
- Building up pages from a huge number of modular elements
- Building and managing your own forms
- Comprehensive reports on all site forms
- Personalized dashboard
- Powerful image library allowing basic image editing
- The ability to create your own domain shortcuts to specific pages
- Content expiry alerts
The list goes on and on. All of this is built on .net, which may not be the trendiest language in the world but certainly proved hugely powerful and flexible for our requirements. Another nice technical aspect is the fact that the majority of data is stored as XML rather than in a rigid database table. This allows huge flexibility in the management and organization of data.
Google Maps on steroids
One of the primary functions of the new site was the ability for users to find points of interest, which they may wish to visit when spending a day on the Thames. In total the client had 15000 points of interest that he wanted to give users access to. Not only did the user need to know basic information on these points, he also needed to know geographically where they were. The obvious conclusion was to plot them on Google maps.
Of course the biggest problem with Google maps is that it isn’t very accessible. We therefore also wanted to show the points as a list in addition to plotting them on a map. Our other concern was that it became obvious very quickly that even plotting a fraction of 15000 points was going to create serious performance problems.
Using a big blob of AJAX goodness we managed to overcome both of these problems. Basically, each time the map loads we grab the boundaries of the map and call back to the server, only loading in points that appear within those boundaries. Every time you drag the map it calls back and gets a new set of points. Users that don’t have JavaScript enabled can still use a traditional search option to return points based on postcode or place name. Try it for yourself and see what I mean.
Now, the system isn’t perfect. There is a delay each time you drag (although to be honest most of the time is spent calling back to Google) and we have had to limit the zoom level to stop too many points being called back. However, we are working on ways to improve this and it is still a pretty unique solution.
Task focused functionality
Right from the outset we wanted to focus on the primary goal of most visitors to the site, which was to discover places to visit. If you are spending a long weekend on the Thames for example you might want to find:
- Somewhere to stay
- Places to visit
- Some nice places to eat out
It quickly became apparent that what users needed to do was build an itinerary of points of interest. What is more they needed to print those out in a nicely formatted way including a map to show where those points are.
By concentrating on this primary objective the site has a nicely focused feel, making it much easier to use.
Microformats to boot
Okay, so the code isn’t the cleanest we have ever produced but making the design fluid and scalable with font resizing proved tricky in places. However, all of the points of interest are marked up as Microformats which will allow us to do some cool stuff in future such as downloading them as vcards or integrating them with other systems.
The future
Of course like any site that you produce, all we can see are the bugs and problems. However, I am excited about this site because it has some really cool features and we have a client who is planning for the future. We have some great new things coming soon, which should improve the user experience even further. Oh yes, and it has Poirot sharing his passion for the Thames. Nice.
13 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Hi Paul the site looks great but there seems to be an error or the navigation
I am running Safari 2.0.4 on OSX
That’s strange. That is one of the test browsers and I have just tested it again and get no problems. Can you email me the url to the problem and what exactly is happening.
Very nice website… I want to see the content management system! The trip planning runs slow but it works great. Nice job Headscape.
Really nice.
I could have done with this last year when my wife and I were walking the Thames from the barrier to the source.
Nice job.. the maps with the points of interest are very handy.. just scary that out of 15000 points the first one I click on is a McDonald restaurant.. I hope that’s not an indication on how many McD’s there are in that area.. ;-)
Cheers for the plug Paul. We’re really happy with the site and are looking forward to continually improving it over the coming months and years.If any of you guys reading this post have any ideas, thoughts or comments let us know.
Nice work Paul and team. I was struck by the way you managed to maintain the percentage based layout and still use 3 columns of photos on many of the pages.
Do you find that you are having to select photography on the basis of how it will look as the container shrinks/grows? i.e. avoiding images with the key message on the left or right edge.
Also, presumably the client can change those pictures as it’s all in a CMS. How have you explained the concept of WTSIWEES. What They See Isn’t What Everyone Else Sees.
I think it’s great and the overall effect on each photo is minimal at any resolution.
Hi Blueclock, you’re right image selection is a tad tricky. Hence the rather dull top header banner at the moment.
Though once you get the hang of it it’s not to bad. You’ve just gotta make sure the image is sized for the maximum potential image frame.
Great work as always Paul. I’m loving the fluid and scalable site. I was in the fixed width camp until I seen the Boagworld site, this new site reinforces the message that fluid and scalable sites can be great.
I would be interested to know if doing it this way added much time to the development. It would for me…. but I guess you had already gone through the learning curve with the Boagworld site.
Lee
Wow, what a cool site! Love the Google maps mashup and the accessibility solution is genius. Glad to hear about the CMS improvements too.
Wonderful site, Paul! Love the use of Microformats in the site.
Hi Paul
Lovely site, nice and clean. And you were saying that you weren’t great designer! You have a nice style.
Just one thing, I did a HTML validation on the ‘Towns’ Page as I was getting errors in Firebug. It came up with some errors. Just to let you know!
Dave,
I didn’t design the site so I can’t take credit I am afraid. It was Ed Merritt one of our designers.
To be honest it doesnt surprise me there are some validation errors around at this stage. We probably need to do some cleaning up.