What a Restaurant Website Should Have

When it comes to restaurant website design, there are many different directions or approaches you can take depending on what kind of restaurant the site is for, however there are some basic commonalities that should (in our opinion) be present in most restaurant sites. In this blog post we'll go over and explain some of these key elements. Keep in mind that every restaurant is different, and therefore every restaurant website will be different.

The Header

A website's header is arguably one of the most important aspects of a website, whether it's for a restaurant or not. It's where the website's navigation buttons will be about 95% of the time, it's where the restaurant's logo will be displayed most prominently, and is most likely present on every single page of the site.

A good header should have a clear, clean look. The navigation buttons should be clear and concise. This will always vary based on the needs of the site of course, but 5-8 navigation buttons is probably ideal. Social links can also be an important component if the restaurant has an active social media presence, which they absolutely should have. If the restaurant has an online shop selling merchandise or products, a cart icon in the header can be a convenient way for customers to use that online shop. A reservation button can also be an important feature to display in the header, so that customers can easily find it if they're accessing the site with the intention of making a reservation.

Overall, the header should act as the headline for the website. It should be clean looking and easy to navigate, and have all the necessary, prominent information readily available.

The Hero Section

The “Hero Section” is the first section on the landing page of a website. It will be the first thing users see when accessing a site, along with the header. When it comes to restaurant websites, a full screen or large slideshow of images (usually not just one image) depicting the restaurant's food or the food being prepared is a very common route to go for the Hero Section. The restaurant's logo or name are commonly displayed over the images or near them.

Another option is to have a few key navigation items showcased in the Hero Section, such as Menu, Reservations, or Take Out. This approach ensures these navigation links are front and center on the website, and can make it easier for customers to find what they're looking for right away. If a customer is accessing the website with the intention of placing a takeout order or making a reservation, they will appreciate those options being readily available to them.

Some restaurants may wish to have a video displayed in the Hero Section, perhaps showing their food being prepared, staff interacting with customers, or any combination of scenes. Keep in mind that images and especially videos must be compressed to the correct size to ensure they don't significantly slow down the site.

The Menu

It is a website for a restaurant, after all, and customers will undoubtedly want to see the menu. There are a few routes you can take when it comes to the menu.

A simple PDF of the restaurant's menu is a very common option, but not necessarily what we suggest. While a PDF canbe just fine, we prefer a menu created specifically for the website. The main reason for this is the mobile view of a PDF. With the most website traffic usually coming from mobile devices, this is something we must consider. Users may find it tedious to zoom into a PDF and navigate the menu on a mobile device.

If a PDF menu is something you're dead set on, we suggest using that version for the desktop view of the site, and scoping the PDF version to only be displayed on mobile devices. The version created just for the website can be very similar to the PDF, or even virtually identical; the only difference being it will be optimized for viewing on a website.

Easily Accessible Address, Phone Number, and Hours

The restaurant's address, phone number, and operating hours should be clearly visible on the site without making users click through a thousand pages to find them. Remember, listing this information accurately can help improve the site's rank in Google search results.

The Design Aesthetics

When it comes to the branding of a restaurant, what comes to mind? The logo? The font? Colors? These are all important, but what does it feel like to be in the restaurant? We think the feel and ambience of the restaurant should extend to the website as well. We should try to recreate how it feels to be sitting at a table inside the restaurant when designing the website.

We think this website does a good job of this. When viewing the site, it feels like a casual seafood restaurant. The colors, fonts, images, and textures of the website all contribute to this.

The About Section

The about section is especially important for new customers who may not know much about the restaurant. One to two paragraphs describing the restaurant and mission will do just fine. It should make a prospective customer think “Wow, I really want to try this place.”

Another aspect of the About section could be a “Meet the Staff” or “Our Staff” portion. A picture, name, and role of key staff is good to have. If you want to take it a bit further, consider asking staff some questions such as “What is your favorite thing to cook” or “What made you want to become a chef” and have their answers displayed along with their picture, name, and role.

Catering

If catering is an option at a restaurant, a Catering page is important. It doesn't have to be too complicated, a brief description of the catering service, a rundown of the different catering options such as staffed or un-staffed (if applicable) and perhaps some related images.

A well made form for customers to fill out is important as well. Fields of the form could include the date of the event that needs catering, the amount of guests, where it is, and space for any other information the customer wants you to know.

Integration with Tock, Toast, or Open Table

Let's break down these three services. All three offer similar services, but each of them is unique.

Tock: Tock is an all-in-one reservation system that integrates into a restaurant's website. It's a great tool for handling reservations, takeout orders, and events. Click this link to learn more about Tock.

Toast: Toast is used for takeout orders as well as digital gift card system, digital dine in and fast pay. In addition, Toast can be used in the restaurant itself for point of sale management system and other digital solutions within the restaurant internal operations. Click this link to learn more about Toast.

Open Table: Open Table deals with reservations exclusively. On the Open Table website users are able to filter their searches for location, restaurant or cuisine, time and number of people. Customer reviews are also a prominent in Open Table. Click this link to learn more about Open Table.