Grow your CSS skills. Land your dream job.

Last Round: Thoughts on my latest site

  • # March 19, 2013 at 11:00 am

    The people in this forum have been a HUGE help and very generous with their critiques. Very happy to have some spend their valuable time to look at this site:

    http://guaposcapecod.com/main.html

    And I’ll take any and all criticisms, my biggest concern is it doesn’t look great on all resolutions and I don’t know how to fix that., but I’m open to all comments or suggestions.

    Thanks!!!!

    # March 19, 2013 at 11:14 am

    Still not happy about that ‘Surf’ hover thing.

    Frankly, it’s just frakkin’ annoying.

    If it’s a site for a restaurant then I really don’t care about the surf conditions unless they are going to impact my dining experience….and does it need to be on every…damn….page?

    I’m not a great fan of the menu hover states…it’s just a little ‘in my face’ going from the yellowish color to black. A deeper ‘yellow’ might be better.

    On the ‘Locations’ page the directions links need to be easier to see in their ‘unhovered’ state. Also. although a link to Gmaps is nice, it’s not **giving me directions** which is what the links said it would.

    On the ‘Gives’ page…I hate scrolling internal divs…just let the wrapper expand.

    ‘Menu’ page…why are you taking me to Facebook? Just add extra pages.

    OK…I’ve ranted enough, I don’t want to come off as overly negative…overall I like the design but the UX/UI is not to my liking.

    # March 19, 2013 at 12:14 pm

    I think the surf thing would be okay if the transition was a little smoother. I also don’t like the fact that you don’t actually have to hover over the ‘surf’ icon to enable the slideDown.

    PDF menus make me very unhappy.

    # March 19, 2013 at 12:15 pm

    For the surf thing…is it a mandatory part of the site? If so, make the label a bit more clear as to what it is (“surf” is kind of vague) and make it a click event instead of hover.

    For the menu items, I agree with @Paulie_D. Same with the scrolling internal divs.

    As for making it fit across multiple resolutions – what exactly is the problem?

    # March 19, 2013 at 12:21 pm

    >As for making it fit across multiple resolutions – what exactly is the problem?

    He has a #page-wrap div that is set to a width of 1072px and there are no media queries.

    He’s basically stuck with desktop and tablet/landscape.

    Fixing it is a **whole** other issue.

    # March 19, 2013 at 2:57 pm

    So the surf flag – it’s intended to be a novelty feature of the site , not for any real purpose. Just something the owner saw on another site and wanted something simliar for his. SO I hear ya, but the owner wants it to stay for now. It’s supposed to be a surf report, but more the word “Surf” was to just say “Surf” as in go surf.

    The Gives Page (thanks I didn’t notice that scrolling and will fix that for sure)

    THe Links color, I agree. But again the owner wanted them to be “Hyperlink” blue.

    The width or resolution issue is at full screen on a high res monitor the site looks like it’s intended, but on a small laptop the main content get’s too big. (Yeah it’s not responsive or in any way really mobile friendly” Yet)

    With linking to Facebook (again the owner wanted to keep the audience on Facebook as much as possible) , and I agree PDF’s are not fun. However it would take another few weeks to convert all the menus to something that would work on the web , I would think. Are there ways to publish a menu (Created in Adobe InDesign) that would meet the goals of web friendly ?

    Thanks @Paulie_D and @thedoc and @theacefes .

    # March 20, 2013 at 6:11 am

    >Are there ways to publish a menu (Created in Adobe InDesign) that would meet the goals of web friendly ?

    I have very little experience with InD but I was under the impression it could export to a number of formats including HTML but what the output would look like I do not know.

    http://helpx.adobe.com/indesign/using/export-content-html-cs5-5.html

    # March 20, 2013 at 6:48 am

    To add to the critique, I’d suggest choosing a different serif that compliments Futura.

    # March 20, 2013 at 7:57 am

    On the ‘Surf’ thing…still (sorry).

    Part of the problem is…is that it’s way to easy to hit the ‘reveal’.

    I wonder if it would be possible to tweak it only when one actually hits the ‘flag?

    # March 20, 2013 at 2:21 pm

    Thanks @Chrisburton , I agree the font isn’t complimenting to the Futura. The Challenge is that all their other collateral (menus, merchandise, etc) are using the Rosewood-Fill and Futura combo and they wanted the site to match…

    @Paulie_D thanks that link helps. The Export didn’t exactly do what I was wishing, but it does give me some ideas. Is the aversion to PDF’s because not all browsers easily support them, and that they are not efficient, or SEO friendly ?

    As for the flag, yes I’ve been wanting to do that with making the event trigger just with the flag. The image I use is a 200px or so wide image with the majority of the flag-“image” being transparent pixels to get it to line up where I wanted. I’ll play with the image and see if I can that to work easily.

    # March 20, 2013 at 2:53 pm

    Why link to facebook to view the pdf menus?

    I think pdf for menus are good cause it allows user to download. Most browsers allow for downloading and viewing pdf’s. Im sure there are a select few that have issues but I have yet to see one.

    # March 20, 2013 at 3:01 pm

    By all means provide an option to download but I much prefer a menu on a webpage.

    # March 20, 2013 at 3:19 pm

    As for the “Surf” Flag Tab, I don’t think it’s too awful. I don’t think it’s relevant to the site, but in a way it does add something ‘extra’ to it. As for the site’s navigation, I would definitely change the hover effect. The inset effect is not attractive at all. Also, if you have to have the shadow effect on the text, I wouldn’t go as far as ‘black’. Try finding a mid range color between the blue background and black, you don’t want the shadow to look too unnatural.

    As previously mentioned, the resolution is definitely not “web standard” try sticking to a 960 Grid. Height-wise, you want to stay under 600px for important content. This is just a standard rule for usability design.

    Another thing that I noticed that had come up already is the menu, or the lack there of. The point of having a website is to attract and keep people on the website. Facebook is not a site, it is a Social Media tool. They are two separate entities and should be treated as such. I can understand that the Client may want to drive traffic to the Facebook page, but that is not the way to do it and it’s kind of @ss backwards to do so anyways. The point of social media is to drive traffic to the website, not the other way around.

    However, in this case, we are talking about a restaurant, so the bounce rate is going to be much higher than a typical website, just because people typically only visit these niche sites to see what they want before going to the location, to find the location, or to order something.

    Back to the ‘social media’ aspect of the business though, to drive traffic to the Facebook page, this is where businesses typically add incentives such as coupons, or daily specials, etc. So if redirecting the end-users to the Facebook page is so important to the owner, then on the site it would be best practice to have an actual menu and then have a ‘call-for-action’ that says something like “For Daily Specials and Special Promotions, Check Out Our Facebook Page!”

    Back to the layout, Why is the Navigation and Content Area so far apart? There’s atleast 150-200px space there. This could be improved. Make the content section wider, bring down the size of the logo some. Also the navigation doesn’t need to be so large.

    I noticed that you had said something to the fact that this site is not responsive, yet. The current state of this website does not allow for responsiveness now or later. You can make a few different versions of it through the use of jquery and css, but in terms of “responsive layout design”, everything on this site is static. Nothing is fluid. It would be best to get away from the fixed layout and move to something more fluid and resolution standard (960×600). When I say 600, I am talking about primary content. It’s quite fine to have things below the fold, but always keep the important stuff within the 600px safe zone.

    I want to ensure that I in no way mean any of what I said to be taken as disrespectful, only helpful. This is the whole point of a critique, to help you develop/ progress as a designer… I look forward to the changes, if any…

    # March 20, 2013 at 3:23 pm

    I viewed the site on my phone (Droid DNA) and it brought me to …./mobile and what looks to be a blank wordpress “hello world” page.

    Even without seeing it, I would rather want to view the menu from a link with the option to download rather then a pdf.

    # March 20, 2013 at 3:29 pm

    Guys, you do realize all this mean more work! lol jk

    I agree, pdf as a download but not the actual content to the site. Convert them to some snazzy html and your golden.

    However, I don’t see an issue with the menu being download only. Especially if the client has a budget of $1.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".