Restaurant website feedback

I’m working on a website for a local business using react, would love some feedback.

here’s the site
And here’s the code

It’s a really simple brochure site, updating it from their old site which was pretty dated.

4 Likes

Hey, well done. Nicely done. I checked it on a phone and it’s well behaved.

Just nitpicking, maybe display pop up professional photos of the food. Maybe a few yelp review links or testimonials from customers, any magazine/newspaper reviews? Maybe repeat the address and phone contact info at the footer. Any online coupons? Again maybe or not… depending on target audience of restaurant. Buy gift certificates? Submit a review?

1 Like

Good ideas, thanks for the tips! I was thinking about listing some of the local awards and accolades in the about us section.

I’m not sure professional pictures are in the cards for this place, but I can talk to the owner about that I do like the idea of the menu being a little more interactive.

I think i want to add Gift Card purchases but I’m not certain how to implement it. Any pointers there? I know I’ve heard Shopify thrown around lol.

It’s nice, i like it.
Few suggestions:

  1. Maybe you can put a little more space where your HOURS is… It’s too close for my eye.
  2. Like owel said, i think that testimonials will be + for the site (moving testimonials)
  3. In menu, where your prices is, put some $ for price, and try to bold the price or the title of food.
  4. Like you said for the local awards. Definitely put that on site :slight_smile:
1 Like

Pretty neat design. Good Job!

1 Like

The image when you first load up is waY to dark, along with the text. Try using a cool font. Maybe add some pictures of the food surrounding the text instead of one. Or add a slideshow where the image changes underneath the text.

Nice otherwise,

1 Like

I think you could move the location to below the menu, for a couple of reasons.

  1. The food is more important than the location (I think location should come last)
  2. If you click location the menu nav is visible but not the menu items (on my 1920x1080 screen anyway).

Good work though! :sparkles: Do they deliver? :yum:

2 Likes

Looks like an awesome site! My only suggestion would be to change your menu on mobile to be 100% wide. Because when you select different menu catgories some of the categories look clunky because the white background with border changes color. If you can set them all to full page width on mobile instead of just 100% it should keep it from changing sizes.

Also one more thing. Add a little more padding on the paragraphs. Left and right. Maybe make the text bigger and add more line height to make it more eye friendly on mobile.

Looks great! !

1 Like

@stefika More padding from the landing screen? Or more more padding between the heading and the content in that section?

I’ve actually read that I shouldn’t be including a dollar sign in the prices on menus because it gets people thinking about the money instead of the food.

@silversurfer90 Thanks!

@JohnBackUp I’ll consider some ways to add a little more flare the the home screen, thanks for the input!

@JohnnyBizzel Yeah I kind of agree, I may do that. The reason I have hours above right now is I wanted the hours and location and number to be the first thing people scrolled by but now that I consider it most people just looking for that info will stop at Google and I have the link in the nav so it’s easy enough to get to.

The only thing holding me back now is I want the menu on the white background and I like the alternating white and navy dividers. I guess I could start with white and see how that goes, I just thought navy was natural since that was the color of the nav

@DanielJBailey Thanks! Can I ask what device you’re using? Or could I get a screenshot of the menu if you don’t mind? I’m having trouble picturing exactly what you mean as far as the menu goes.

Thanks for the pointers on the paragraphs too, I kind of threw that section together quickly so it has some reworking but I’ll definitely try to implement those changes.

Thank you all for taking a couple of minutes to give me some pointers! It’s very much appreciated.

2 Likes

when you’re finished with it, are you gonna send it to the restaurant owners? curious of what their response will be

Yeah I’m going to go over with the business as I get closer to finishing it. I’ve got a bunch on my plate right now so it might be a bit, prepping for a second interview at an agency, I’m starting a Udacity nanodegree on Tuesday as part of the grow with google scholarship and my wife and I are expecting and the doctors appointments are increasing in frequency lol.

But I’ll keep this thread updated as a progress

Do you not think they’ll like it?

1 Like

It’s a really good site. tho i am not sure if the owners will know how to make changes to the site, like making updates to the pics or menu. i suppose you can be the ‘go-to’ guy to update the site

Yeah that makes sense, maybe I could incorporate WordPress somehow. I haven’t used it much but I’ve heard about basically using WordPress as an update able back end API for a website.

I think the plan right now is I’ll update when it needs to be updated lol so that’d probably make my life easier too.

1 Like

Very nice! I see you were talking about (presumably, a headless) WP integration to build forms for the user to enter their own data. I’m fairly new to React (I wasn’t even aware of the tab stuff available) but I’m very interested in using it with the WP REST API. If you go in this direction please keep readers updated in this thread. Short of doing that, for a smaller project like this, with regards to the menu, at least, you could let them submit .csv files and if you taught them how and where to upload they could do it themselves (though, many people balk if it gets too deep). Whomever does it, you could write a little parser or use something like ‘Papa Parse’ and deal with their submitted .csv files. In any event, I’m really glad I looked at your project as this was the perfect time for me to see something like this.

Right now I’m leaning towards headless WP intergration I was considering GraphCMS since I was planning on learning GraphQL anyway but no self hosting has put me off.

I’ll absolutely keep this thread updated, I’ll make sure to tag you when I get moving with this again.

Hey, great work on the site. It’s simple, and gets the message across, namely, that we are the Florenzia Pizza Bistro and we are a restaurant.

Getting to the bugs, or design quirks, I suppose.

  1. The order of the navs in the navbar does not match the order of the selected section in the page itself. Specifically, the about tab is in position #2 in the navbar, while the actual about page itself is at the bottom of the page. I’m not sure if it’s been done on purpose, but it felt kinda counter-intuitive to me that clicking the tabs in the navbar in order does not result in a smooth scroll downwards, but a scroll-down to the bottom first before a scroll-up again to the menu.

  2. I recommend that you use the device toggle option of the developer options, if you don’t do so already as a quick, no-nonsense way of getting a rough look at what your site looks like at different resolutions. Moving on, and this might be related to @DanielJBailey’s post, but the kids menu, in screen sizes smaller than a computer, shrinks horizontally, which is in contrast to the computer website, where each menu’s width is the same.

  3. Sticking to mobile screen sizes, let’s move on to the pizza menu. I have a couple of design suggestions, but more of that later.

    1. In smaller screens, the Medium and the Large options of the pizza customization menu are too close together. I suggest that you try the following out, if it syncs with the aesthetics of the website.
  4. In the full-sized website, it is easy to see that clicking on the pizza menu opens up a sub-menu of pizza types since the sub-menu has a smaller width compared to the main menu. On mobile sizes though, the only indications of it being a sub-menu of the pizza menu is that it pops up once you click it, and that it’s below the main menus without any difference in the width. Of course, it wouldn’t be a good idea to decrease the width of the sub-menu, since the screen size is already small. I recommend using some other sort of visual cue to suggest to the user that the pizza-type-menu is actually a sub-menu of the pizza menu. Doesn’t hurt to make things easier for the user, right?

1 Like

Looks pretty good. The main problem that I see is bottom is bouncing up and down when clicking different Menu buttons. Make the Menu area a fixed height to stop that from happening. Also, MENU should be above HOURS AND LOCATION, because it is more important. HOURS AND LOCATION should be the last and at the bottom.

1 Like

I really like it. Nice work! :smiley:

The only thing I would change is the spacing between header elements (location, about, menu). Maybe make it a little bit smaller but that is just me. :slight_smile:

Good luck!

1 Like

@SphoorthyN Thank you for the detailed response!

As far as the visual cue to make the user aware we’re now working in a sub-menu I was originally thinking of just having the page scroll to the new sub-menu, do you think that would work?

@geekysmurf Yeah I think consensus is definitely to move the menu category to the top, thanks!

@msimic Thank you! I originally had the spacing closer together but the nav bar would obfuscate the section headings when using the nav bar, there are some other ways I could handle the nav bar though. Thanks for the input!