How do great restaurant websites look and perform?
A restaurant website should be more than a neat extension of a physical location. It should reflect the customer service the restaurant offers guests. And it needs to answer all the questions would-be diners have? Where is it? What's on the menu? How do I book?
Many restaurants make do with nothing more than a holding page that is rarely updated. But you can do so much more!
Poor restaurant website design can be the difference between a customer booking, or bouncing right off your website. It can also hinder marketing efforts by wasting money spent of people discovering the restaurant in the first place.
In this post, we’re going to take a look at some websites that are getting things right by creating intuitive websites that cater to the desires and queries of customers, just like a successful restaurant should.
But first, let’s look at which elements should feature in a simple, effective restaurant website design that converts your site visitors into diners.
Features a restaurant website must have
Getting a restaurant website right means providing potential guests with the information they are looking for.
The most popular reasons to visit a restaurant website are:
- To book, either online or by telephone, email, visiting the venue etc. Be sure to cater to different communication preferences
- Finding contact details – to book or for other queries
- Checking opening hours
- To find out the restaurant location
- To look at the venue’s menu
- To check for offers and special events
A restaurant website needs to facilitate these tasks so that finding this information is simple and intuitive.
Some restaurant owners get caught up in marketing the experiential side of dining with them by creating a website that plays videos of food with atmospheric music playing in the background.
If this slows down your site or an auto-play video annoys your site visitor, instead of impressing with your artistry you risk potentially putting them off.
A diners’ experience of your restaurant starts with the website. To set the right impression — forget all the frills — you need to help them find what they’re looking for.
Additional considerations with website design:
- The use of fonts, colors and imagery make it easy to find key information
- The load speed of your site – don’t keep would-be diners waiting
- Whether key information is quick and easy to find and can be accessed with minimal clicks/steps
- How easy is it to update your website and whether all the information on your website is up to date
- If your site is adequately search optimized to help customers find your site and pages relevant to their search queries.
Prioritize menu and location
Two things that are critical to restaurant website are how the site views on mobile and how your menu information displays. We’ve covered the importance of local and mobile search before in our post on restaurant SEO.
As a recap, 65% of smartphone users search for somewhere to eat within walking or driving distance.
A simple restaurant website offers a quality user experience on mobile, along with integration of a location tool such as Google maps, plus directions.
Whether potential customers are visiting your website on desktop, tablet or smartphone, accessing your menu — or a sample menu — should be child’s play.
Google and other search engines can read a menu in PDF format but the truth is such menus are not always optimized correctly. Plus, by making your menu a PDF rather than displaying it within a web page, you create an extra step for those who want to read it.
Make online reservations very easy
Enabling guests to make online bookings should be a requirement of a restaurant website. Things like forms and plain text phone numbers offer a bad user experience and today's guests expect to be able to book online.
The nice-to-haves of restaurant website design
A restaurant website absolutely must address the features and actions outlined above.
However, depending on your restaurant’s offering, there are a few more features along with other informational and brand building content that you should consider including in your site.
- If you sell merchandise, have a cookbook or have a deli in store, an online shop could monetize your website
- Add your story – information about your restaurant history and ethos, staff and suppliers, can help potential customers to learn more about you and could help with SEO too. This could be through an about us page or in an additional news/blog section
- Give information about your loyalty program or special offers
- Provide information and facilitate booking for special events
- Direct site visitors to subscribe to your newsletter so you can stay in touch
- Integrate your social media and use calls to engage so that you maintain a relationship with your customers
- Add testimonials and reviews to your site
Never forget the 4Ws
Ultimately, your website needs to market you using the four Ws:
- Who: your restaurant
- Where: your location
- What: your menu
- Why: your story/testimonials/offers
Once you have these basics in place, you can use site data such as Google Search Console and Google Analytics to regularly review site performance and inform fine-tuning of your content and site design.
10 Great Restaurant Website Design Examples
So, which restaurant websites are doing great things? These websites are doing all the things we’ve outlined above and more.
But which is your favorite?
Prashad is an award-winning (Michelin Bib Gourmand and two AA rosettes) North West Indian food restaurant near Bradford in England.
It’s famed for its warm welcome and family foundations. And along with fantastic food, it has its own best-selling cookbook and offers cookery lessons.
This website’s super simple navigation makes it easy to find, book or buy all of those things with just a couple of clicks. Yet the design still puts the food and the story of the restaurant at its core.
This is implemented through great written content and some fantastic photography. The homepage itself has a slideshow of mouth-watering images and a very prominent ‘book now’ button.
Brasserie Blanc is a small UK restaurant chain first opened by French chef, Raymond Blanc OBE.
This website services multiple locations and does so well by featuring prompts at the top of it’s navigation.
It covers off all the key queries:
- Book a table
- Select Location
- Sign up
- Follow Us
There are also quick links to menus and pages assigned to other services such as Private Dining, Vouchers and Events.
The ethos of Blanc’s cooking features both in illustration/photograph and written content. And as you’d perhaps expect from the president of the Sustainable Restaurant Association, there is information on site about suppliers and food seasonality too.
Le Gourmet is a unique gourmet restaurant; after all, it’s based inside Lego House, Billund.
And while it is a little quirky – with a design based on blocks and short videos on the desktop site that aim to suggest the ‘experience’. It ensures the important things are really obvious.
There’s a big book table button in the top right corner, links to the food and wine menus are accessed in the main navigation, plus arrows show you were to click on the page.
If you’re viewing on mobile, the invitation is to click straight through to the food section and the book button remains at the bottom of your screen while you’re on site.
British Chef Simon Rogan has a number of restaurants under his brand’s umbrella. His website therefore acts as a portal to each restaurant along with representing his overall brand.
Simply click on the logo for the venue you want to explore or book and you auto-scroll down to content specific to that restaurant.
Information is concise and mobile-friendly, buttons to book a table; room, experience or prompting you to buy vouchers is clear and prominent.
Navigation footers and headers link clearly to additional features and information such as the contact page and shop.
Taking l’Enclume as an example, once you’ve clicked from the home page through to restaurant.
Here, there are clickable links for sample lunch and dinner menus, which scroll up quickly from the bottom of the screen.
Photography features ingredients from earth to plate to reinforce the restaurant’s brand and story.
We’d like to scroll a little less before we hit the book button, but there’s certainly a lot packed into a site that doesn’t feel overly cluttered
This Michelin-starred pub with rooms in North Yorkshire, England resembles a glossy food magazine but it’s fast loading and simple to navigate too.
Click on the food page and this restaurant has their menu information right underneath their book now button.
This would be even better if the site didn’t rely on clicking a PDF for menu inclusion.
Let’s be honest, videos can be super annoying on restaurant websites. This is because they’re often linked to auto-play audio or slow down the functionality of the site.
However, the video on Temper’s home page isn’t guilty of those sins. Plus, it really showcases this mini-chains eating vibe and food. Location, reservations, events and contact are all easy to reach from the main navigation.
To get to the food menu, you have to select a specific location but when you do, the sample menu is right there on the page.
This Italian restaurant in New Jersey serves modern Italian food with a coastal twist.
This light and clean site feels relaxed and uncluttered and it looks just as good on mobile.
Click on the top right and find links to the menu, the story of the chef and reservations.
One smart added extra is that the contact details and a link to directions for the restaurant are also visible within the navigation menu. That’s a nice slick touch that will really help anyone in a rush to find those details.
Click on menu and the different menus are situated right in the page too and load super quick.
You can’t help but anticipate that the customer service in the restaurant itself matches this efficient website experience.
The Ivy is a London institution but their website is a lovely sleek and modern affair injected with just the right helping of the brand’s hospitality heritage.
See how they’ve got the address up there in the left-hand corner and the reserve button in the top right?
While the address doesn’t pop up on mobile, it’s only a short scroll to a location map.
The site uses gorgeous scrolling imagery of areas in the restaurant and food and drinks.
This slideshow presents would-be diners with different options and calls to action such as booking the private dining room (as above), or advertising theatre supper packages or gift cards.
So, if you’re looking for something and you’re slow to locate it in the main navigation, chances are it’ll flash up on the screen in a matter of seconds anyway.
The opening hours are also shown on the homepage, right below these calls to action.
You don’t need to stray far to find the most commonly sought after information on this site.
This website from an Irving, Texas, Santa Fe style restaurant is pretty unassuming. It’s got a good clear navigation bar and can you see that nice central ‘book a table’ button right under the word welcome.
All the information you’d expect to find is just a click or two away.
Plus, there’s the handy banner at the top letting you know about availability at an upcoming special event.
Explore beyond the top navigation and head to the menu section and each menu in full on the page for you to see. Plus, there’s the option for diners to download a PDF version to keep for future reference.
We hope this post has given you some food for thought when it comes to features you may want to include or ditch from your website design.
If you’re working on updating your restaurant marketing, don’t forget to check out our post.