A simple restaurant website

A restaurant/bar homepage for the Outlook Restaurant featuring video, hours of operation, and a big call to action button.

A restaurant/bar homepage for the Outlook Restaurant featuring video, hours of operation, and a big call to action button. This is the Responsive Theme for WordPress v.1.9.3.2 as of 5/9/13.

Restaurant websites are common, and commonly flawed.  The Oatmeal even made a comic about it! As he pointed out, they need to be simple and have the relevant information displayed as text rather than trapped in images or huge pdf files.

You want to be able to see the menu items, get the phone number, address, find out the hours of operation… What you want is so easy that it’s actually hard to accomplish.  Consider that many restaurant websites have very low budgets and the site designs begin with a free template.  It might only have space for a site logo, tagline, and then menu items.  The quick throw-it-all-together design might get the address and phone up in there, and a page for directions and hours of operation in the menu.  That seems achievable with almost any stock template out there.  For some reason with many restaurant websites, this all falls apart.  Someone eventually gets a huge blurred image of a nasty buffet and puts it at the top of every page pushing all of the content below the fold, or some other design atrocity.

Even if you’re aware of the pitfalls of restaurant websites, the cards are stacked against you.  When I received a new menu and was asked to update the content, I was sent a monstrous pdf file created by a menu designer for the printer.  It was not web friendly.  The menu section headings weren’t centered, they had spaces in front of each heading to move them to the center.

The easiest and fastest thing to do in this position is to upload the printer’s pdf of the restaurant menu and link to it, but while it’s easy to do it the end result is more difficult for view.

A menu with sections you can print and copy!

A menu with sections you can print and copy!

Most web devices have a pdf viewer, but it’s never as easy as having the menu as html right on the page.  It also takes a while on phones or devices with slower connections. So it takes a lot of time to copy the menu items out of the pdf.  You’ll have to remove spaces and weird formatting and reformat it as html.

Trust me, the effort is worth the work.

I always put a link to the pdf as well, clearly at the top of the page along with links to the different sections, with some outgoing tracking code on it.  Less than 1% of visitors want this pdf when they can scroll down the page and view the clean text.  The menu page itself gets indexed highly on search engines, and the pdf is always very low.  So all of these poor restaurant websites suffer from just uploading a new pdf menu every 6 months.  It is clearly worth taking 30 minutes to reformat a menu but I can understand how it doesn’t always happen at restaurants.

Directions

A directions tool to help visitors get directions, distance, and drive time to the restaurant without leaving the website, accomplished with google maps api.

A directions tool to help visitors get directions, distance, and drive time to the restaurant without leaving the website, accomplished with google maps api.

Lots of media mixed in with content, and custom layouts to increase time-on-site by beautifying content.

Lots of media mixed in with content, and custom layouts to increase time-on-site by beautifying content.

Luckily this is one area most restaurants have right by now.  There are so many online mapping services and most have made it very easy to link to a page with your business address as the destination.  A great directions page would end with several of those links to google maps, bing, mapquest, ect… There are also easy ways to embed directions into a page, and my favorite choice for this is google maps api.  You’ll have to get a developer key, and you’ll be limited to 100,000 requests per day.

Posted by on June 7, 2011 in Web Projects