Jump to content

Archived

This topic is now archived and is closed to further replies.

KevinM1

Throwing myself out there...

Recommended Posts

I figured I should get some critique on a website I've built.  First, though, let me say that I'm a newbie at both using Photoshop and in graphic design in general.  Also, I know my code can be streamlined a bit -- I'm planning on removing the inline styles I've placed in the span tags I used.  I also think that showing what the site looked like before I took hold of it is fair, so you can all see what it looked like in different stages of its lifespan.

The site is for a non-profit cultural/historical center in Manchester, NH.  The Franco-American Centre is basically a place where people who are interested in French-American ancestry can go to view art exhibits, take French classes, watch French movies...that sort of thing.

Example of the old layout (before I became webmaster): [url=http://www.francoamericancentrenh.com/index.htm]http://www.francoamericancentrenh.com/index.htm[/url]

What it looks like now: [url=http://www.francoamericancentrenh.com/]http://www.francoamericancentrenh.com/[/url]

Any ideas on how I can take it to the next level[/cliche]?

Thanks! :)

Share this post


Link to post
Share on other sites
Viewed with Firefox.

Something's amiss with the way the menu renders. As I roll my mouse down it, the right side content leaps around whenever I reach an option with a second level.  Whatever causes that needs to be stopped dead.

Having the content in a scrollable div inside a page that needs scrolling is something you should avoid.  The links page is an example of this odd behaviour.

I found the bright blue rather overpowering, but I suppose that's the right blue to go with the fleur-de-lys you're using.

Otherwise, it all appears fine although a [i]bit[/i] of graphic embellishment wouldn't do any harm and neither would a link from the page bottom back to the top of the page.

Share this post


Link to post
Share on other sites
Yeah, I think the FF thing is due to the JavaScript used to power the menu.  I was debating with whether or not to go to a pure CSS option (cssplay has pure CSS flyout menus), but they use tables to render levels 2+, and I hate tables.  Looks like I will have to go that route, though.  Maybe I can retrofit them to use divs.

I chose a scrollable div to basically make every page the same size.  I dislike pages that change height drastically depending on the content within them.  An example would be the difference between the index page and the bookstore or links page.  I couldn't come up with anything other than to limit the height of the page and have the overflow scroll.  I'm actually worried about how the site looks in lower resolutions, though, as I don't want to have double scrollbars (one for the div, one for the page if it's too tall for a lower resolution).  Any ideas on how to achieve a balance between height and function?

Thanks! :)

Share this post


Link to post
Share on other sites
a couple personal preference things you may want to consider:

1) the blue is a bit over-saturated for me... i just don't care for [b]that[/b] much brightness all at once on the page. i think the color works, but maybe a bit de-saturated? or maybe having the nav as a complimentary neutral color to the bright blue in the banner?

2) i don't like the idea of having the exact same banner with different text subset as your welcome message. i would definitely recommend you design a separate banner or stick with text only for that welcome message.

3) when you have images (especially light ones) floating over white space, i like to see borders on them. even a really light border (maybe a #aaaaaa) would help set them off a little better and emphasize them a tad.

otherwise, looks like you're off to a great start. it's very clean, and you've done a good job of incorporating all the areas of the site into the menu there. also, i'm extremely pleased to see that you've taken the time to validate. it appears the the validator is down at the moment, so i can't double check it myself, but i'll try it again later ;)

Share this post


Link to post
Share on other sites
Is the blue really that bright?  It doesn't seem so bad on my monitor.  Howabout the menu's hover color?

I agree with you on the subheader, but I'm not sure what I could do there.  I'm not exactly the most creative guy when it comes to art.  An all text 'banner' might work, but I'm not sure how to make it visually appealing outside of 3-d effects, which I want to avoid as the rest of the site is in 2-d.

Share this post


Link to post
Share on other sites
I don't like the blue color. It's too dark (it's too #0000FF-ish).

Share this post


Link to post
Share on other sites
[quote author=Nightslyr link=topic=110158.msg445312#msg445312 date=1159803652]
Is the blue really that bright?  It doesn't seem so bad on my monitor.  Howabout the menu's hover color?[/quote]

i actually really like the hover color... however, against the darker blue, it doesn't really seem to stand out as much as it could. maybe "bright" was the wrong word... i don't suggest you make it darker, just maybe less saturated. or, maybe a complimentary color like a beige or gray would work?

[quote author=Nightslyr link=topic=110158.msg445312#msg445312 date=1159803652]
I agree with you on the subheader, but I'm not sure what I could do there.  I'm not exactly the most creative guy when it comes to art.  An all text 'banner' might work, but I'm not sure how to make it visually appealing outside of 3-d effects, which I want to avoid as the rest of the site is in 2-d.
[/quote]

an all text banner could have a lot of options, especially if you have some nice fonts to work with. i'm not the greatest designer, either, so i may be off, but a very slight gradient on a nice font with possibly some very subtile border effect may look nice. as for the 3D, i totally understand about wanting to avoid it as it really has been overused. do you consider a drop shadow part of your 3D no-nos, or would you consider looking at that possibility (at the risk of something else that's overused  :D)

Share this post


Link to post
Share on other sites
What's with the validity icons? A lot a lot of webmasters starting out put those on their websites, but my advice is: DON'T.

Your target audience could care less. Unless validity is relevant in some way for the visitors of the site, why distract them with unrelevant information?

[quote]This Website Compatable With The Latest Versions of Internet Explorer, Firefox, and Opera[/quote]

Again, your audience doesn't care, as long as it works for them. This type of stuff is between you and your client.

[quote]Please Have JavaScript Enabled[/quote]

I am a visitor and have javacript disabled, please provide me with an alternative method of navigation. How's that?

Share this post


Link to post
Share on other sites
If you're looking for CSS alternatives for your menus, you can try www.twinhelix.com. They've got some really powerful and visually pleasing menu systems there, and for completely free. The only stipulation for your purpose would be that you have to a) donate, or b)  put a link to them in the footer.

Share this post


Link to post
Share on other sites
[quote author=448191 link=topic=110158.msg446891#msg446891 date=1159996469]
What's with the validity icons? A lot a lot of webmasters starting out put those on their websites, but my advice is: DON'T.

Your target audience could care less. Unless validity is relevant in some way for the visitors of the site, why distract them with unrelevant information?

[quote]This Website Compatable With The Latest Versions of Internet Explorer, Firefox, and Opera[/quote]

Again, your audience doesn't care, as long as it works for them. This type of stuff is between you and your client.

[quote]Please Have JavaScript Enabled[/quote]

I am a visitor and have javacript disabled, please provide me with an alternative method of navigation. How's that?
[/quote]

Blunt.  I like that. :)

Thanks for the advice.

And neylitalo, all I could find for menus on the site you linked to was one that, from reading the description, requires JavaScript to handle the hiding/unhiding of the 2nd+ levels, which is what I'm trying to avoid.  Are there any pure CSS ones on there that I didn't find?

Share this post


Link to post
Share on other sites
[quote author=Nightslyr link=topic=110158.msg447199#msg447199 date=1160060846]all I could find for menus on the site you linked to was one that, from reading the description, requires JavaScript to handle the hiding/unhiding of the 2nd+ levels, which is what I'm trying to avoid.  Are there any pure CSS ones on there that I didn't find?
[/quote]

only that work for firefox. with IE, there is [b]always[/b] a tad of javascript that's going to be required to help with some of the pseudo-classes that IE can't handle as of version 6 (i think 7 does better). check out [url=http://www.htmldog.com/articles/suckerfish/dropdowns/]the son of suckerfish[/url] dropdown menus to get one of the best ideas.

Share this post


Link to post
Share on other sites
http://www.cssplay.co.uk/menus/

100% pure CSS menus. some of these have several levels and some you'd never have thought you could do without javascript. definitely worth a look, although some can be a little confusing to create at first.

Share this post


Link to post
Share on other sites
[quote author=redbullmarky link=topic=110158.msg447225#msg447225 date=1160062995]
http://www.cssplay.co.uk/menus/

100% pure CSS menus. some of these have several levels and some you'd never have thought you could do without javascript. definitely worth a look, although some can be a little confusing to create at first.
[/quote]

I've visited that site before, and that's what I was thinking about when discussing the menu above.  I just really hate hiding the sublevels in tables in order to get them to work in IE, which is why I hesitated in using them.  It looks like that's the only way, though.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.