1-Jul-2011 (Fri) Wherein we go wide-screen.

Check out the DNA Pizza site: I stitched together some photos of the dining room / poster gallery and put a scrolling, draggable 360° panorama on the front page. What do you think?

I'm not really sure what to do with that site, design-wise. I'm not very happy with it. On the other hand, it has the address, hours, menu, it doesn't auto-play music, and it doesn't make you download a PDF, which puts it miles ahead of every other restaurant web site in the world.

26 Responses:

  1. Meredith Yayanos says:

    FWIW, I think it looks fucking great, man. Can't wait to grab a slice there, come August!

  2. Matt O'Donnell says:

    add online ordering for delivery!

  3. spoonyfork says:

    Surprised to see cents in the prices.

  4. Rob Lennon says:

    This is indeed light years ahead of other sites. There's nothing that drives me more crazy than not being able to select/copy/paste text (such as the address) off of a restaurant site.

  5. Jamie Zawinski says:

    Online ordering is Hard. Maybe someday.

  6. Peter Bierman says:

    Give the webpage more color. Black & Green is great for a nightclub, but the pizza place is bright and colorful in real life.

  7. fantasygoat says:

    There's a lot of information there and it's all the same shade of green - it makes it really hard to parse. Maybe some shades of green?

  8. Jamie Zawinski says:

    I've given up on Facebook's commenting system; let's see if Disqus is better...

  9. DFB says:

    Panorama would work better as a nighttime view. "Free wifi" could be in boldface. Does the panorama cause problems on mobile devices?

  10. tkil says:

    It's a bit twee, but I have a mental image of the different sub-menus being presented on a slice of pizza each: either just a big static round, or a single large piece with next/prev action.

    [Aside: you allow "blockquote", but not "q"?]

  11. 205guy says:

    I'm no design guru or website programmer, so maybe you'll like these:

    - Free wifi in +2 size, and make it blink for old time's sake.
    - (if you're still reading...) Phone number size +1
    - Put the icon mess (FB, tw, and RSS) in the Updates box
    - Address should link directly to map
    - Change "Espresso drinks" to just "Espresso"
    - Link to photos of the pizzas; make sure photos look appetizing.
    - Please add "Sandwiches toasted in the oven with Italian dressing, like my mom used to make." (requires some backend work too).
    - While I'm at it: menu needs a veggie alfredo pizza (or just offer white sauce option on any pizza)

    - Bonus: center it on the iPhone

    Oh, and you might want to get into Google's place database somehow so you show up when people search for "pizza" on their mobile devices.

    • Stephen van Egmond says:

      My girlfriend does food photography. It's hard. The reason most amateur food photos suck is they take photos of real food. Usually the oil or moisture catches the lights, and it looks shiny and gross.

      The reason most pro food photos look good is they take photos of stuff that resembles real food but isn't. Shellacking it with a matte shell usually helps.

      http://www.pixiq.com/article/food-photo-tricks covers it.

  12. Andreas says:

    This is what I wish every restaurant website was like.

  13. ExitTwo says:

    I do not much fancy the design either (but then I'm not a huge fan of green on black to begin with). Love the scrolling panorama. Perhaps you want to make a mobile version that simply leaves it out (not sure how data connections are over there, but lots of people still surf on slow phones and it does slow things down just a bit).

    I'd also put a link to the menu above the fold somewhere. Probably the only reason people are on the site.

    Alternatively, you could experiment with using a small logo top left, put the panorama at the top (you can overlay it on top of the big logo if it loads too slowly, or only load it if not on mobile) and put all that practical information in the left gutter. That frees up space to put the menu front and center. Makes it slightly wider though, not sure how that would look on an iphone.

    Just my 2c.

  14. Jon says:

    I like the panorama; do you mind me copying the script?

    About the design: I second the thought of adding picture(s) of pizza. There's a restaurant-search site (pizza.de) in Germany which hosts pages for lots of delivery places. I like their design and for every page in the menu it includes one very good looking picture of the food which certainly inspires my appetite.

    For example:

    About Disqus: I don't like that I have to activate 3rd party cookies to post a comment.

  15. mentallilll says:

    document.getElementById("panorama").setAttribute("onMouseover", "javascript:panorama.step *= -1") ?

    I have no idea whether that does anything on IE, but a mesmerizing animated panorama totally should change direction once in a while (also, you cropped out the plumbing!), and that works in the ctrl-shift-K console thing in mozilla.

    Can I have L-glucose sauce on that pizza?

    • mentallilll says:

      It's broken right now, because you call setTimeout ("panorama.scroll()", panorama.pause) when panorama is a local variable, so (obviously) not captured by a string. Replacing that by setTimeout(function () { panorama.scroll() }, panorama.pause) fixes, and fixing line 120 to be "function (event)" rather than "function (e)" restores draggability.

      I, uhm, might be a little addicted to this.

      • Jamie Zawinski says:

        Huh. It was working for me in Safari. Remember when languages had compilers that would give you warnings about free variables? Yeah, those were the good old days.

        • mentallilll says:

          Lambda calculus had this figured out, arguably. In 1936.

          But we get to omit semicolons now, chars are 16 bits (except when they're not), and the Google logo is burned into a data URL in an XML file four subdirectories into the mozilla source tree (as base64, of course, using 6 of those 16 bits). That's much better than having your code "work".

          Anyway, it's all working fine now, on a recent mozilla-central checkout, and setting panorama.pause = 0 is the new bogomips.

  16. ducksauz says:

    This is what every restaurant site should be. One page, no crap, easy to read menu. Also, I don't agree with the people who want you to put pictures of the food up. It's pizza, we've all had it, we all know what it looks like.

    Also, thanks for dropping the FB comment system.

  17. Dr. Eggroll says:

    Consider making the current four boxes at the top shorter, or another possibility is to make them narrower into squares, suggesting pizza boxes.

    Either way, that will allow the display of a bit more information in the first screen a mobile visitor sees, and leave room for an above the fold link to the menu, to say nothing of subtly reminding people of all the delicious boxed pizza they should be ordering from you.

    If you go square that leaves room for at least an extra column of squares, or balance it out with some arty/stark industrial blank space also providing room for future developments.

    Later if more art is decided on consider having an icon for each of the major types of foodstuffs offered: coffee cup, sandwich, salad, whole pizza, single slice, a pint glass, appetizer basket, maybe a car icon for delivery, etc. Some could also be used as links from above the fold to the full sections where they are displayed in blank space near the section’s title, or used enlarged and muted in the backgrounds of each section.

    This will give a quick visual presentation of what you offer too, all the better for people’s memories and getting the news about your offerings out, and appealing to hungry and rushed people.

    This is fairly off the cuff, I wish I could show you a finished layout of what I’m getting at. I like the spirit of your work and blogging so I wanted to chime in.

    Btw, I like the general boldness, the panorama seems great on wifi from a mobile device, but so fast on a desktop browser that it felt more quickly played out.

  18. shandrew says:

    Make the big icons and their descriptions clickable; they should go to the menu.