First impressions are everything, and with over 80% of customers looking up restaurants online before dining out, your restaurant website can be a powerful tool for your business. But there are a lot of different options for designing your restaurant website, and while there's no one "right" way to do it, there are a lot of... eh, "less-right" ways. To steer you in the right direction and inspire the build-out of your restaurant's homepage, digital menu and online store (yes, you should have an online store!) we’ve rounded up some of the best restaurant websites out there today, and highlighted the elements that make them so outstanding.
Quay’s website is all about sophistication. They minimize clutter on their homepage with a discrete hamburger navigation (that’s what you call a navigation section that is made up of three stacked lines) that expands into a full list of options when you click on it. Since reservations for this award-winning Australian restaurant are a hot ticket, they make it easy for website visitors to find with a sticky reservations button that appears no matter where you go on the website.
Pro tip: When designing your restaurant website, think about what your guests will be looking for the most and make it a fixed piece of information, accessible from every page.
New York, New York, United States
With its rustic Italian accents, Maialino’s restaurant website gives all visitors a warm welcome. The trattoria also has text-based menus on their restaurant website. This means no PDFs. PDFs are not your website’s friend, and therefore they are not yours, either. They'll slow down your website load time and hurt your search engine optimization (SEO), which is marketing-speak for saying it will be harder for guests to find your restaurant when they Google you. The horror!
Pro tip: Maialino and every other website on this list have something in common. They are all responsive—a.k.a. mobile-friendly. If you do only one thing with your restaurant website design, make sure it’s responsive. A responsive restaurant website means that it can adjust its format between a desktop and mobile view. Over 80% of diners check restaurant websites from their phone, so if your website isn’t mobile-friendly, you risk losing a massive chunk of your online visitors.
Colorful and vibrant, El Burro gives it’s website visitors a slice of Mexican street food culture while still keeping things simple. The Oslo restaurant uses a single page navigation, meaning that all the information is presented on one page. Information can be accessed by clicking on the navigation bar or simply scrolling down. In their contact section, their location information opens directly into Google Maps, making it a breeze for anyone trying to find their spot.
Pro tip: Don’t make your customers dig for your contact and location information. Make sure you have a contact section on your navigation menu with all your essential details.
Minneapolis, Minnesota, United States
Less is more with this restaurant website. Kado no Mise makes sure there are no distractions with their clean design. The top navigation bar puts all essential information front and center, placing the focus on their available dining options. Another great thing that this sushi restaurant does is offer gift card sales directly on their website. With online ecommerce features integrated into a restaurant website, you can skip third-party fees and control all your profits.
Pro tip: Kado no Mise’s restaurant website allows them to post homepage notifications. Through a banner or a pop-up notification, this communication tool will help you announce specials, events and last-minute changes to whoever visits your website.
Martha's Vineyard, Massachusetts, United States
When you land on Rosewater Market’s home page, you’ll find a split-screen layout. This is when a page is divided into two main pieces. In this case, you can journey to their restaurant or their wine and spirits store. It’s a great option if your restaurant has more than one component, or has two locations. The Martha’s Vineyard market also does an excellent job highlighting their catering offerings in their navigation menu. Catering is one of the best, high-margin ways to drive revenue off-premise, so bringing attention to these offerings only strengthens their website.
Pro tip: As you scroll through Rosewater Market’s restaurant website, you’ll notice that some of the photos reveal themselves or almost move as you go down the page. These are called "parallax" photos and are a fresh design option to integrate, especially if you have strong photography.
New York, New York, United States
Whitman’s really pulls their website together by sticking with their brand colors, blue and white. They even subtly show up in their mouthwatering photos. Whitman’s press page is also a pro move. Not only does it allow the burger spot to show they are the talk of the town, but linking out to other reputable news organizations strengthens their SEO. The better your SEO, the more restaurant website visitors you’ll get.
Pro tip: When building your press page, make sure all links open into a new window. The last thing you want is for a guest to be guided away from your restaurant website. Linking to a new window makes it easy for them to tab back.
Multiple locations, United States
Protein Bar & Kitchen has over 15 locations. Rather than have a separate website for each, the restaurant brings its brand together on one website. They make discovery of all their restaurants a cinch with a store locator built into their websites. Visitors can check out the hours, phone number and address of each location from one spot. It’s a fantastic example of how to display a multi-unit restaurant.
Pro tip: There are so many outstanding restaurant workers out there looking for employment. Let them know your hiring by adding a “Careers” section to your restaurant website, just like Protein Bar & Kitchen has done.
When you land on Green Rebel’s restaurant website, there is no question that they are all about veggies. The Canadian fast-casual joint uses textured backgrounds contrasted by crisp, animated photos showcasing their style and ingredients. Green Rebel also features online ordering options in their navigation. Online ordering check sizes can be up to 23% higher than in a restaurant, so you want to make this feature prominent.
Pro tip: Green Rebel uses both video, photography and illustrations on their website. No matter what visuals you land on, make sure they are high-res images.