MotorwayServices.info is one of my oldest websites, and was originally set up to be a test bed for (at the time) new-fangled CSS techniques. Over the years, it's gone through several iterations including visual refreshes, a switch to "SEO-friendly" URLs instead of using GET variables, and a major change to the underlying codebase from functional to object-oriented programming.
More recently, it's become apparent that it's time to take the next major step in the site's design. The buzzword these days is "responsive" web design - that is, a fluid layout that accomodates itself to different screen sizes all the way from desktop PCs down to smartphones. For a site which gets a lot of use by people out and about, this was all the more important. Over Christmas 2014, more than half of the site's visitors were using smartphones to access it. Given that the previous design wasn't particularly smartphone-friendly, that's a lot. And it means that it's definitely time for change.
So, this is the result. This is the biggest visual redesign of the site since it was created, and involves a full, ground-up rewrite which completely replaces the original framework.
In updating the design, I've aimed to minimise changes to the underlying subsystem, and to the site's URL structure. One of the most frustrating things that can happen with a visual website redesign is that the location of information changes. With a few minor exceptions, all the existing URLs will still work, so if you have bookmarked your favourite MSAs here then you won't need to update them.
A few things have needed to change. The original design offered three separate map pages for each service area: Google, Bing and OS. However, the Bing map API used originally is now obsolete and will be withdrawn soon by Bing, and their current version isn't free to use. So the Bing map has had to go. I've also removed the OS map, as the site statistics showed that it was very rarely viewed.
The new design has a single map page, based on Google's framework, but with the addition of Open Streetmap as am alternative overlay. I've also included the "classic" Google colours, since these make a lot more sense for UK motorway users than their current colour scheme.
Another big change is to the site comments. The original home-grown system has been replaced with the Disqus comment system. This has a number of advantages, including the ability to reply directly to a specific comment rather than everything being in one continuous stream, the ability to sort comments either from newset to oldest or vice versa, and limiting the number of comments visible at any one time so as to prevent the comments page growing ever longer.
All the original comments on the site have been imported into the Disqus system, so none of them have been lost!
Switching to Disqus for comments has also meant separating out the rating system, as that was previously part of the comment submission. You can now rate a site simply by clicking or tapping a button on the site's page, without needing to load the comment form as well.
On the subject of ratings, we've been collecting data for additional rating parameters for a while. These have now been included in the site pages, so you can see at a glance whether a particular MSA is recommended for truckers, caravanners, families, the disabled or dog owners.
The new design isn't quite finished yet. Now that we have the additional, subject-related ratings, I want to add a listings page so that you can see MSAs sorted by those ratings. Another long-awaited enhancement will be a better way of categorising the brands available at MSAs, so you can search for sites with a McDonalds, say, or a Subway.
These are changes to the underlying code, through, rather than visual changes, so they are independent of the new responsive framework. As with all websites, this one is continually evolving. Once thing is certain: there will be more changes and enhancements to come.
If you've got any comments on the new design, or suggestions for new features, you can make them using the comments form below.comments powered by Disqus