Website Design Forum - Designing a (Restaurant) menu

Author

Designing a (Restaurant) menu

Eric Lindsay

2006-02-24, 10:27 am

Regarding the design of restaurant menus, when presented on a web page.
I think it is worth preserving some of the traditional appearance of the
printed menu. The easy way is just present a PDF of the real menu,
however I don't like that solution.

I would like to use valid HTML, styled with CSS, and a liquid layout.
The original menu has headings for several sections, and looks like:
CENTERED HEADING
Item price
Description
Item price
Description
etc.

The items on the menu could more easily be done as a table, however it
seems to me that as the items are followed by a description, it would
also be reasonable to use a definition list, although I have some doubts
about the semantics of using a dl. For the fonts, not knowing what
people would have, I suspect some items would be best specified as
cursive? I don't think I could expect to get away with a fantasy font.

I have seen (although I can no longer locate it, nor remember precisely
how it was done) a liquid restaurant menu done with CSS. The prices
were all set to the right hand side (a span with a float perhaps).
There was a dotted line from menu item to price (a span with a dotted
border-bottom, I suspect). Most of the other examples I have found
either use tables, or use a graphic for the dotted portion, but I would
prefer not to use a graphic.

Any suggestions of examples, or better ideas before I start, would be
most welcome.

--
http://www.ericlindsay.com

Adrienne Boswell

2006-02-24, 10:27 am

Gazing into my crystal ball I observed Eric Lindsay <NOSPAmar2005
@ericlindsay.com> writing in news:NOSPAmar2005-28CCFC.16102724022006
@freenews.iinet.net.au:

> Regarding the design of restaurant menus, when presented on a web page.
> I think it is worth preserving some of the traditional appearance of the
> printed menu. The easy way is just present a PDF of the real menu,
> however I don't like that solution.
>
> I would like to use valid HTML, styled with CSS, and a liquid layout.
> The original menu has headings for several sections, and looks like:
> CENTERED HEADING
> Item price
> Description
> Item price
> Description
> etc.
>
> The items on the menu could more easily be done as a table, however it
> seems to me that as the items are followed by a description, it would
> also be reasonable to use a definition list, although I have some doubts
> about the semantics of using a dl. For the fonts, not knowing what
> people would have, I suspect some items would be best specified as
> cursive? I don't think I could expect to get away with a fantasy font.
>
> I have seen (although I can no longer locate it, nor remember precisely
> how it was done) a liquid restaurant menu done with CSS. The prices
> were all set to the right hand side (a span with a float perhaps).
> There was a dotted line from menu item to price (a span with a dotted
> border-bottom, I suspect). Most of the other examples I have found
> either use tables, or use a graphic for the dotted portion, but I would
> prefer not to use a graphic.
>
> Any suggestions of examples, or better ideas before I start, would be
> most welcome.
>

I recently did a menu for a local restaurant, and was lucky their printed
menu was all centered. However, I still used a definition list, eg:

<h2>Gourmet Lunch Menu</h2>
<p>All soups, salads and sandwiches served with French Baguette, butter and
Olives in House Spices</p>
<h3>Gourmet Sandwiches</h3>
<p>All sandwiches served with farm fresh tomato salad.</p>
<dl>
<dt>Chicken Roma</dt>
<dd>Grilled chicken breast with roasted bell peppers, Italian lettuce, with
our favorite sauce, served on olive or sourdough bread.<br>
$12.50</dd>

I'm sure that this could still be styled easily.
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

mbstevens

2006-02-24, 10:27 am

Eric Lindsay wrote:
> Regarding the design of restaurant menus, when presented on a web page.
> I think it is worth preserving some of the traditional appearance of the
> printed menu. The easy way is just present a PDF of the real menu,
> however I don't like that solution.
>
> I would like to use valid HTML, styled with CSS, and a liquid layout.
> The original menu has headings for several sections, and looks like:
> CENTERED HEADING
> Item price
> Description
> Item price
> Description
> etc.
>
> The items on the menu could more easily be done as a table, however it
> seems to me that as the items are followed by a description, it would
> also be reasonable to use a definition list, although I have some doubts
> about the semantics of using a dl.

It looks like tabular data to me.

> For the fonts, not knowing what
> people would have, I suspect some items would be best specified as
> cursive?

Oh, please not cursive! It is really hard to read, and looks
pretentious.

> I don't think I could expect to get away with a fantasy font.

California and Florida Cuisine only, and then only if
you're near Disneyland.

> I have seen (although I can no longer locate it, nor remember precisely
> how it was done) a liquid restaurant menu done with CSS. The prices
> were all set to the right hand side (a span with a float perhaps).

You can style tabular data with CSS, and the table
can be liquid. Don't avoid a table if you have genuine
tabular data.

> There was a dotted line from menu item to price (a span with a dotted
> border-bottom, I suspect).

Probably.

> Most of the other examples I have found
> either use tables, or use a graphic for the dotted portion, but I would
> prefer not to use a graphic.

border-bottom: 1px dotted #777; ...or the like.

>
> Any suggestions of examples, or better ideas before I start, would be
> most welcome.
>
Use good images, make them as
efficient for quick download as possible, and
don't use them for navigation.. Don't
expect too much from typography -- the page is going
to display in all sorts of ways on visitors'
monitors. Be sure to have a map to the
place, and make the phone number easy to find.
--
mbstevens
http://www.mbstevens.com/

Derek.Moody

2006-03-01, 8:01 pm

In article <fryLf.4782$UN.2581@newsread2.news.pas.earthlink.net>, mbstevens
<URL:mailto:NOXwebmasterx@xmbstevensx.com> wrote:
> Eric Lindsay wrote:
[color=darkred]
>
> Oh, please not cursive! It is really hard to read, and looks
> pretentious.
>
>
> California and Florida Cuisine only, and then only if
> you're near Disneyland.

Ha! I know this one ;-)

I did one a year ago - there is no way to wean the pretentious Maitre D from
his fancy founts - but there is a way to protect the rest of us.

He has a PERL script permitting him to change his menu as required. He
wants to change his fount about as frequently.

So I wrote another script to permit him to edit (some of) his own css
classes - but only allowed him to pick from a restricted range of colours
and to type in a fount-name.

How does that help?

He has a -huge- selection of PD founts on his machine and picks the
'orriblest scrawls but very few of them exist on the average user's machine
so most of the time the visitor sees the default fount that I have arranged
to be tagged on the end of the list.

He sees what he wants and most of the rest of us get something mundane but
legible.

Cheerio,

--[color=darkred]

cruiserweight

2006-03-02, 10:21 pm

Have a look at http://www.veiyotonle.com/menu.php. HTH.

Eric Lindsay

2006-03-09, 6:30 pm

In article <ant010811b49BxcK@half-baked-idea.co.uk>,
"Derek.Moody" <derek.moody@clara.net> wrote:

> I did one a year ago - there is no way to wean the pretentious Maitre D from
> his fancy founts - but there is a way to protect the rest of us.
....

> He has a -huge- selection of PD founts on his machine and picks the
> 'orriblest scrawls but very few of them exist on the average user's machine
> so most of the time the visitor sees the default fount that I have arranged
> to be tagged on the end of the list.
>
> He sees what he wants and most of the rest of us get something mundane but
> legible.

Perfect. I will do it that way. Thanks.

--
http://www.ericlindsay.com