Designing a Restaurant Website - Eat, Drink, and Write Copy

I am a millennial.

And as such, I am slavishly devoted to a food item called the Avocado Toast. On their own, both toast and avocados are bit bland. But when you mush that fatty avocado goodness onto a piece of crispy toast and add a sprinkle of salt and pepper on top, some kind of food alchemy turns it into a gift from the gods.

A great restaurant website is the Avocado Toast of your marketing. Your site design is the crispy toast. Excellent, SEO-focused copy is the avocado.

And when it comes together, magic happens.

While I know a lot about the copy side of the restaurant website, I’m no designer. So I chatted with web developer Melanie Garvey from Baked in Code to get her insight into what’s important when it comes to website design, and why restaurants should even bother with a website in the first place!

Why should restaurants have a real website instead of just relying on a Facebook profile?

Melanie says:

I often see individually-owned restaurants using Facebook as a substitute for their own websites, but there are some definite disadvantages to this. Here are my top three reasons to not simply rely on Facebook:

#1. You blend in...in a bad way

You don’t have complete control of the look, feel, and narrative which makes you less memorable in the minds of potential customers.

#2. Missed revenue

You are losing a chance at another stream of revenue because you can’t set up features such as an online store or online ordering on Facebook.

#3. Algorithm hell

If you get stuck in the matrix of a bad algorithm, you run the risk of your page being taken down or getting locked out. This can be costly if you are depending solely upon someone else’s platform (like Facebook) to market your restaurant.

Kate says:

Another reason—Facebook and other social profiles won’t help you in local Google searches. Right now, open your web browser and search for “tacos near me.” I’ll bet you one delicious carnitas taco that none of your results will be from Facebook.

That’s a problem. Especially because 76% of people who search for a local business on their phone will visit a physical place within 24 hours!

By relying on a Facebook profile, you prevent your restaurant from being found in this type of search by hungry customers—and why would you want to do that??

What should a restaurant website include, beyond the menu and phone number/location/hours?

Melanie says:

This can vary depending upon the type of restaurant, but let’s just assume that it’s the nice cozy Italian sit-down joint around the corner. For this scenario here are the bare minimum items I would recommend to include:

Online reservations
Online ordering
Social icons which are linked to all of their social media accounts
An explanation of their COVID-related procedures
The design of the website itself should be responsive, meaning it looks good and is functional on every device such as a cell phone, tablet, or desktop.
Professional photos of the interior, the owner, and of course the food (I suggest checking out food photographer Amanda Richardson).
Copy that tells people about your story, entrees, and the overall atmosphere written by yours truly Kate McDermott!

Kate says:

I promise I didn’t tell her to say that last part.

What is your biggest restaurant website design pet peeve?

Melanie says:

It would have to be PDF menus! They are so hard to read on your phone when you are out and about and trying to figure out where to go. Plus Google doesn’t like them either which can affect where your restaurant shows up in search results.

PDF menu on mobile with tiny text too hard to read — Tiny. Impossible to read.

Kate says:

Melanie and I are 100% in agreement about this. PDF menus are no good and have to go!

Another thing I can’t stand—music or videos with sound that autoplays.

Put yourself in the site visitor’s shoes. You’re quietly looking for a restaurant for that night’s dinner with friends. You have a few tabs open, and you take a sip of morning coffee…and then

🎶 BWOOOOWWWWWWWWWW 🎶

Please don’t do this to us. It’s outdated, and it will “out” people when they’re doing a little restaurant recon at work. (Don’t judge, we’ve all done it.)

Let's talk about accessibility.

Kate says:

Accessibility is something that restaurant owners think about a lot. Bathrooms have to be ADA accessible, ramps must be provided, and kitchens have to cater to a variety of food allergies.

But on their websites, accessibility doesn’t get much attention.

Can you explain what we mean by “website accessibility,” and why it’s so important?

Melanie says:

I do find it ironic that accessibility is required in our physical spaces, but we have not made it to that point in terms of our virtual spaces. We’ll get there, but in the meantime a good place to start would be by…

Utilizing colors that have a strong contrast against each other
Inputting alt text (alternative text) on the backend of your site for all images
Implementing headers on the backend of your site in the appropriate manner

Kate says:

Using headers helps create a logical, easy to follow structure on your restaurant website. By using just one H1 header per page, and nesting your H2 and subsequent headers like an outline, you make the page easier to skim and provide a better use experience.

To learn more about alt text, check out this blog post in the section under “High Quality Photos.”

Tell us a bit about your Restaurant Starter Kit.

Melanie says:

One of my core beliefs is that tech should always be an accelerator and not a barrier. With that in mind, I created the Restaurant Starter Kit which is a free video tutorial series where I teach how to create and launch a website in plain everyday language.

This tutorial series is aimed at small restauranteurs that might not be in a place right now to hire a web designer and that is ok! I feel strongly about wanting everyone to succeed which is why I created the Restaurant Starter Kit.

Kate says:

Thank you Melanie for sharing some of your wisdom with us today!

Head over to her website to get her free Restaurant Starter Kit. And if you need more help from her, you can also follower on Instagram.

Designing A Restaurant Website: Tips From A Pro