The Cornwall Beaches website has been doing exactly what the title suggests for almost 10 years now. It is the best performing website in the search engines ranking number one for most Cornish beach related terms.
However, the old design was beginning to look a little tired and wasn’t really leveraging the great content on the site. To take the site forward and future proof it, for at least a few years, I decided to use the latest HTML5 and CSS3 methods to create a responsive website. What this means is the website has a ‘fluid’ layout which changes along with the screen size making it equally usable on a mobile/smart phone, tablet/iPad or full size monitor. This was achieved using a CSS framework (Gumby in this case) which has all the cross-browser fixes and functionality built in.
One issue I have with responsive designs is they still download the entire page regardless of which images / text they display. To further mobile optimise the site I used the Mobile-Detect script to further tailor the mobile page and reduce bandwidth on the mobile version.
Another great feature available that goes hand in hand with modern HTML5 capable browsers is the ability for a user to specify their location. This geolocation functionality is enabled on the mobile website version to allow users to find their nearest beaches.
As with all the sites I build the page load speed was important. Here I have used CodeIgniter to create a lightweight website and exploited the caching facilities resulting in a faster website.
See the website live @ www.cornwall-beaches.co.uk