Pub Website Design for Cheshire Bar & Restaurant

Back in April 2013 Ged Dowd, the Landlord at the Horseshoe Inn, got in touch about a new website he needed for the popular Cheshire pub

I have to admit I was pretty excited about the prospect of creating a new site for such a well known establishment, so I quickly arranged a meeting to get things started and the rest is, well, keep reading and you’ll find out…

pub website design restaurant bar homepage

The brand new Horseshoe Inn website finished homepage design

About The Horseshoe Inn

Located right in the middle of Kingsley in Cheshire, about 3½ miles away from Rabbitdigital HQ and is a popular pub with the locals. It first opened in the late 1700’s, a little bit before the invention of the interweb! In the beginning of the last century it was known as the ‘Horseshoes’ which became ‘The Horseshoe Inn’ after World War II. Its now simply known as ‘The Shoe’ to the locals and continues to serve good food and drinks along with a high quality B&B service.

The Design Brief

horseshoe inn pub logo design

This is the finished logo I designed.

So after Ged had initially contacted me, I drafted up a design proposal, which Ged was happy with and we arranged to meet at the ‘Shoe’. Ged had a good idea about how he didn’t want the site to look which was helpful but equally was happy to give me a free rein with the overall design. He also wanted to create a new logo for the pub and his only requirements were that it have a horseshoe in the design and be informal.

Starting with the domain name we had a look at some options and luckily www.horseshoeinnkingsley.co.uk was available so I went ahead and arranged the hosting. Ged explained he wanted the website to portray an informal, family oriented and welcoming atmosphere for the pub. We discussed the pages that would feature prominently in the navigation and social media platforms he wanted to focus which included Facebook, Twitter and Tumblr. Being able to regularly update the website was also important to Ged so I explained I would be using WordPress which is really user friendly and easy to manage.

Research, Design Ideas and Sketches

pub website design sketched layout rough

Sketched pre-design phase rough layout

I started searching around looking at websites belonging to some of the other local pubs and then expanded my search to the wider Cheshire area. I soon realised that many, of the high ranking pubs anyway, hadn’t really been very imaginative with their own sites. I was disappointed in a way but happy too I suppose because I was confident the new website I was about to create was going to stand out from the rest. I don’t mean this in a condescending or big-headed way, don’t get me wrong, I just felt that the direction Ged wanted to take with the site was right one.

Ged hired a photographer to come in a take some high quality photos of the pub which he had by now already sent to me. Using these as visual inspiration for shape and colour I started sketching some rough drawings. The site would be responsive to mobile and tablet screen sizes so I opted for a grid layout on the home page to organise all the main link blocks. Priority was given to the three main areas of business, food, drink and accommodation. But before this I needed to display the logo, a tagline with some photos maybe, the main nav and then a nice big image slider banner. Below the fold we could feature the other important services and events including the site intro, poster pic and some social media stuff.

Design Prototype

As I do with the majority of my website design projects, once I’m happy with a layout and positioning of everything, I create a highly finished prototype using Adobe Illustrator. This way I can make sure all the UI components look uniform and work well together on the page.

iphone mobile friendly pub website design

iPhone 5 Portrait Viewport

The finished design visual is an almost exact representation of the completed website. This can sometimes be slightly confusing as people don’t realise its not real and try clicking the navigation buttons and boxes.

Website Building Process

Having got the go-ahead from Ged with the design, with minimal adjustments I might add, I began building the theme template. I started off with a base theme and stripped away all the stuff I didn’t need. You can find loads of good starter themes on the WordPress website. Developing a website this way is much faster than starting from scratch and allows you to spend more time on some of the other features of the project.

The main features the base theme needed to have were sidebar and footer widgets, full page templates, responsive layout and a good custom menu. Social sharing widgets also come in handy if your chosen base theme has them. With my prototype design open in one screen and the stye.css file open in another I began applying all the colour, font styles and layout dimensions. For the responsive parts I used CSS3 Media Queries to control the layout and positioning of the main elements of the site.

I’ll concentrate on the home page to explain the overall structure of this website, so here goes.

The Header

The website header, the bit at the top that’s visible on every page, is used here to display the logo, tagline, photos and main navigation. I used an alpha transparent png background for the scattered horseshoes overlaying the body background texture I created in Photoshop. The font I used for the tagline “Fun, Friendly, Family Pub in the Heart of Cheshire” is Courgette which is available for free at Google fonts. The font I used in the main menu navigation is Podkova bold 700, again available free at Google fonts.

To get the thick multi-coloured underlines on the menu buttons I used a bit of CSS. I basically attached a unique class to each menu item in WordPress Custom Menus and applied a border to each as the example for the ‘About‘ button shows below.

#header-container nav li.about-but a {
border-bottom: 13px solid #EB4200;
}

The Content Area

Okay, starting at the top of probably the busiest page on the website we have the slider banner by Pointelle. Its a premium plugin you will find with a Google search. It displays tabs to the left or right of the main image and is very customisable. Sitting immediately below this is the first row of link blocks. I created these blocks with unordered lists custom styled with CSS which expands and squeezes the boxes to fit various screen sizes.

The first row features links to the three most important areas of the site, Eat, Drink and Sleep. After this a row of four blocks promoting Cask Ales, Free WiFi, Live Musci and Free Pool. Below the two rows of link blocks is the site intro with a photograph of the front of the pub that I took myself. Last in the home page content area is a link to the pub photo gallery, social media links and map link to the contact page which features a customised Google map.

Here’s the HTML I wrote for the first row at the top of the page :

<ul class="top-row">
<li class="eat"><div><h3><a href="eat-breakfast-lunch-dinner-pub-restaurant-menu" title="Breakfast Lunch &amp; Dinner Menu"><span class="boxtitle">Eat</span></a></h3></div></li>
<li class="drink"><div><h3><a href="drink-real-ales-keg-ales-wines-spirits-soft-drinks" title="Drink our Real &amp; Keg Ales, Wines, Spirits and Soft Drinks"><span class="boxtitle">Drink</span></a></h3></div></li>
<li class="sleep"><div><h3><a href="sleep-bed-breakfast-en-suite-double-rooms-cheshire" title="Sleep in our Double en-suite Rooms"><span class="boxtitle">Sleep</span></a></h3></div></li>
</ul>

The Footer Area

responsive website design for -pub samsung galaxy

Samsung Galaxy S4 Viewport

The last and equally important area on the website is the footer. The footer is the last bit of a page that you see and is handy for showing links to popular pages and news posts throughout the rest of the site. Just like the header its a common feature on every page. The footer is particularly useful when browsing on a mobile or small screen as you can display links back to the home page and other important areas that are easy to access without having to scroll all the way back up the page. Thats my theory anyway but I’m sure there will be some who disagree.

Mobile, Tablet and Larger Screen Responsive

I designed this site with different screen sizes in mind right the way through the development process. The layout and positioning of every element, piece of text and photo had to be considered on every page. Making CSS that would work well on the News Blog area of the site was tricky at times too.

I also had to consider page load times when creating graphics and uploading images. Many of the visitors to the site will be using mobile devices on 3G and 4G with various data plans so this also had to be carefully considered. At the end of the day if you focused solely on speed then you would end up with a very boring light weight website, it was a balancing trade-off at every stage.

Colours, Fonts and CSS Effects

    Colours used :

  • I mixed the colours all at the same time to make sure they didn’t clash. The colours are an important aspect of the design and set the tone of the site before the visitor starts reading the first words. You can see a list with the HEX values for each of the main colours featured in the website below :
    •  #9C191F – Burgundy
    •  #EB4200 – Amber
    •  #F59F18 – Warm Yellow
    •  #709919 – Forest Green
    •  #2B8AAF – Dark Cyan
    •  #DD2898 – Deep Magenta
    Fonts used :

  • I used Courgette for the headings through the site which is a nice cursive font. Podkova is what I used for the main menu navigation and PT Sans for all the body copy. You can get all of these if you head over to Google Fonts right here.
    CSS Effects used :

  • Transform was the only bit of CSS3 trickery I used worth mentioning. I used it to rotate the social media buttons at the bottom of the home page to make them a bit more edgy I suppose. Heres a sample of the code :
    transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
pub website ipad compatible horseshoe inn

iPad Portrait Viewport

Well thats it!

If you enjoyed reading this post and found any of it useful then great, glad to be of assitance. If you have any questions then please feel free to get in touch or leave a comment below.

If you’re a landlord or pub owner and would like to discuss your new website then give me a call today on 01928 735304 or use the Quick Contact on my home page, I’m looking forward to hearing from you where ever you are in the world!

Cheers,
Warren 🙂

Pub Website Design for Cheshire Bar & Restaurant was last modified: January 2nd, 2015 by Warren O'Donoghue
Please share this article on :