The anatomy of a perfect restaurant website

Top restaurants are all about ‘the experience’. It’s not just the amazing food, or the wonderful service, or the charming ambience, or the table with a view. As such, it is somewhat ironic that restaurant websites are serial offenders when it comes to bastardising the user experience. 

There can be no excuses for it any longer: it is 2013, not 2003. The age of animated Flash websites is long gone, yet many top restaurants persist with awfully wacky loading sequences and the kind of ‘innovative’ navigation that requires superhuman levels of patience, and a degree in particle physics to work out how to use it.

I thought I’d cobble together a handy A-Z checklist of dos and don’ts, for anybody interested in revamping or building a new website for a restaurant, or for restaurateurs that need to know what to ask for.

Autosound

Turn it off. Muzak is never cool, and nor is a high bounce rate. Too many restaurant websites still annoy users by playing rubbish through their speakers. It is for this reason that I have yet to eat at Sketch, which continues to commit various user experience crimes, and sets about my ears the very second I visit its ridiculous website. 

Bookings

The odds are that some visitors will want to reserve a table. Provide as many options as you can (online, telephone, email, Twitter, etc) and make sure your contact details are prominently visible (consider using the header or footer to show these on all pages). Some of my favourite restaurants don’t accept bookings, for example the wonderful L’Entrecote. All well and good, but if that’s the case please make it clear, rather than burying it in a 484-word description.

Content

All websites require quality content, which comes in many different shapes and sizes. Thoughtful, persuasive and error-free copywriting is a must, but you should also consider launching a blog (why not?) to provide lots of fresh content for visitors, and Google, which likes that kind of thing. Be passionate about the dishes you lovingly create. Establish a tone of voice (take a look at how Jamie Oliver instructs staff to sell his “fab specials”). Avoid going down the ultra-minimalist Burger & Lobster route (delicious lobsters, not so delicious content). Create pages for special offers and other promotions such as happy hours.

Detail

Attention to detail is what makes web experiences great. Focus on the user experience (test, tweak, test, tweak, test...). Banish typos. Finesse labels. Make sure your website is compatible with all of the major browsers, and devices. Take a look at my article on microscopic web design, if you need some inspiration in this area.  

Entry Pages

If your website has a whizzy animation with a button that says ‘Click to enter’ you are doing it all wrong. Take visitors straight to your homepage, or lose bookings. It’s that simple. Nobody likes to wait around for no good reason.

Flash

If you have a Flash website then you need to start over. In an age of HTML5 and CSS3 you can have a really unusable website that loads quickly. Better to create a useable one, however. Wahaca provides a good example of how not to do it (‘loading’, animation, hideous sound, terrible use of page estate, overlays, etc). Compare its Flash site to the HTML alternative it provides and ask yourself which is better.

Google Maps

You need to provide clear instructions to help people find your restaurant, and it makes sense to embed Google Maps as it is so easy to use.

Homepage

Make sure all of your most important information is easily accessible on the homepage. This means an address and phone number, as well as key navigation. If you have multiple restaurants then make it easy for visitors to select the most appropriate location.

Images

A picture is worth a thousand words, right? Quality photography is something that you should invest in. Show off your delicious dishes to convince your visitors to make a reservation. As well as food, images of the interior and exterior of your restaurant are a good idea. If you do produce lots of images please don't display them like this.

Jokey

A farcical proportion of restaurant websites seem to have been themed by Timmy Mallett. It is worth pointing out that your idea of fun might be my idea of hell. For example - and brace yourself for this - San Loco. 

Keep It Updated

Fresh content can make all the difference, both to your visitors and to Google. I don’t want to see last year’s menu, or a Christmas 2012 menu advertised on your homepage in March 2013. Update menus regularly, and don’t be coy about revealing your prices (or any offers, for that matter). Launch a blog, and make the most of Twitter and Facebook, to maintain a flow of new content. For example, I’d eat at The Eagle in London a lot more if it used Twitter to tell me what is on the menu (it changes daily).

Local Search

You really need to optimise your Google+ Local listing, if you know what’s good for you. This is increasingly important for search rankings, as well as your positioning in the Google Maps results, and can really help your visibility for potential customers who are on the move (who use their mobile devices to find nearby restaurants).

Google displays user ratings and reviews, Zagat summaries, location details, and delivers restaurant recommendations based on people’s Google+ networks.

Mobile

Following on from the above, your website should be mobile-compatible. Consider going down the responsive design route, rather than creating a new mobile site. Google will rank mobile optimised sites above those that pay no attention to - or do not work on - smartphones.

Navigation

Identify the most important pages and make sure you display them prominently in your navigation. For example: About, Location, Menus, Reservations, Contact, Opening Hours. 

Opt In Messages

“Like us on Facebook!”. “Join our mailing list to receive special offers!”. Immediately slapping a great big pop-up in a visitor’s face when they arrive on your website is akin to slapping them around the face with a five-pound sea bass.

There are better times to ask them, for example just after they have paid their bill. Gauthier Soho is a Michelin-starred restaurant that makes this mistake...

PDF menus

Kill them with fire. Menus should be in HTML format on the web. Modern browsers handle PDFs better than ever, but there’s still no excuse for not showing the menu on the page itself. It takes minutes to take PDF content and push it into a HTML editor, so be sure to smite an awful blow on any staff who complain about it “taking time”. Giraffe provides a great example of how to display menus online.

Questions

What do people need to know, when they visit your website. Your location. Your opening hours. Your menus. Your offers. Your specialities. Make sure you identify and answer all of the key questions. Make it easy for visitors to ask direct questions (via a contact form, or email, or Twitter, or telephone), and answer them promptly.

Ratings & Reviews

If your restaurant scores well on the likes of TopTable and Google+ Local, then you should pull in those ratings, as well as positive comments from reviewers. 

Social

The above point is all about social proof, and developing trust, but your community is increasingly important for search, so you should make the most of it. Develop and invest in your community, encourage interaction, reward them, and keep them entertained. Ping Pong makes good use of Twitter, while The Capital Grille has amassed 75,000 likes on Facebook. Social media is great for increasing customer retention and advocacy. These platforms help your fans to stay tuned in, so promote them on your website, as Raymond Blanc does.

Testimonials

If your customers say good things about you then why not shout it from the treetops? If I owned a restaurant I would be asking all of my non-narky customers to leave a testimonial. I’d be pushing an iPad in their face and asking them to rate / review their experience on Google / TripAdvisor, etc. It makes for free - and highly powerful - marketing.

Usability

Aim to create a simple, usable website. Avoid making stupid errors, such as being guilty of contrast fail. Make your menus easy to access: if you split them out by course type or time of day then consider whether the user wants to browse through multiple pages, or if there is a more elegant approach available (there is). 

Video

Creating videos can be a good idea but please don’t set them to automatically start playing with the sound cranked up to 11, like Pizza Express does. Check out Radisson Edwardian’s creative use of QR codes on its menus: diners can scan one to watch a video showing how the dish is prepared. If you do produce regular video content then be sure to set up a YouTube channel, like Alinea Restaurant does (unfortunately its website leaves a lot to be desired). 

Widgets

Consider using widgets to pull in social content, for example your Twitter feed, or your YouTube videos. They can help keep your website fresh.

X-rated

Personally I’m not sure that having this sort of background on your restaurant website is a good idea, though here I am linking to it. A ploy!

Your Staff

They’re your best asset, especially when it comes to social media. Make the most of them. 

Zero Tolerance

Unfortunately a vast number of restaurant websites continue to suck. Many are seemingly based on bad templates devised more than a decade ago, by sketchy digital agencies who were clearly preying on the oblivious. Nowadays, web users are savvier than ever, and are less likely to tolerate a bad web experience, regardless of how amazing your dining experience might be. There should also be zero tolerance for substandard websites among restaurateurs. Here’s hoping for change!

Agree / disagree? Did I miss something obvious? Please leave your comments below...