Nobel Cafe

Sep 7, 2015

Nobel Cafe are an awarding winning cafe/restaurant that I have worked with on numerous occasions over the past number of years. The majority of work that I took on for Nobel was print based (menu design, posters etc).

In December 2014 I was approached about taking on the task of redesigning and developing their website. At the time, it was a very dated design and they also had no way of updating the content on the site.

The Brief

Nobel Cafe’s premises underwent a face lift in October 2014, so they felt this would be a good time to get the ball rolling on a new website. In terms of a brief as such, everything was left entirely to me use my professional judgement, so long as the following were accounted for:

The Solution

My main goals when starting this website was to come up with a modern design and to make it a really fast site. When trying to think of scenarios’ as to why users would be on a cafe website, I kept coming back to the same one. To check the menu.

Straight away it was in my head that the menu I create for Nobel Cafe, has to be rendered with HTML & CSS - unlike many cafes & restaurants which choose to upload a PDF. I believe this not a good user experience asking a user to download a menu. A lot of the time you will find that the PDF carries a bigger than necessary file size, which when downloading over a mobile data network can tend to be extremely slow.

Out of the box, creating the menu in HTML & CSS would be better for:

Those are the 3 reasons that I think it is important to have food menus created in HTML & CSS rather than a PDF.

Nobel Cafe - Food Menu Solution

Above, you can see the solution I came up with for the menus. With their being more than one menu, I opted for a Javascript show and hide so that it is only taking up a small section of the website - if all the menus where on show it would add too much scrolling for the user. It may also become overwhelming for them too and they may not get the information they were looking as menus tend to quite text heavy.

The next section that was essential for Nobel Cafe was reviews, it was important to them that they could:

The problem that I regularly come across with reviews is that people only leave a review/feedback whenever they have a bad experience - this is not what Nobel Cafe wanted as they are used to receiving many positive reviews. To help battle the keyboard warriors who leave negative reviews I decided that I would place the reviews form at the end of the reviews section.

The reason for this was in the hope that people would read the positive reviews first before they get presented with a form asking for their feedback, and if the users had read previous positive feedback then they would be inclined to leave positive feedback also. To date, this has worked a treat and Nobel Cafe are regularly receiving positive responses over negative.

Managing the reviews has been made simple for Nobel Cafe, they receive a review to their email once one has been submitted, and from this email they can follow through to their admin screen to review it and decide whether it should feature on their website.

Below you can see the reviews section on both mobile & desktop views.

Nobel Cafe - Reviews Solution


Nobel Cafe had no real preference when it came to a CMS, all they required was an easy way to manage their content.

I chose to build this website with Wordpress, the main reason I chose Wordpress was because of the plugin ACF (Advanced Custom Fields). A lot of the content on the website would be repeated using the same HTML (menu content, photo gallery, reviews) and ACF makes repeatable regions super easy to integrate.

With this website being a single-page website, I took the decision to remove the WYSIWYG editor in Wordpress and used ACF fields - the reason for this was that WYSIWYG editors tend to cause designers a headache as the user has access to a lot of colours that they could potentially use for fonts, by taking this option away and giving Nobel only access to the raw content I have insured that the design will not get altered, only the content will.

Final Thoughts

I am delighted with the outcome of the Nobel Cafe website, Nobel Cafe and myself have successfully completed what we had set out to do. We are getting very good results from Google Pagespeed, more and more users are finding the website on Google and Nobel now have a modern, responsive website.

Work completed January 2015.