Professional layout.

[andy]

An in-progress site for a nonprofit.  100% CSS layout with dynamic page height and variable banner.  I will soon be releasing this template with the hardcoded ability to rotate banners from a set folder in the media directory. 

www.pwsedd.org

Blargh

[DGEC]

Looking nice (don't forget to remove the defautl HTML bullets on the UL menu.

One suggestion though - don't used fixed fonts.

Users can't easily change the page fonts to make it more readable, and the font is somewhat small to begin with, even for those of us who can see it (with corrective lenses), or if you happen to have a high resolution monitor. These LCD screens don't look good at lower resolutions.

[andy]

Whoops.  Those bullets shoudn't be there.  I was making some changes today and they snuck back in.  Stupid IE.  Fixed.  Insofar as the text readability, Firefox handles it just fine.  If anyone complains, I'll be more than happy to direct them to a nice, standards-complient browser. 

[Argos]

Pretty template. I really like the header, those images are blended very well!

[bhhenry]

Something weird happens to your menu in Firefox 1.5 under Windows XP when you click on "about us" and the sub-menu gets expanded. It looks like the "Board Members" and Gallery entries are overlapping.

[andy]

I do not see this.  Is your text size set to normal?  Please provide a screenshot.  Also, if you have the webdev extension, please take a second shot with the block-level elements highlighted.  Thanks!

[bhhenry]

I do not see this.  Is your text size set to normal?  Please provide a screenshot.  Also, if you have the webdev extension, please take a second shot with the block-level elements highlighted.  Thanks!

My font is set to Veranda 13.

Here is a screenshot of the menu as I see it:

http://www.flickr.com/photos/69084772@N00/73499687/

I don't have WebDev installed now.

[andy]

It's the way your browser handles nested lists, I'm afraid.  Once you manually increase the text a certain amount above what it was intended to be, stuff like this happens.  It happens to me too when I do it.  Unfortunately, I'm unaware of a way to change the code to accomodate people who have their text at that size.  I would have to re-do the entire bounding box of the menu, which would involve messing with graphics as well as css (I've used the faux columns technique for the menu, you see).

Yeah, I could make the menu somewhat larger, but sooner or later someone would complain that their 22pt font menu is overflowing.  Well, of course it is!

I've designed the page around the 800x600 "gold standard", at which size the text is quite readable.  Try changing your browser font to 12pt or 11pt.  I bet it goes away.  I'm suprised you haven't encountered this more often.  Also, it should be set to go to Tahoma by default.  Perhaps you do not have this font installed.

[bhhenry]

I've designed the page around the 800x600 "gold standard", at which size the text is quite readable.  Try changing your browser font to 12pt or 11pt.  I bet it goes away.  I'm suprised you haven't encountered this more often.  Also, it should be set to go to Tahoma by default.  Perhaps you do not have this font installed.

I'm not complaining, just pointing out an issue with your site. Once in a while I experience a problem with text on little boxes in web sites, but this is almost always because of an aesthetic decision on the part of the web designer. I'm not going to use tiny, unreadable text in an ugly font on my machine -- it's easier just to surf right on by to the next site which works properly.

If someone has a 21 point fantasy font selected in their browser, there is not much you can do. For real-world testing, however, you can't rely on default settings and then blame the customer if they have changed them. It's simply an age-old trade-off off between form and function. Check out the Alertbox by usability expert Jakob Nielsen http://www.useit.com/alertbox/.

800x600 was perhaps a "gold standard" back in 2001 and the days of 15 inch monitors, but for the past few years, new computers come with at least 17 inch monitors which default to 1024x768. On the last machine I set up for a customer with a LCD panel, the display defaulted to 1280x1024!

[andy]

I'm not complaining, just pointing out an issue with your site.

Didn't think you were.  Forgive me if I was terse, but I guess I kind of consider this an issue that people who change their font have to live with... kind of like when you modify home electronics--not the designer's responsibility, you see.  That being said, though, if it breaks only two point-sizes above the default, then perhaps that's too restrictive and it needs to be modified, but only within limits.  As far as I'm concerned, readability should affect content first, menus second.

If someone has a 21 point fantasy font selected in their browser, there is not much you can do. For real-world testing, however, you can't rely on default settings and then blame the customer if they have changed them. It's simply an age-old trade-off off between form and function.

I'm not sure I'd go so far as to say it's the form vs. function argument.  It functions regardless of font size, so it's not a one-to-one trade-off.  No, I can't blame the user, but in this particular case there's nothing to do (that I know of) to accomodate them either.  I can't change the list behavior and keep the images as they are, and I can't extend the bounding box without redo-ing the faux columns.  Plus, there's only so much give with font before it all breaks down anyway.

I chose to base it off of 11 pt font because I thought that was a generic, good non-intruseive size for menus to be.  What do you think?  Should I accommodate up to a certain point?

800x600 was perhaps a "gold standard" back in 2001 and the days of 15 inch monitors, but for the past few years, new computers come with at least 17 inch monitors which default to 1024x768. On the last machine I set up for a customer with a LCD panel, the display defaulted to 1280x1024!

That's an excellent point, and it's a vexing issue for me as a designer.  See, here in Alaska, a lot of people still browse on some pretty old equipment, and this site is designed to cater mostly to people in Alaska who would want to know more information about these organizations.

Now, about that link you referenced me to.  It's kinda fuzzy, being mostly suggestions.  I would like to see him do some usibility studies on some of these issues.  I think designers could benefit very much from some hard numbers to work with.  It also seems you and he have a difference of opinion:

Make your default font size reasonably big (at least 10 point) so that very few users have to resort to manual overrides.

So, according to him, 11pt should be fine, but you think it's too small. Though I agree with his suggestion that font size should be percentage-based as much as possible, doesn't that often cause more problems in this particular situation (especially with IE?).

I guess what I'm really getting at is(and this is also directed at DGEC): what would you suggest, and how far should I take it?

Not mad or offended, merely curious.

-Andy

[DGEC]

Oh, a question? Umm.... what was that again?   Thank you for your curiousity about my idea.

Yes, you're both right. You have to accomodate users and designers. (Yes, I'm Canadian, why?)

1) You have to know your users and design accordingly.  Personally, I try to keep in mind what a friend tells me. 
"Hmm... its not very functional in Lynx...."  or to be more explicit... why would you want to prevent any users from being able to access your site?

And being a public American group, you might want to remember the Accessiblity Act, eh?

Is your site usable by a blind user for instance? Get a screen reader, there's at least one with a timed-demo . Or a blind user. I had one try out my site. He said it worked great for him - and a relief not to have zillions of "image... image... image... image...image...

If most of your users will be using 800x600, great, design for that, but realize where it will break down.   Content first, yes, but if you can't get to a menu, what difference does the content make? Menus that overlap like that make it hard to navigate, so function IS related.

Maybe consider doing a plain text banner menu ?

2) Specifics IE 6.0 on XP... the font size doesn't change when I try to switch to a bigger font, works fine with FF, but FF doesn't use the proper "absolute relative" sizes (...small, med, large...) but Normal, like you mentioned.

So not sure what's going on there, not sure what you're doing with the CSS, I'm assuming you've still got a 11pt in there.  11 is not bad for 800x600 I guess. But if you're careful, you should be able to manage making it relative.  I used "medium" I believe, on this site http://riversidebaptistchurch.ca/ and FF will scale it to any size. Now, admittedly, there's no graphic bullets or nested menus, but it works well, even with Netscape 4.7

The Nielsen stuff is good, but recall, a lot of that is older information. You'll also note that his site design could be called "minimalist".  Content first, last, and menus in between   If you (or other readers) haven't heard there's a small movement to "under-designed" websites. Forgoing the flash, its about the content, and a design that is big enough and readable on any platform or browser.  Web standards are fine as they go, but phones, PDAs and other small screens are making a wave too, and you never know when the lowest denominator may be important.

Frankly, while the colour contrast is interesting and grabs the attention easily enough, stripping off the coloured bullets would do nothing to hurt your site, and if doing that results in a menu that is scalable to any size, I'd do it in a second.  If you want colour to contrast it, change the background of the menu box or something maybe?

Any more thoughts

[zaggi]

wheres the Professional layout ?

Now im thinking of design and such, and I (sorry) don't see any Professional layout / design in this.

[andy]

DCEG, thanks for your input.  Do the Canadians have similiar requirements for accesibility? Seems to me these menus will be the death of me.  If TWO people think they need to change, then something's not right.

Re: accessibility, the menu items are links in an unordered list, with background-image defined.  It is my understanding that the text should be read not "image", but if that's wrong, it needs to change.  Also, the current version of the template has:

• alt tags for all non-trivial images
• a large page title at the top of the content
• divs flip-flopped such that the content renders first in text

wheres the Professional layout ?

Now im thinking of design and such, and I (sorry) don't see any Professional layout / design in this.

So, you don't think it's professional, but you neither attempt to explain your assertion, nor offer suggestions to make it better?  Look, isn't the idea behind forums to share ideas and useful information?  I (sorry) see no merit to posts such as this.  Please send all further comments to /dev/null.

[zaggi]

andy;
I was thinking colors, and layout. The layout is kinda ordinary, and I really don't like those colors.
See the same site here: http://www.alaskaeconomicdevelopment.org/ with other colors, and it helps alittle.

Though i like the photo(shop?) works with the pictures in the top.
The menu is ok to..
So.. Must be the colors.

Ok im real tired, but you getting there. What more can i say. Its a quistion about taste I guess, but for me it dosent looks professional.

With that said! I still didnt say it was BAD. There is a big different!

[andy]

The language barrier strikes again.  Your statement reads a lot more tersely and insultingly than it sounds like you meant it.  Still... you say it doesn't look professional.  Why?  Does everything have to be white with rounded corners these days?

[mysticcowboy]

800x600 was perhaps a "gold standard" back in 2001 and the days of 15 inch monitors, but for the past few years, new computers come with at least 17 inch monitors which default to 1024x768. On the last machine I set up for a customer with a LCD panel, the display defaulted to 1280x1024!

Wish that were so but according to the latest Jupiter research paper I read there's still about a 40% market share for 800 x 600 monitors. For a high end or urban commercial site, I might agree with forgetting about the older monitors but for a non-profit, it's important to cater to the widest possible viewership. That's especially true for an older audience, who often are reluctant to upgrade. Remote Alaska is not where I think of when I think of high tech people, at least it wasn't when I lived there.

Another consideration in a remote area like Prince William Sound is lack of high speed access. I just did a site for an Alaska artist who has to update it by modem over a radio phone! http://welti-rice.com

[jammo]

... you say it doesn't look professional ...

i, for one, really enjoy the styling of your site Andy.

very clean.
while some here complain of their 'issues' with your site. either by design or standards/compliance, i like it alot.

keep up the GREAT work.
superb template!!