Tackling Online Menus: Tips and Examples
Restaurant websites are quite frequently disasters of both design and usability. Even good designers can go very wrong on this particularly tricky task.
Before you attempt your next restaurant website design, check out this article. We’ll go over some super practical tips for success in addition to a few pitfalls to avoid.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Shopify, Tumblr & More
Landing Pages & Email
PowerPoint & Keynote
A Tasty Question
Joe Elias contacted us through our Design Dilemma page and asked the following question:
“I’ve picked up a handful of restaurants over the past few weeks by referral and am stuck on one thing: displaying their menus on their websites. Sure, I could go the “toss it in a PDF” route and call it a day, but I like to stand out by making my clients stand out. Any ideas for a unique, clean way to present a standard 4 page restaurant menu?”
This is a great topic that I think lots of designers struggle with. I think Joe has some key insight here but needs some help getting started. Let’s see what we can learn from a quick look around the web at websites in this category.
Screens and Paper are Very Different Mediums
In his question, Joe mentioned the “toss it in a PDF” technique used by several websites. The basic idea here is to take your print menu, upload it as-is to the web for users to download and call it a day. Though a downloadable PDF menu is a great option to provide to users, it’s definitely not the way to go as the primary way for visitors to see your menu.
Some designers take this idea a step further and actually take the time to code an online menu that is essentially an exact replica of their printed menu. Though I applaud the attempt at consistency, this is again another very poor way to go about this task.
Designers with a background in print (like me) tend to approach web design completely wrong. The assumption is that digital design is basically the same as print so everything you know about layout, graphics, etc. still holds true. This couldn’t be further from the truth.
Print is a static, passive medium. For the most part, interaction opportunities are minimal and you have to rely mostly on graphical appeal and the strength of the layout. The web however is a completely different beast, built on the idea of rich interactivity. Clicking, scrolling and hovering are just a few of the many actions that are now available. Further, you’re no longer constrained by the size of a physical piece of paper, which opens up a million possibilities.
The point I’m trying to make is that by treating web like print, you pass up a ton of opportunities to make your design more user-friendly, attractive and engaging.
Carrabba’s Boring Italian
As an example, let’s take a look at the online menu for one of my favorite restaurants: Carrabba’s Italian Grill. This is a rather large chain in the U.S. and should have plenty of resources to build a great site. However, their menu is pretty lackluster.
The roaming navigation menu on the left is a nice touch, but otherwise it’s just a big page or boring text. Seeing this doesn’t make me hungry in the least!
Make Sure You Can Read It!
The Carrabba’s menu is definitely not all bad. In fact, it ranks really high on the list of restaurant menus I checked out! Despite being low on excitement, the Carrabba’s online menu is highly readable. Their overall site design is fairly attractive, but they don’t let the design hinder the usability of the menu. When in doubt, plain is better. I’d much rather see a static, boring menu that users can quickly glean information from than something busy and unreadable.
To see what I mean, take a look at the menu above from Twelve Restaurant. For the most part, this restaurant has a great looking site, however, they often allow the background graphic to bleed through just enough to make the text on the site difficult to read. Aesthetics are important, but remember that design is more than making things pretty! It’s about organizing and styling information in a way that is both appealing and usable.
The thing that really makes a restaurant menu for me is good food photography. As I said above, words don’t make me hungry, food does! If you’re lucky enough to be working for a client with awesome food photography resources, make sure you leverage them as much as possible.
Check out how photo-centric the two menus are below. You really get a sense for what you’ll be eating and the photography is good enough that just looking at it makes you hungry!
Not Every Item Needs a Photo
Even if you don’t have images of every dish, and you likely won’t, you can still pull off a beautiful menu page that leverages photography. Check out the awesome Ruby Tuesday’s menu below, which uses a unique accordion system that expands a menu section when you click on a photo.
This accordion system works great for quickly browsing the different types of food offered on the menu. Further, it gives the viewer just enough photos to get their appetite roused without going overboard.
Bad or Missing Photos?
As the restaurant web designer, you probably won’t have any control over what, if any, resources the client gives you for the project. In all honesty, the typical restaurant client won’t give you anything near the quality of what you see from California Pizza Kitchen and Ruby Tuesday. Instead, it’s likely to be either nothing or something nearly unusable.
Food photography is tricky and it takes a real professional to pull off with any success. In the case that the client gives you photos so bad that they actually hurt the chances of someone coming to the restaurant, you’ll have to find a way to convince them not to use them. Trust me, plain text is better than a page full of gag-inducing images.
In these cases, you’ll just have to make the most of a text-only layout. The menu portion of Marie Catrib’s website does a pretty decent job of this. Notice how nicely organized all the content is and how much whitespace is present between items.
In the case that you have perfectly good images, but a fairly odd collection of them, it can be difficult to figure out how to work them all into your design. The Chez Gerard menu below takes care of this problem nicely by offering hidden photos that appear when you hover over certain menu items.
Lots of restaurants want to appear refined and high-class, so the instinctive move for designers is to use lots of flowing scripts. I highly recommend avoiding a page full of script typography, it simply becomes far too difficult to read. It’s all right to use it selectively, but just keep in mind that it’s easy to go too far.
Also, it goes without saying, stay away from Comic Sans and any other fonts that your client thinks look fun. If you want your restaurant to look high-class, find a strong old style serif. If you genuinely want it to look fun, consider pulling this off through the graphics and sticking to a nice modern sans-serif for most of the type.
However, if you really want to go all out with fun fonts, you can definitely give it a shot. Many designers can pull this off with no problems whatsoever, others crash and burn immediately. One site that I think did a fairly good job is The Little Cake Parlour. Though I’m not crazy about the center-aligned column layout, the fonts used throughout this site look great together.
Want customers to spread the word about your restaurant? Why not work in some unique social media integration? The best implementations of this I’ve seen allow visitors to share specific menu items that they like.
For instance, the Giraffe menu has a Facebook like button next to every single menu item so users can easily recommend specific dishes to their friends.
Online menus can be a real pain to develop. It’s difficult to organize so much information into an attractive and usable format, but I hope the tips and examples above are enough to get your project started in the right direction.
If you’ve designed any online restaurant menus lately, leave a comment below with a link so we can check them out!
Post title image taken by clspeace.