Why are restaurant website menus so terrible? Too often they exist as dysfunctional blights on otherwise very nice websites (though surely many are nicer than others). Some of us at Unit Interactive thought it would be nice to show a few examples of how these vital pages can quite easily be done better. What follows are our fun exercises in usable menus.
In this Tex-Mex restaurant menu example, brand flavor and texture is conveyed with simple CSS techniques. With a little JavaScript a Southwest landscape comes alive to add delight. The desktop experience is very like a traditional printed menu, but scrolling adds a little flair to the experience, as clouds move in the landscape. The title type helps to support the brand, but utilizes a web font service rather than imagery (making updates as easy as typing in the HTML). The responsive CSS allows for consistent and usable content presentation no matter the screen size.
As you scroll down the page, you get the feeling of sunset on the mesa, complete with a series of parallax clouds. Each menu section converts to a one-column layout for readability on mobile devices.
This sports bar menu example shows how it’s easy to serve up a large, tasty image of every item on the menu without cluttering the page and by way of a simple interaction: scrolling. The design and aesthetics of the interactions work to maintain the bold branding flavor of the restaurant. The handheld experience is made more contextual by way of two strong departures from the desktop experience. First, images are eliminated to cut down on content loading size. Second, the top-of-page navigation moves out of the way to the bottom of the page. If you tend toward geekery, you might make note of the randomized background image pattern (sports balls, of course) created by CSS trickeration. Read more about R.A.'s menu in his project detail article.
At larger sizes the image changes when scrolling, so every menu item can be "featured".
The mobile-optimized navigation sits at the bottom of the page.
As this example of a fine dining menu example demonstrates, the elegance of a minimalist, high-end menu can easily be preserved when brought to the web. Here, the brand is maintained in the brand-specific font served up by a web font service. Moreover, the simplicity and focus offered by single-page sections on the printed menu is conveyed here by hiding and showing categorized content with some JavaScript tied to the category navigation. The result is branded elegance almost identical to the in-restaurant menu experience…that works on any screen size, all through easily-updatable HTML text and image content.
The tablet size features a large wordmark and simple navigation. The desktop version leans heavily on well-balanced white-space to enhance elegance.
