Hotel and restaurant website design

Website design for The Wychwood Inn - a hotel, bar and restaurant based in the Cotswolds.

I wrote the content and planned the structure of the website, then designed and programmed it using the Bootstrap 4 framework, SCSS, HTML5 and PHP.

Design of the website

As requested, I used the corporate colours of brown and lime-green throughout the site. The lime green buttons draw the eye, leading the user to the next part of the site. The Wychwood Inn have fantastic professional photographs so I used some in the top navigation as four large buttons.

On a desktop computer there is movement in the navigation area as the user scrolls. On the mobile version the navigation bar is static and the menu is collapsed, as it would take up too much room on a small screen. This enables the visitor to find the information they require, quickly.

Even though we used large images for visual effect, the site is still fast loading. I used a large parallax image on the home page of the desktop - placing it further down so that Google bot initially discovers the writing - much preferred when developing a website for better search engine rank.

On the accommodation pages, under the STAY section, I used a grid gallery to display the lovely photos of the rooms. Again, I needed to use higher resolution images to look good on the page, so I used an image loader which load the photos after the grid gallery javascript. The photos open a larger version in a lightbox (a lightbox displays images by filling the screen, and dimming the rest of the web page).

On each room page there is a Google virtual tour created by Andy Willis Photography.

Structure of the website

The website is split into four areas - STAY, EAT, DRINK and BOOK - to make it easy for visitors to find information. It is easy to navigate on desktop and mobile devices. I have also used internal links and call-to-action buttons throughout.

We've included the ability to sign up to an e-newsletter via MailChimp. Sign-ups receive a code for a £5.00 voucher. This encourages people onto the list. Software called Coupon Carrier, which is complimentary to MailChimp, manages the voucher codes so no email address can receive more than one.

Writing the content

I wrote each page after researching good key terms so that the site starts to rank well on search engines. I included all the content according to Google quality guidelines, like an ABOUT page. The AREA page is an informative hub around Shipton-under-Wychwood (the village), which I expect to rank well. I included plenty of internal and external links.

Writing 'the bar' page was particularly fun - stirring up the imagination of a would-be visitor to this historical building.

Hotel and restaurant website design