Critique the web page I made for my friend!

[njtt]

The HOME button (on non-home pages) moves to the left when you mouse over it, and makes the whole row of buttons move. Not good.

Like others, I dislike the very saturated green and yellow colors for the main part of the page (I don’t think it is the hues that are the problem, it is the fact that they are so saturated), and the shaded bar below the title image, touching the big yellow rectangular area makes it look as if some of the yellow has bled out to the top left. What is the point of this bar anyway?

Presumably because you are using large PNG files, the title image loads slowly on initial load, and has a pixellated look as it is loading that I find unpleasant.

[BigT]

The last image on the navbar doesn’t match up with the image on the far right, although everything else matches up.

Your image gallery is not loading correctly. Your permissions seem to be off. The error reads

Warning: imagejpeg() [function.imagejpeg]: Unable to open ‘gallery-thumbs/Photo_060910_004.jpg’ for writing: Permission denied in /home/silviaso/public_html/php/galleryFunctions.php on line 15

And, yes, I agree the poster above. PNG is not the way to go with decorative photographic images. Stick with JPEG, and try to get them as small as you can, while still remaining fairly high quality. Save the PNGs for the actual photo page, where the images are functional and the minimal differences in quality may actually matter.

The goal is for your main page to load in less than 30 seconds on dial-up. While most people don’t use dialup anymore, people have also gotten more impatient, so it’s still a good goal, even if you don’t have to exactly make it.

[carnut]

@Stan_Shmenge

Never thought of that! Care to let me know about one?

I’ve used vischeck.com amongst others.

[Stan_Shmenge]

Here is a multi-reply to my request for criticism of the webpage:

http://www.silviasorganicfarm.com
Thanks for all those who made a bunch of very constructive comments, and thanks in advance for those who are seeing this thread for the first time and have something too add!

@sandra_nz

Criticisms incoming…

I don’t like the colour scheme. I can appreciate the desire to be ‘green’, but the green and yellow looks cheap. Something like this: http://www.localharvest.org looks a lot classier to me, whilst still retaining the ‘natural’ look and feel. Here’s a similar theme as well: http://www.theorganicfarm.co.uk/index.aspx

The font is huge, which again cheapens the look of the page. The Facebook and Twitter buttons at the bottom of the page are also huge and have a weird border around them.

I also think the main picture is far too huge and on my browser it’s overlapping the border of the page. I’d rather it was offset to the right of the first paragraph of text, or something like that. I don’t like being presented with a huge graphic and having to scroll down the page to see what the website is actually about.

lucassy2004@yahoo.com is a really crappy email address. Yes, I know this is really picky, but as a potential customer, I’m put off by stuff like that. I’d imagine silviasorganicfarm@gmail.com is available and would be a lot classier.

Thanks for a most informative post. If you check the page again, you will see that I have dealt with most if not all of these issues.

@Brown_Eyed_Girl

The ‘old timey’ look of the header font is undermined by the color and shading of the text, which just looks too flashy and doesn’t stand out as well as you think it does against the similarly colored background.
It is too much green and yellow and you can’t introduce more colors because you are saturating the page with green and yellow. If the green and yellow theme was more trim than saturation, then you could bring in more colors via Silvia’s actual product, without risking everything looking like a 3-ring circus.

Also, visible tables is a really dated method of layout. Makes the website feel stale, like it hasn’t been updated in 10 years.

On the media page, instead of linking thumbnails directly to the photos which creates a new page for each one, it would be better to link the thumbnails to an embedded, navigable slide show. This section could also benefit from some captioning. What are we looking at? Yes, vegetables, I see that. But what should I, as I potential customer, know about these particular vegetables? Why should I want them?

In the About and Produce sections, there is no content above the fold because the images are large and centered above the text. The pages feel very imbalanced as a result and there is nothing to encourage the reader to scroll. The images need to be scaled and consistent to allow for cohesive flow between pages.

Personally, I think the header takes up way too much real estate. Well, everything is just a bit too big. I have trouble reading small font as well, and sometimes find myself enlarging fonts while surfing, but I would advise against trying to buck the standard. Let your readers decide what size font they want to view it in by keeping sizes relative and your site dynamic, but at the same time don’t make everything so big that it feels like going back to kindergarten.
ETA: I’m viewing in Firefox 4.0.1.

Again, thanks for the informative post. I think I have taken care of most of these issues. Will be interested in your response for further refinement.

@GuanoLad

There are plenty of sites that list different gallery software, each of which should have a guide to implement them, no coding knowledge required. Just stick the script in a folder, point to it in the header, and then place it in the text flow.

The heading is a single wide image, causing side scrolling. You need to make it a background to a fixed width header instead, in CSS. That way the “overflow” is “hidden” by default.

Image gallery is now working, I believe. Thanks!

@G-SE

3 criticisms:

• Image optimization. The filesizes of your header, navigation and main page images are ridiculously huge. There is no reason to use pngs in most of these cases. The header and main page image should be jpgs, and you can replace the mouseover images & text of the menu with css text.

• I’m not a fan of the orange & green color scheme, but most off all the link color is a bit hard to read

• Top to bottom layout. On some pages, the layout is just simply cram everything in top to bottom. For example, the “about” page has a vertical picture on top, with the text on bottom. This could be rearranged side by side and still fit all information above the scroll.

Got it. See what you think now!

@RaftPeople

Too many visual breaks.

In between the header and the horizontal line the background shows through, which creates a horizontal line. Then there is the actual horizontal line. Then background shows through again looking like another horizontal line, then you have the border around the content and then the content area background of yellow and another border around specific text and images.

All of that adds up to something that feels broken up, like the eye is constantly readjusting to different contexts. I think you need to reduce that, I would recommend looking at nice web sites and seeing how they reduce that feeling of visual/border complexity.

I have simplified the visual clutter. Let me know what you think now!

@Omar_Little

All of the fonts seem very large, like the intended audience is elderly people with poor eyesight.

I took the size down a notch or two, but I’ll be dammed if I make people squint. I have fit all my content in.

@rachelellogram

Most glaring problem atm is the need to rework the banner image so there is no horizontal scroll bar in a standard browser width (800 pixels or a little shorter, maybe 780 would be good).

And as mentioned, the color scheme is gaudy. Try to play around with a lighter palette. Mint green and light yellow are actually soothing colors, whereas full saturation is more of a visual assault.

Well, most browsers are giving a scroll, but I changed to center based design, so let me know how that works for you. Thanks.

@Brown_Eyed_Girl

Well, here’s hoping your future website gains her lots of success. I’m all for organic farming. The less corporate, pesticide-ridden GMO farming, the better!

Thanks! Scientific American can say what they want about nutrition, but organic wins hands down for taste! You may not live longer but you will enjoy eating tomatoes that don’t taste like candle wax!

@colonial

**Blocked by my Trend Micro.

“Dangerous Page” **

Any other Trend Micro people around here?

Yes, is it still doing that? For a time the page wasn’t hosted and was going to some operator that diverts unhosted domains. Hope this is fixed. [SIZE=“6”]WOULD REALLY APPRECIATE KNOWING IF PEOPLE ARE STILL GETTING THAT MESSAGE![/SIZE]

@njtt

The HOME button (on non-home pages) moves to the left when you mouse over it, and makes the whole row of buttons move. Not good.

Like others, I dislike the very saturated green and yellow colors for the main part of the page (I don’t think it is the hues that are the problem, it is the fact that they are so saturated), and the shaded bar below the title image, touching the big yellow rectangular area makes it look as if some of the yellow has bled out to the top left. What is the point of this bar anyway?

Presumably because you are using large PNG files, the title image loads slowly on initial load, and has a pixellated look as it is loading that I find unpleasant.

Fixed fixed and fixed. If you don’t like my gradient bar, ok. I may make it thinner

@BigT

The last image on the navbar doesn’t match up with the image on the far right, although everything else matches up.

Your image gallery is not loading correctly. Your permissions seem to be off. The error reads

And, yes, I agree the poster above. PNG is not the way to go with decorative photographic images. Stick with JPEG, and try to get them as small as you can, while still remaining fairly high quality. Save the PNGs for the actual photo page, where the images are functional and the minimal differences in quality may actually matter.

The goal is for your main page to load in less than 30 seconds on dial-up. While most people don’t use dialup anymore, people have also gotten more impatient, so it’s still a good goal, even if you don’t have to exactly make it.

I think I have taken care of those issues, thanks to you and all who have suggested similar.

@carnut

I’ve used vischeck.com amongst others.

Thanks, I think now that I have toned down the site it may not be as big of an issue, but I will check it there.

[Rachellelogram]

It does look better than the first iteration I saw, especially the color scheme is much nicer now. However, I still think the width of the banner image is massively offputting. It’s the first page a potential customer will see. If I were a consumer of organic foods and stumbled across the site, I would click the “back” button and move on after seeing that.

IIRC you had mentioned that your customer “insists” you use that banner image. Tell her that you NEED to shrink that banner unless she is seriously ok with scaring off customers. It looks like crap! I always run small browser windows, and this is what I see when I click on the site link.

Consider that people running at lower monitor resolutions will not be able to see the entire page without being forced to maximize it. This is poor web design. There is no point in having a massive image that will turn off as many customers as it will attract.

[Dr.Drake]

Agreed, tons better. The only mild critique is the grey space at either side all the way down—is that to symbolize the desert that non-organic produce is creating? Some of the colour contrast is a bit off, too: the orange / green mix could use slight tweaking, and the yellow behind the green is a little too brown.

Also, I’m not sure if you’re covering the text! Which is very enthusiastic! I think the exclamation marks might be overkill!

[ZipperJJ]

Three quick things:

1. Set the Facebook image on the front page to have border=“0”.
2. Don’t require someone to contact Silvia in order to join the mailing list. Make it two separate things.
3. Send me the photoshop file (psd, with layers) of your header/banner and I will fix it so your site doesn’t side scroll. It’s been driving me nuts since you put it up and I can’t take it anymore. (email is my username at gmail.com)

[Disheavel]

I think you really need to have farm address/location more prominent. I don’t know where the place is (other than a brief mention of Salinas) but you won’t have much luck with “Google hits/prominence” unless you get something like “Organic strawberries Salinas/94xxx” to connect with your website.

[Stan_Shmenge]

@rachelellogram

However, I still think the width of the banner image is massively offputting. It’s the first page a potential customer will see. If I were a consumer of organic foods and stumbled across the site, I would click the “back” button and move on after seeing that.

IIRC you had mentioned that your customer “insists” you use that banner image.

No, I have creative control of the site. I am doing this as a freebie for her, so she controls the content and I control the look. I will be shrinking the banner somewhat, but that is a big old grind in Photoshop to do, the banner is made up of like 30 individual images.

Tell her that you NEED to shrink that banner unless she is seriously ok with scaring off customers. It looks like crap! I always run small browser windows, and this is what I see when I click on the site link.

Consider that people running at lower monitor resolutions will not be able to see the entire page without being forced to maximize it. This is poor web design. There is no point in having a massive image that will turn off as many customers as it will attract.

Well, you are a special case. Most people are running at at least 1024x768 these days and according to the Google Labs website http://browsersize.googlelabs.com/ 90% of users can see the whole banner’s width. For the other 10%, they are used to dealing with the smaller window. I have compared my banner with many other popular websites and it is pretty much in line with them. Other folks have complained that it takes up too much space vertically, and again, the site compares well with other popular websites on this count. I will be shrinking the banner about 10% through resizing and vertically another 5% or so by tightening up the spacing, but that’s about it.

@Dr.Drake

Agreed, tons better. The only mild critique is the grey space at either side all the way down—is that to symbolize the desert that non-organic produce is creating? Some of the colour contrast is a bit off, too: the orange / green mix could use slight tweaking, and the yellow behind the green is a little too brown.

I have noticed that it looks different on different monitors. I have an amazing Gateway monitor that really has great color rendition and saturation. The “grey space” you are seeing is actually a light lime green. I may tweak the colors a little bit, I may have gone too far in subduing them.

Also, I’m not sure if you’re covering the text! Which is very enthusiastic! I think the exclamation marks might be overkill!

Yeah! I will give that a look as well! Silvia is not a native English speaker, so the text is mine, and yeah, I use exclamation points a lot! Thanks for flagging that!

@Disheavel

I think you really need to have farm address/location more prominent. I don’t know where the place is (other than a brief mention of Salinas) but you won’t have much luck with “Google hits/prominence” unless you get something like “Organic strawberries Salinas/94xxx” to connect with your website.

At this point I will admit that this season she was unable to secure land in time to plant so she is acting as a broker for her friends up in Salinas. Next year she is hoping to have her own land to farm, but it just didn’t come together this year. So if the buyer wants to see the farm, it would depend on what they want to buy. As the produce gets closer to harvest we will be including more pics of the actual farms involved.

Thanks again for all the great suggestions. The website is much improved for it. You guys are great. The Straight Dope comes through again!

[Stan_Shmenge]

@ZipperJJ

Three quick things:

1. Set the Facebook image on the front page to have border=“0”.
2. Don’t require someone to contact Silvia in order to join the mailing list. Make it two separate things.
3. Send me the photoshop file (psd, with layers) of your header/banner and I will fix it so your site doesn’t side scroll. It’s been driving me nuts since you put it up and I can’t take it anymore. (email is my username at gmail.com)

1. Done. I don’t know how I overlooked it. It was that way at one point, but somehow I may have gone back to an earlier version of the index.php file and lost that tweak. Thanks.

2. You don’t have to send any message, but the page will prompt you for your email if you leave it blank and tick a subscription. I thought it was an elegant way to handle it and still do. I may make some changes to the wording.

3. If it is going to be wide enough to have the background image spill off the edge, you are going to get some side scroll at various resolutions, unless you know some trick that I am not aware of. Yeah, I could crop the image, but again, at some resolution it will side scroll. I am happy with the current situation. In every browser I have tried, when the page is first displayed everything is centered nicely, so I am cool with it how it is. I can see how it would bug some people, I am kind of anal about stuff like that too, but when it comes down to having a horizontal scroll bar appear or arbitrarily cutting the background image at some width, I’ll take the scroll bar.

[ZipperJJ]

@Stan_Shmenge

3. If it is going to be wide enough to have the background image spill off the edge, you are going to get some side scroll at various resolutions, unless you know some trick that I am not aware of. Yeah, I could crop the image, but again, at some resolution it will side scroll. I am happy with the current situation. In every browser I have tried, when the page is first displayed everything is centered nicely, so I am cool with it how it is. I can see how it would bug some people, I am kind of anal about stuff like that too, but when it comes down to having a horizontal scroll bar appear or arbitrarily cutting the background image at some width, I’ll take the scroll bar.

I am going to fix it so that the banner background image is the background of the site and thus does not cause side-scrolling on even the widest screens.

So the site will be as wide as the text and the nav and the content area, and the background will fill whatever space is left on the client’s end.

Send it to me, you don’t have to use it if you don’t want to.

[Stan_Shmenge]

@ZipperJJ

I am going to fix it so that the banner background image is the background of the site and thus does not cause side-scrolling on even the widest screens.

So the site will be as wide as the text and the nav and the content area, and the background will fill whatever space is left on the client’s end.

Send it to me, you don’t have to use it if you don’t want to.

I think I get what you mean. I will give it a try. If I need help I’ll let you know! This page is a learning exercise for me, I haven’t made a web page in probably ten years, so I am trying to bring my skill set up to date. It is a whole different world!

Thanks very much.

[ZipperJJ]

I did what I was talking about, sent you a link in PM.