Home

Daniel I. Scully

lynnstages

Designing the Lynn Charity Stages website

Earlier this year I designed and built a new website for the Lynn Charity Stages rally, an annual motor sport event held by King’s Lynn & District Motor Club. It’s a small and simple website but I’m quite pleased with how it came out, so thought you may be interested in the thinking behind its design, and a tour of its more interesting features.

Last year I re-designed and re-built Kings Lynn & District Motor Club’s (KLDMC) main website, so it was pleasing to hear at the start of this year that they were interested in me doing more work for them. The Lynn Charity Stages is one of the club’s three big annual events, which attracts competitors from across the country to compete on Sculthorpe airfield.

Because the Lynn Stages Rally is such an important event in the club’s calendar, my first thought behind the design was that I wanted it to feel like a KLDMC website. A club’s reputation for putting on well organised events is key to attracting people back to future events, so it seemed important that the rally’s identity be strongly tied to the club which was organising it.

Hopefully you can see that in the screenshots below comparing the club’s site (left) with the rally site (right). Although the details of the designs are very different (fonts, title styles, layouts) the bold blue banner with white and red features make it clear the two sites have something in common.

Screenshots comparing the motor club's main website, and their new rally website

For those not familiar with the latest trends in website design, one of the latest ideas to surface is that of “Responsive Design” which essentially is the process of making a website’s layout change depending on the size of the screen it’s being viewed on. In principle this means the same website can be just as easy to read on a phone as it is on a large computer monitor. If it’s not obvious how that works, try heading over to mediaqueri.es, which collects many examples of websites that do this well. For many reasons, which should probably be the subject of another post, responsive design is something I believe strongly in and aim to base all my websites on. If you’re on a desktop or laptop, you can see how the responsive design works for the Lynn Stages Rally site by visiting it, resizing the width of your browser, and watching it respond!

Since the Lynn Stages site is relatively simple, this did not require too much work, with the exception of the Entry List page. One of the challenges still to be solved in responsive design is that of how to deal with tables of data – which are notoriously difficult to make fit on a small screen. In my opinion there is no one way to deal with this, and the “right” way is at best situation dependent. I this instance, the the full sized version of the site’s entry list needed to include the entry number, optional team name, driver name, driver’s motor club, navigator’s name, navigator’s motor club and the car they’ll be competing in. That’s a lot of information, and even on a full sized monitor a single row for all those fields was unnecessarily large.

My first move was to bring the driver and navigator’s motor clubs into the same cell as their names. The connection between the name and club then becomes immediately obvious, so the header can also be reduced in complexity. The hardest part was to make this work on smaller, phone-sized screens, for which I decided to abandon the row-column table style and display each entrant as a separate block. Because in this situation it was reasonably clear what each piece of information was, I decided to do this without adding filed specifications.

The screen shot below shows the outcome from this process so you can judge for yourself how well it works. The full-sized table is on the left, and the phone-sized version on the right.

 The full-sized and phone-sized versions of an example entry list table

The last feature of the design to highlight is the footer (screen shot below), where I tried to stretch my artistic muscles. There can be no doubt that I’m neither an artist nor a designer. None the less, I’m quite pleased with how this turned out and consider it a couple of hours well spent.

Screenshot of the Lynn Stages Rally website's footer, showing a car on a hill with trees, all silhoutted in shades of blue

Finally, I’m very grateful that KLDMC were willing to allow me to try something different. This was the first website I’ve built with the Perch content management system (CMS). Perch isn’t free, but I’d heard many good things about it and wanted to give it a go. I can report that it’s a very nice CMS, ideal for small sites with very structured content. There are a few rough edges still, but the development team are improving  it all the time, and the documentation and support was very good. An ideal choice for this sort of site, and it’s definitely one I’d use again.

Anyway, don’t forget to take a look at the finished product http://lynnstages.co.uk, I hope you like it.

Tags