Jump to content


Photo

Throwing myself out there...


  • This topic is locked This topic is locked
12 replies to this topic

#1 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 01 October 2006 - 05:48 PM

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): http://www.francoame...h.com/index.htm

What it looks like now: http://www.francoamericancentrenh.com/

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

Thanks! :)
Using 'global' is a sign of doing it wrong

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 01 October 2006 - 10:45 PM

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 bit of graphic embellishment wouldn't do any harm and neither would a link from the page bottom back to the top of the page.
Legend has it that reading the manual never killed anyone.
My site

#3 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 02 October 2006 - 11:41 AM

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! :)
Using 'global' is a sign of doing it wrong

#4 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 02 October 2006 - 12:33 PM

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 that 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 ;)
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#5 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 02 October 2006 - 03:40 PM

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.
Using 'global' is a sign of doing it wrong

#6 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 02 October 2006 - 03:55 PM

I don't like the blue color. It's too dark (it's too #0000FF-ish).

#7 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 02 October 2006 - 03:58 PM

Is the blue really that bright?  It doesn't seem so bad on my monitor.  Howabout the menu's hover color?


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?

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.


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)
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#8 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 04 October 2006 - 09:14 PM

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?

This Website Compatable With The Latest Versions of Internet Explorer, Firefox, and Opera


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

Please Have JavaScript Enabled


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



#9 neylitalo

neylitalo
  • Staff Alumni
  • Advanced Member
  • 1,854 posts
  • LocationMichigan, USA

Posted 04 October 2006 - 09:33 PM

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.
http://nealylitalo.net - My personal website, and home of The Netizen's Journal.

#10 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 05 October 2006 - 03:07 PM

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?

This Website Compatable With The Latest Versions of Internet Explorer, Firefox, and Opera


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

Please Have JavaScript Enabled


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


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?
Using 'global' is a sign of doing it wrong

#11 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 05 October 2006 - 03:10 PM

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?


only that work for firefox. with IE, there is always 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 the son of suckerfish dropdown menus to get one of the best ideas.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#12 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 05 October 2006 - 03:43 PM

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.
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#13 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 05 October 2006 - 04:03 PM

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.


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.
Using 'global' is a sign of doing it wrong




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users