12 Tips For a Great Restaurant Website Design

At Bitcookie, we design websites for all kinds of industries. We combine traditional advertising principals with good experimental technique, applied psychology, and behavior analysis to determine the best methods to drive goals for businesses online. Here we'll share some of what we've learned about increasing sales for restaurant and cafe websites.

1. Understand why someone is on your website

Before starting out, think about why someone is on your website to begin with. They’ll usually fall into one of three categories:

1. New patrons from out of town
2. New local patrons
3. Returning customers

Think about the needs of those groups when building your online presence.

First-time customers are shopping around for a place to eat in advance. They’re comparing your website to other restaurant websites in town. If they’re a tourist, they’re likely on a mobile device in a hotel room, which means that having a responsive (mobile friendly) website is crucial to earning their business; the best-looking site with the most appeal will win their visit. If they end up visiting and enjoying your restaurant, you’ve just won repeat business or a referral. Therefore, it's obvious how your website is a vital component of your entire marketing strategy, just like your location or street presence.

A returning customer will probably be looking for the fastest path to a menu, directions, or phone number to place a take-out order or make a reservation - make sure that information is quickly accessible and not buried behind multiple clicks.

2. Pretend the website user is actually visiting a physical space

Restaurant owners understand the importance of atmosphere in their physical location: having clean tables, nice lighting, and a welcoming atmosphere. The website is no different. When someone goes to your website, they’re visiting your virtual space and they will judge the quality of your food, location, and service based on the presentation of your site.

Your website is a customer’s first impression of your entire business - make sure it’s perfect! While no book should be judged by its cover, you will have a competitive advantage if you accept this phenomenon and work with it.

3. Use high-quality photography

High-quality photography is the best tool in your digital marketing arsenal. It can say so much about your atmosphere, food, staff, price range, and style. Put a large photo right up front, ideally as the background image of your intro (as an example, see BattleCat Coffee Bar).

If you have a cute storefront in a nice area of town, don’t be afraid to show that off. If your restaurant looks best on the inside, use an interior shot. If your space isn’t the best looking but your food is beautiful, lead with that instead. If you have a charming staff and a nice kitchen, feature behind the scenes shots.

If you’re feeling extra adventurous, use a video background of your food being prepared. However, don’t have a video just to have a video! Opt for the highest quality visuals that produce the best possible appeal. See 4Rivers as an example.

Put the strongest imagery first, then continue with more images lower on the page. The best restaurant website will highlight multiple subjects (street level, interior, plating, chefs) as they each appeal to different types of customers.

Taking professional photos of food doesn’t need to be difficult or expensive. You can build a lightbox using some cardboard and tissue paper. Put food in the lightbox before taking images on a smartphone camera for incredible results. 

4. write a clear message about your food

A clear message is important for search engines but also tells people about your restaurant's mission and food. Different people respond to different types of information. While high-quality images will appeal to most visitors, you shouldn’t neglect readers. Having both visual and textual information will engage both sides of the brain and leave the strongest impression.

Clearly state what type of restaurant you are - don’t make your visitors play detective. If you’re a Thai place, write Authentic Thai Cuisine in a giant font right on top of your intro image. It sounds remarkably simple, but it's often overlooked. You have less than 5 seconds to capture a user's attention. If you can get them to see a beautiful image and read We Make Tacos, your website will drive sales. For an example check out Biscuit Head.

5. Use multiple types of appeal

In the body of the homepage (below the intro) you can get more detailed about your establishment. Follow the advertising principle of multiple types of appeal:

• Appeal to Utility - Some people respond most to speed of service or price of a meal
• Emotions - is your food ethically or locally sourced? 

Ideally, you should use multiple types of appeal within the body of the website to resonate with different personalities. For more on advertising appeal, see this essay. 

6. show your human side

Authenticity is extremely valuable right now in advertising and for a good reason. It is a reactionary movement responding to all the fake, shallow brand identities from the last 10 years. Show users how you came about and what makes your restaurant special.

You don’t need to do this with a prominent "What Makes Us Different" or "Our Story" section. Those are awkward and hard to write. Instead, talk about things like:

• When you were founded
• Where your food comes from
• How it’s prepared
• Where you got inspiration for your menu
• Who your head chef is
• Who the core team is

Providing more details will instantaneously differentiate you from your competition. For inspiration, see Chai Pani's about section.

7. Refine your menu’s usability

Menu usability is critical. The menu is the second most important page apart form your homepage. A good menu is responsive, usable, and enticing. There are a couple firm requirements with online menus...

1.  never upload your physical menu as an image or file

For one, it will alienate mobile device users as dragging/panning around a document trying to read something sucks. Second, it will damage search engine rankings because the text is not readable by crawler robots. Always re-type your menu into your website so the text can scale, move, resize, and be parsed by search engines.

2. never separate parts of your menu in tabs or bury pieces of it behind a click

If a user has to click to see Sandwiches, then click again to see Appetizers, then click back to see Sandwiches again it’s frustrating, and that's never good. The entire menu should be visible on one page without additional clicks (scrolling is fine and expected). This is vitally important on mobile devices as clicking is slower than scrolling. 

8. Consider using photos in your menu

Even if you’re against using photos in your physical menu, using them online can provide a competitive advantage. When appraising a restaurant in real life, patrons will commonly look at other guest’s plates to see if the food “looks good” before committing to a meal. Do what you can to simulate this real-world process online.

9. Clearly show your hours and location

The ultimate goal of your website is to increase conversions - for a restaurant, that means phone calls or visits. These are the actions you want users to take, so don’t bury them behind a click or on a special page. The restaurant name, address, and phone number should be prominently displayed at all times. Bonus points if you link the address to google maps and the phone number to a special tel link so users can call or get directions in a single click:

<a href="tel:+1112222">111-2222</a>

10. Track your visitor behavior

How do you know if your website is performing and actually generating sales? This is difficult for a restaurant since your conversion is usually foot traffic or a phone call. Tracking walk-ins is impossible, and call tracking is prohibitively expensive for small businesses. At the very least, make sure you implement Google Analytics and Webmaster Tools.

• Google Analytics will tell you bounce rate, time on site, and click-through-rate which are good indicators of success. A low bounce rate (below 70%) means that users don’t immediately go “back” when they arrive. A high time on site (above 20 seconds) shows you’re grabbing visitor attention. If users are clicking through from your homepage to your menu, that’s even better!
• Webmaster Tools can tell you which keywords users entered into Google to find your website, and how you rank for those keywords compared to your competition. This information can help you refine your message to get more visitors from high-value keywords. For example, if people more frequently search for “Asian Cuisine” instead of “Chinese Food,” then refining your content to align with “Asian Cuisine” will help you rank higher and generate more traffic, which generates more business.

11. Set up social media profiles

Making sure your business is properly represented on multiple social networks will not only generate sales directly from those channels but also help you organically rank higher on Google search results. 

1. Make sure your Facebook, Yelp, Google+, Foursquare, and Twitter are all branded and showcase the same high-quality content that your website does.
2. Don't post only when you'll be closing otherwise customers have no incentive to follow you and all your recent posts look like you're going out of business.
3. Don’t forget to link all social sites back to your website!

12. Consider hiring a professional web design agency

Sound like a lot of work? We agree! A professional web design agency like Bitcookie can handle all of this, from taking professional photos of your space and food to building an appealing website that wins new patrons and delights regulars.  A website is the most vital component of any modern marketing campaign, so making sure it's done right from the beginning is crucial to success.

Looking for more inspiration? Check out EZCater's ideas and recommendations for restaurant owners and catering companies to increase mobile ordering.