Eyup! Please, some feedback on this site?

Graft-Creative

09-12-2004, 01:10 AM

How about a critique on this folks: MindlessLemming, and anyone viewing on a Mac: your opinions would be appreciated ;) http://www.foxhill-bank.org.uk Joint project, me and our good friend readme.text. I did the pretty stuff, readme.text made it work, and made it prettier in the process too ;)

Please bear in mind that it's still a work in progress.

newmand2

09-12-2004, 01:25 PM

I'm lovin' it!

Its very nice, I viewed it in Mozilla Firefox. There is just one thing that looks out of place to me, and that is a one-pixel-wide white line down the left side of the 'main' area, I dont know if this is intended though

Graft-Creative

09-12-2004, 03:13 PM

Thankyou :)

The one pixel gap isn't intentional, just haven't figured out the best way to fix it yet :) Looks fine in Opera7.5.

Thanks again for your kind comments.

Graft-Creative

09-12-2004, 11:56 PM

Er........any other comments from anyone else would be appreciated :)

mindlessLemming

09-13-2004, 01:15 AM

hey, there's my name up there... :rolleyes:
Sorry I missed your thread, I've been out of town/working too much.
That's a sweet design :cool:
...but because I like it, that means you get the whole-nine-yards critique -- ie; I'm not going to bother starting criticisms with " I really like it but..."

1) The background image (pattern+shadow) stops very abruptly on the far left and right. When the page loaded I kept waiting for another image to load so as to complete the pattern. If I was you, I'd use a white gradient on the edges of the <body> image to help it fade evenly into the background.

2) The font used for "Summer at Foxhill Bank" stands out like a sore thumb strongly goes against the slighlty Victorian look of the site. "Grunge" fonts are just about dead, unless the design truly calls for it. (this design certainly doesn't)

3) The blocks of text in the sidebar shouldn't be any wider than their headings. It looks unbalanced.

4)The ads at the bottom a very blurry. If they need to stay jpg, up the quality. Otherwise, make them gif's.

5) The footer looks like an afterthought - especially the browse happy, XHTML + CSS buttons. My personal taste is to not include those on commercial sites, but none the less - they are all too crowded. The footer contents are all bunched up and it makes my eyes wander around looking for a calm area to focus. If you insist on keeping the buttons, at least move them unerneath the real footer content. I only fount the 'top' link because I went searching for it... :eek:

Other than that, :thumbsup:

newmand2

09-13-2004, 11:24 AM

Another thing I've just noticed (on I.E 6 at school, so not sure if this is the same in FireFox...) is that when you hover over the menu buttons, the gap on the left side is smaller than the one on the right, by a few pixels

again, i'm not too sure if this is intentional

As MindlessLemming said, the 'grunge' font does look slightly out of place (makes it look like something from a horror film), but this is only after I was 'alerted' to it, and at first i thought it was nice

Graft-Creative

09-13-2004, 09:54 PM

Hi, thanks for all your excellent feedback :) This has been my first design in full CSS, and to be honest it has been 'effing hard work trying to shake all those old bad practises off, whilst trying to learn the 'good practises' at the same time.

All your feedback has made me think it was worthwhile after all :)

mindlessLemming thanks for your feedback, I kinda thought you would offer up something honest and contructive :)

1) The background image definately needs tweaking before the official
launch. I can't think of any way to make a good looking tile effect out of what we've used, so the fade to white seems the best idea thanks.

2) The font used for "Summer at Foxhill Bank" does stand out like a sore thumb now you've mentioned it. Maybe a 'script' type font would be more approriate. Sometimes, you just can't see these things for looking, as the saying goes, espescially when you've spent weeks looking at the damn thing :)

3) The blocks of text in the sidebar we are gonna tweak so they align left and are the same width as the paragraphs below them.

4)The ads at the bottom I had to harvest off the net, or badly printed leaflets, so maybe a call to the relevant marketing dept of each organisation could furnish us with good quality copies to work with? But yeah they are blurry.

5) The footer, I'd like to keep the W3C logos, for portfolio value as much as anything, and the site isn't exactly a commercial one (we're doing it for nowt) I was seriously considering giving the browse happy link a more prominent role in the 'about this website' bit, along the lines of: If you experience any problems with this site then you may like to consider upgrading or trying an alternative browser that supports web standards: with a text link to browsehappy.com?

Thanks again for all your kind comments, and please, any comments on what I've just said would be greatly appreciated too :)

bradyj

09-13-2004, 10:50 PM

Alright, first off -- All Mac browsers show it the same, except, of course, Mac IE -- it destroys the foot to an extremely garbled letter spacing mess, and puts the left dashed orange stroke of the home button all the way to the left. As a mac user, I'd like to express that you should not worry too much -- if they're a Mac user on IE, they really aren't a mac user:)

My feel is this -- I love the little logo on the left. So much that I'd like to see that full, clean style incorporated throughout the design. Right now it feels a bit busy... and I second the grudge font, keep it elegant. I actually feel that the blurry bee/flower photo takes away from the header as well -- when I cover that side and just look at the left side, I love it much more. I also second the background image, but you've covered that. I also don't much like the hard gray color for the background of the links, I'd almost like a green for that, and keep it clean. These are little things I think that may give you insight into improving the layout.

Code -- it's beautiful and semantic, fantastic! Helpful hints though? You could make your CSS drastically smaller by using shorthand:

body {
margin-top: 0px;
text-align: center;
font-family: "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
padding-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-attachment: fixed;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center top;
font-size: 12px;
margin-left: 0px;
margin-right: 0px;
}

into...

body {
text-align: center;
font: 12px "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: transparent url(images/background.jpg) fixed repeat-y center top;
}

Or like for borders you have:

border-right-style: dashed;
border-right-color: #FF9900;
border-right-width: 1px;

could be...

border-right: 1px dashed #FF9900;

Getting a hang of shorthand has helped me make my files drastically smaller. Some sites will do it for you:
http://flumpcakes.co.uk/css/optimiser/

But watch out -- that thing can destroy any hacks, and sometimes makes the border shorthand a bit wacky. It's best to let it optimize, and then brush through it right quick before popping it into your new file (as always, save a backup). Hope that helps!

ReadMe.txt

09-14-2004, 10:15 PM

i guess i should have fixed up all the shorthand when i went through the sheet.

Ta for all the feedback guys, good point about the crowded footer mindless, i was kinda just throwing stuff in there that was on the original design because i had nowhere else to put it, will need to space it out a bit.

Didnt really notice the text on the sidebar actually, i guess it's because theres no content for it yet but i'll fix the margins now.

Graft-Creative

09-16-2004, 08:24 PM

Thanks for the tip BradyJ :) The longhand is actually my doing, bit of a novice with CSS so just find it easier, though more tiring on the old fingers! All the spick n span shorthand belongs to readme, who's also done a fantastic job developing the content management system for the news page.

Graft-Creative

10-17-2004, 04:05 PM

Another thing I've just noticed (on I.E 6 at school, so not sure if this is the same in FireFox...) is that when you hover over the menu buttons, the gap on the left side is smaller than the one on the right, by a few pixels

Fixed some of the things ,emtioned, thanks folks.

The above point, it isn't intentional, but I've found it kinda draws your eye onto the next link in a strange way?