Claxton Grange

Claxton Grange Holiday Cottages is a responsive site built using bootstrap for a group of holiday cottages in North Yorkshire.

Claxton Grange website screencapture I was tasked with creating a fresh look for the website which hadn't been updated significantly for around ten years. I was faced with a huge amount of content, including a large number of images to sort through and select the best from.

With there being 14 cottages in total as well as extensive grounds, I knew I needed to create a website which really showcased the facilities available in an accessible way.

Bootstrap

As has become standard over the past few years, a requirement from the client was to create a responsive site which looked good on large desktops and small smartphone screens as well as everything in between. I chose to use the bootstrap framework because it is built from the group up to be responsive and makes creating responsive sites a lot quicker.

Bootstrap also comes with a lot of great features I knew I would make use of such as its carousel feature, which is used on several pages to showcase images. As well as the modal javascript popup which is used on the cottages page to display details of the cottages.

Colours & Logo

The colour scheme of the site was inspired by a brochure produced by the client as well as a request from the client that they would like the site to use grey. The bright purple creates a nice contrast with this and the logo of the tree also came from the brochure. I felt the tree was a good image to use as the cottages are surrounded by beautiful countryside.

Navigation

Site navigation with the availability page highlighted

The menu collapses down on smaller screen sizes and uses icons to depict what each of the pages is about. This came about as a result of the client not wanting the traditional 'hamburger' type dropdown menu and so I looked at how some other websites implement mobile navigation and found that this design was much more intuitive for users.

Tariff table

Tariff page on a small screen I was given a large table of the cottage tariffs which challenged me to come up with a way to display this information which looked good on all device screen sizes. Tables are quite difficult to display well on smaller screen sizes and so I had to get quite creative.

I decided to create a table with a sticky left column which is scrollable on mobile and smaller screen sizes. I also added a small helper to the right hand side in case it wasn't completely intuitive that the table should be scrolled.