comments/suggestions on two site drafts please

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am working on a committee that is putting forward some proposals for
web site designs to the group I worship with..  the Religious society of
Friends on Vancouver Island (Quakers)

I an in a situation where two of us on the committee actually make
sites, but we have  completely different ways of working, and a
completely different sense of design..

as we are part of the non-programmed tradition of Friends where our
worship times are sometimes completely silent, and there is a sense of
serenity and peacefulness, very meditative, I think the site should
reflect some of that atmosphere

my fellow committee member wants to have literal things like brown
backgrounds to reflect the dark wood floors in the meetinghouse..

I'm having a hard time giving her feedback because I feel a bit in
conflict of interest..  I'm scared that my comments will be just see as
"pick me, pick me"...

I'd like some conmments/suggests for my draft...

the one thing I can't fix in my draft yet, is the too wide left margin
on my vertical and left floated navigation lists.. I'd like them to be
closer to the edge of the page, but I've tried adjusting margins and
padding on the whole UL but that doesn't change anything..  and both
margins and padding on the lis are set to 0..  I'm sure its something
simple but I can't see it..  I'm wondering if its that thing of what
inherits what form who which I don't quite all understand yet.. any ideas?

I'd also like some comments/suggestions on her draft that mostly
addresses what I see as the technical issues, like the convoluted code
her wywiwyg editor produces, and lack of any kind of standards, using
tables for all the design, etc..  that will be able to be heard by a
bunch of people who don't know anything about design..  (Quakers have
open discussions about everything and decide "by the sense of the meeting")

my draft is here:

all the links work except the one to the library page, testimonies and
practice, and First time at a Quaker meeting.

her draft is here...

with thanks

Re: comments/suggestions on two site drafts please

Helen Martin wrote:

Quoted text here. Click to load it

Helen, yours is far better.  The only thing I would recommend is you
lighten up the background color, to get more contrast with the text.

Hers, on the other hand, looks like someone's first very amateurish
effort with an old version of FrontPage.  :-(

   -Friends don't let friends drive Vista

Re: comments/suggestions on two site drafts please

On Mon, 07 Apr 2008 13:29:37 -0700, Helen Martin writ:

Quoted text here. Click to load it

Not bad, kind of plain IMO, but maybe that's the point. :-) However...

Quoted text here. Click to load it

... compared to this mess, your design is a masterpiece.

 <p><font color="#FFFFFF" face="Mordred"><img
 width="68" height="60"></font></p>
        <p><font color="#FFFFFF" face="Mordred"><font face="BlackChancery"
        size="5" color="#33CC00"><b><font color="#3399FF"><br>

I love it when a font is specified for a paragraph containing only an
image, or no content at all. Gotta be Frontpage. ;-)

The water(?) background, the spinning Earth gif, oversized header poking
out farther than the content and overlapping a heading of some sort... are
those links in the left & right columns? Can't tell 'till you hover...
Wait, some are links, some aren't. Oh, but you said the links weren't
active yet, ok. And what's up with that map? It's like, a small map image
inside a bigger bordered area, inside an even bigger bordered area with
grass(?) background.

It's awful, just awful. This is the opposite of "serenity and
peacefulness". A mess of blues and greens and stuff that doesn't fit or
line up right. Good luck talking sense to them. :-)

Oh, and as for the margins on your lists, try negative values on them to
scoot them over.

"Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯

Re: comments/suggestions on two site drafts please

Helen Martin wrote:

Quoted text here. Click to load it

I agree with the others; yours is far better of the two. Her draft
looks more like something you'd expect from a website design
beginner... putting their page on GeoCities... 10 years ago... And
that's bad, in a slightly disturbing way, considering we're now in 2008.

Animated GIFs (especially a rotating Earth) are way past, so are stock
clipart (especially the grainy doves), not to mention the watery
background image; that background will only steal the attention away
from the rest of the page. Also, putting every bit of information into
one single, long page will only draw attention away; most people won't
have the attention span of having to scour through the entire page just
to find the one tidbit of information he/she is interested in. And wide
table bevel borders? Yuck!

The design actually has a lot to say for first impressions. Frankly,
had I come across the page your colleague designed, I'd turn away and
find other sources of information. Had I come across your page, I'd
assume the information might be slightly outdated (by "only" a year or
two, which isn't bad for mainly static information pages), but I'd
still read through a lot of text to find the information I'm after.

IMHO, you should not only make a good design compared to other sites in
general, but it should also be something you'd want to live with for
years to come (ie. it won't *need* a design change any time soon). I
designed my personal (but quite inactive) blog website (
back in 2004, but it still looks good to me, and is one of my favorite
"babies" as of today.

Your colleague hasn't bothered to follow a DOCTYPE, and fails
validation on several counts (even with a fallback to HTML 4.01
( broken URL? -> )

Although you've followed a XHTML 1.0 Transitional DOCTYPE somewhat,
there are still a few bugs to be ironed out (currently 34).
( broken URL? -> )

Aside from the numbered list (which can, as freemont suggested, be
fixed with negative margin values), the rest of your version looks
pretty OK in the major browsers (tested with Windows browsers only):

Opera 9.27 (my standard browser):
Mozilla Firefox (it was updated to shortly after):
Internet Explorer 7:
Safari 3.1:

Your colleague's version doesn't come out quite as well:
Mozilla Firefox:
Internet Explorer:

Feel free to reference the screenshots by URL; I always seem to keep
these screenshots around for archival purposes.

Kim Andr Aker
(remove NOSPAM to contact me directly)

Re: comments/suggestions on two site drafts please

Quoted text here. Click to load it
You need to be carefull on how and what you set margins on (use them

Quoted text here. Click to load it
Personally I don't really like eather of them a whole lot.
But I like the other draft (the one that's not yours the least) as it just
looks like shit out of frontpage.
I agree with what another person said that you need to use a slightly
lighter colour scheme (maybe a light blue container around the entire site)
with the content just with a white bg.
Your code is not really much better (as far as errors go) to the other

Regards Chad.

Re: comments/suggestions on two site drafts please

In-line with other posters comments, yours is preferred out of the two.

To deal with your friends effort first... In the spirit of religion, I
should say something nice but I can't. It is a website that would have been
seen at typical-but-awful back in 1998, but today would be considered an
insult or a practical joke. If you created any sort of lists of criteria for
a suitable website, it would fail every one of them. I'll let you figure out
how to turn all this is into a gentle let-down for your friend.

Yours is good. I mean it is simple and far from perfect, but it doesn't put
me in a bad mood or give me a headache looking at it. That's got to be
Criterion 1.

It doesn't validate - I'd recommend you change to either Strict doctype and
tweak it until it validates, but it's not a bad start at all.

Others may comment on colours. They're fine. OK maybe their could be
improvements, but you aren't going to scare anyone away. Chaddy might
complain about the lack of contrast that people with visual impairments
appreciate, but it's a decent sized text at least. Perhaps a lighter
background - may be you could keep the darker blue for the header. I'd also
suggest doing more to separate the paragraphs in terms of styling... not
sure what to suggest, but I think the page needs to be broken up a little

You have a link at the bottom which takes you back to the top. Why only one,
and why there? Actually, I'd recommend you remove it - you already have the
menu repeat at the bottom so I reckon it's not needed.

We could all comment further but we'd get more & more subjective and we'd
end up redesigning your site in each of our own style.

Your website is worthy, if imperfect. You friends, with the best intentions
in the world, is not.

Re: comments/suggestions on two site drafts please

Helen Martin wrote:

Quoted text here. Click to load it

which she then almost completely obscures with huge, bevelled-edge
billboards of conflicting colors.

Quoted text here. Click to load it

A difficult political situation. I hope you find a way to be, um,
commpasionately persuasive. :-)

Quoted text here. Click to load it

It's plain and quiet, even to me, and I tend to like things more plain
than others do. I certainly like the color, and the whole feel is
comfortable. Beauregard's suggestion of a lighter BG is a good idea,
although the contrast is already pretty good for me personally.

Something(s) you might want to fix before showing it:

You've got a tag <a id="top"> up in front of your <h1> heading, but it
looks like you forgot to close it with </a>. My browser (FF) seems to
error-correct, as best it can, by silently auto-inserting </a> tags and
reopening <a id="top"> elements, down to the end of the next closed a
element. (I see all this behind-the-scenes stuff thanks to the Web
Developer extension for Firefox, an indispensible tool.)

This causes the first paragraph to turn red when I click in it (because
it's a:active), and the first menu item is not boxed like the others
(because the nesting of "a" tags is messed up.

Also, be sure to declare a BG color for the whole page, for those who
don't use the default white. I have a cyan edge around your .container
div in FF (in IE it's yellow). This makes the rounded corners look
funny, because you explicitly use white there.

You can try using

body, html {
   color:black; background-color:white;
   margin:0; padding:0;
   font: 100% "Arial", sans-serif; }

and then see if you can remove some of the declarations which are then
duplicated because of the cascade.

Also note that you use "sanserif", which certainly should be
"sans-serif". Your font lists should have comma separators, too.

The childrenplay3.jpg image is missing.

Kim mentioned validation, which you should look at. If you don't have a
specific reason for XHTML, I suggest you go with a doctype of
   " ">

For your print stylesheet, you might want to leave out one or both of
the menus (with display:none).

Quoted text here. Click to load it

Maybe not...

There's some left margin on the .container and left padding on
#container2, but I think you're mostly fighting against a mis-typed
selector. Where you have "ul#navlist ul#navlist3" I think you want
"ul#navlist, ul#navlist3". Yes?

Quoted text here. Click to load it

I hate to say this, but your colleague's design has nothing to offer me
from an aesthetic standpoint, and it's usability is exceedingly low. I
do not want whirling globes distracting me while I read (and how is that
meditative, and what does the Earth's rotation have to do with the
Friends' basic beliefs?).

The one-huge-page techniques goes against every principle of Internet
usability. Jakob Nielsen ( /) has written about this
a lot, although I can't say I like *his* pages.

The blue, white, or green links on a BG of blue-and-white water are hard
to read. We need better contrast.

The mish-mash of fonts, both styles and sizes, makes it hard to wade
through the first big introductory text. Centering makes it worse.

The table borders used are subliminally off-putting, as they look
old-fashioned (not 1600s old-fashioned, 1997 old-fashioned). I think (or
  *feel*) that the content must not be very current, or (and I hesitate
to say this) come from some crazy fundamentalist crackpot who got a
Website up but shouldn't be listened to for religious advice. I hope
that comes across right. I shouldn't judge by appearances, but I do.

Some of the best reasons to choose your implementation, though, are
what's under the covers. This site will have to be maintained. Tables
can be cumbersome to work with; nested tables are worse. Changing font
sizes, or colors, or font faces on your colleague's one page will take
several times longer than changing them all on your whole site. (And
speaking of fonts, your colleague seems to think we've all got "Black
Chancey" and "Mordred" on our machines. In fact, I see a lot of Times
New Roman, Tahoma, and Arial on her draft.)

I don't want to get personal, but code like this unedited snippet

         <p><font face="BlackChancery" color="#FFFFFF" size="5"><font
color="#00CC00"><b><font color="#3399FF">

doesn't inspire confidence. I'm sure she's a fine person, but I wouldn't
want to entrust something as important as my public image to her
Web-building skills. I hope you and your group can find a gentle way to
decide in favor of your draft (even if only as a starting point). In any
case, the colleague's submission, as executed, is too problematic to
consider. Perhaps there are other proposals, too?


Always be concise on Usenet, because, you know, well, wait a minute,
that reminds me of a story...

Re: comments/suggestions on two site drafts please

John Hosking wrote:

Quoted text here. Click to load it

I also hate it when people misuse apostrophes, and here one has crept
into my own text. It's /its/ here: "its usability is exceedingly low."  :-(

Quoted text here. Click to load it

I failed to explicitly point out here that the colleague's draft seems
unaware of CSS, which is part of what's going to encumber the care and
feeding of your group's Web site if she's chosen to work on it.

Wondering what other mistakes I've missed...

Re: comments/suggestions on two site drafts please

John Hosking wrote:
Quoted text here. Click to load it

And if th egroup is based in Canada, why does that whirling globe have a
light that keeps flashing to show where San Francisco is?

Re: comments/suggestions on two site drafts please

On 8 Apr, 11:20, "\(not quite so\) Fat Sam"

Quoted text here. Click to load it

Tibet protestors grappling for the Olympic torch.

Re: comments/suggestions on two site drafts please

Andy Dingley wrote:
Quoted text here. Click to load it

Oh, topical...
Made me giggle.

Re: comments/suggestions on two site drafts please

Quoted text here. Click to load it

This isn't a particularly good community to ask for design guidance
in. We're largely techies, so the tendency is to analyse the tech
issues, not the design. Please bear that in mind.

I don't especially like either of these designs at present; I consider
one to be too plain, the other too "busy". As a starting point though,
my choice would very strongly be for the plainer one.

What I like about it is its avoidance of a rigid grid layout, and the
"Japanese garden stepping stones" layout of image blocks cascading
almost randomly down the page. This also works nicely when re-sizing.

What I don't like about it is the density of the text and the colour.
There's a lot of text here, there's more than one windowful. So if
you're going to have to scroll vertically to read it, embrace
scrolling. Use more whitespace, more verrtical margins. Break the
sections up and use the quietness of the white space to separate the
sections out (You're Quakers, you ought to understand the importance
of whitespace!)

I also find the heavy body text (is that really 1em high? looks
bigger) on a coloured background to be a mite oppressive. If they were
changed, maybe to a lighter and more humanist serif font, then I'd
find it a much more appealing page from that change alone.

As a start, I think it's great - but there's still some design change
to make.

The second one I didn't like. It's 10 year old coding style, to make a
page that looks 10 years old. Boxy table-based layout with borders
everywhere. How often do you see good book typography that uses
bevelled borders like this? I know they "happen" from that style of
web-coding, but would you choose to do them that way ab initio? The
"blue on green" text is simply illegible - these two hues are
different, but their brightness is alost identical. My eyes work
better with brightness contrast. As for the dazzleship backgrounds,
then why did we ever do that? They make pages unreadable and they
don't make them look more attractive either.

To technical coding styles, the 1st is worth talking about, the 2nd is
merely 10 years obsolete. It's a "start again with a good book" level
of obsolete ("Head First HTML with CS & XHTML", BTW).

* The first uses XHTML, which is always a mistake. _WHY_?! It doesn't
add anything, it just causes problems. Stick with HTML 4.01 Strict and
the right doctype declaration. Similarly for choosing Transitional.

* It's not valid (in the DTD sense). Get into the habit of using a
validator to check your finished code. It saves a lot of unexpected
rendering problems in the future.

* I don't know what the
    <b class="rtop"><b class="r1"></b>
    <b class="r2"></b><b class="r3"></b>
   <b class="r4"></b></b>
markup is about. This looks bogus, probably because you could replace
it with multiple class names on a single div. If they are needed
(maybe they're necessary hooks to hang CSS from) then at least use
<div> rather than <b>.

* Lose the <a id="top">   Just place that id atttribute onto one of
the elements you're already using. A bare <a> rather than <a></a> is
also non well-formed XML, yet another reason to avoid XHTML.

* Avoid <br/>   It's very rarely needed, certainly not after a <h3>
like this. Adjust the margin, don't stick extra markup in there.
Markup is there to describe the content in the absence of
presentation, then presentation is applied to this later, using CSS.
It's not good practice to slip in odd <br> or <pre> or strings og <b
class=... > just to jiggle things about. Learn your CSS box behaviour,
use a doctype decl that puts IE into Standards rendering mode, read Don't sit there "banging on the
spacebar" to try and position things.

* Learn the distinctions between %block; and %inline;, and how CSS
display behaviour isn't _quite_ the same thing. There's a minor mix up
going on here where some inline-ish  elements (<img>) are getting
slipped in as if they were blocks. You'll get more stable control if
you take a more pro-active approach to managing this, probably by
wrapping them in <div>s.

I deliberately don't know which site is yours.

Re: comments/suggestions on two site drafts please

Couple of other suggestions re the 1st site.

Don't use underlines for emphasis, for two reasons.

- most typography textbooks will tell you not to, as they're merely an
artefact of typewriters that couldn't do anything else. If you have
better typographic tools available (italics, font weight, typefaces)
then use those in preference.

- On the web, links are underlined. Underlining things that aren't
links is thus confusing.

If you're going to use an inlined menu, like the bottom one, then go
easy on the grey tiles. They probably won't align neatly at the RHS
when they're across multiple lines, which looks untidy. If you put a
little whitespace between each tile, then it's more obvious that
they're not intended to "tile the patio" and a ragged-right looks far
more acceptable.

Re: comments/suggestions on two site drafts please

Helen Martin wrote:
Quoted text here. Click to load it

This one hurts my eyes...
Seriously...Something about the colour combination is uncomfortable for my

Site Timeline