Enough colour?

A couple of weeks ago I asked for a site critique here, and
the thing that was mentioned a lot, was that it lacked colour.
So, I've put in some colour.

Also: Terry mentioned that he would like the menu-items to
be clickable from border to border instead of only on the
text, and I did try Nico's method for that, but I wasn't
satisfied with it. The sub-items have different margins than
the rest, and with that method it was impossible to get it
nicely lined up on the right side. So, if one wants the
whole of it clickable, don't use IE ;-)

William said I needed labels on the form, and asked if I
really needed a table. The labels are there now, and I did
take the table out for a couple of hours, but put it back in
again, 'cause I don't think it's worth the hassle to leave
it out (forgot to check on a Mac, and it was all messed up
there. I know it can be done, but it needs more div's than
it needs td's). I think it's tabular data enough to justify
using a table :-)

Anyway, any comments are welcome:
http://locusmeus.com/

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Anyway, any comments are welcome:
http://locusmeus.com/

Newly authored documents should use a Strict doctype.

The menu doesn't make sense sans css, menus should be marked up as an
unordered list.

You usage of <br>s in general is questionable, mid paragraph, or as used
here:

span class="invisible"><a href="#content">skip navigation<br></a></span

Why not use a div?

100 Kb of graphics is a bit much, I don't think you need such large
jpegs (770x1000) to achieve that look.

Linguistically "The title Locus Meus is Latin and means 'my place'.
And that's what this site is all about." is somewhat odd, I'd suggest
that this should be one sentence:
"The title Locus Meus is Latin and means 'my place', and that's what
this site is all about."

p class="fin"
img src="fin.gif" alt=""
/p

That's not a paragraph.

div class="clearall"></div

No need for this, just set clear:both on the div#bottom.

h1
span class="capital">L</span>ocus<span class="capital">M</span>eus.com
/h1

Slightly cleaner:

h1.capital span{...}

<h1 class="capital">
<span>L</span>ocus<span>M</span>eus.com
</h1>

--
Spartanicus

Spartanicus wrote:

Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Anyway, any comments are welcome:
http://locusmeus.com/

Newly authored documents should use a Strict doctype.

1- Says who?
2- I want to use Strict, but the Statcounter code doesn't
validate under Strict, that's why I use Transitional. I
could of course get rid of the Statcounter, but for the time
being I like the way they display stats, so Strict will be
in the future somewhere.

The menu doesn't make sense sans css, menus should be marked up as an
unordered list.

Will look into that. Have thought about it already. (I know,
thinking isn't doing, but ... )

You usage of <br>s in general is questionable, mid paragraph, or as used
here:

span class="invisible"><a href="#content">skip navigation<br></a></span

the <br> is there to cater for the CSS-less browsers. It
avoids all links sticking together.
Of course, once I use <ul> the <br> can go.
The ones within the <span> within the menu are there purely
to make the 'pop-up' look better.
As for <br> mid paragrah: sometimes I want to start a new
line without starting a new paragraph. Isn't that what <br>
is for?

Why not use a div?

eh... don't remember. Either I didn't think of it, or else
it had a reason :-) Will have a second look at that.

100 Kb of graphics is a bit much, I don't think you need such large
jpegs (770x1000) to achieve that look.

This exact look? Please tell me how. I've tried both
Photoshop and GIMP to diminish the weight of the graphics,
any lesser quality is too bad for my taste, and the height
and widht are needed for people with larger windows than you
and I use...
spring.jpg would only need the width of the menu, if it
weren't for the bottom div, which I want to be the way it is
now. Am I overlooking some 'trick'?

Linguistically "The title Locus Meus is Latin and means 'my place'.
And that's what this site is all about." is somewhat odd, I'd suggest
that this should be one sentence:
"The title Locus Meus is Latin and means 'my place', and that's what
this site is all about."

Good point.

p class="fin"
img src="fin.gif" alt=""
/p

That's not a paragraph.

True. Will change that.

div class="clearall"></div

No need for this, just set clear:both on the div#bottom.

Will check that out.

h1
span class="capital">L</span>ocus<span class="capital">M</span>eus.com
/h1

Slightly cleaner:

h1.capital span{...}

h1 class="capital"
span>L</span>ocus<span>M</span>eus.com
/h1

Cleaner even:

#head h1 span{...}

<h1>
<span>L</span>ocus<span>M</span>eus.com
</h1>

Thanks for the suggestion.
And thanks for all your comments, I appreciate it :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

A couple of weeks ago I asked for a site critique here, and
the thing that was mentioned a lot, was that it lacked colour.
So, I've put in some colour.
cut /
Anyway, any comments are welcome:
http://locusmeus.com/

That looks very nice. I like it /much/ more than the previous version
(although it was the winter theme I guess), very fresh and upbeat.

You said you have problems with the nav links only being 'hot' over the
text when using IE, have you tried a list for the navigation with the
links inside the <li>s set to display: block? I might be tempted to put
the menu descriptions as title attributes and use javascript to extract
this and render the description box below the navigation. It doesn't
make the site less accessible (might make it more accessible since those
descriptions would be then be attached to the menu links themselves).

Just a thought but you could get away with putting the navigation after
the content in the markup and floating it left, that way content appears
to load faster. I do know someone that can't read red text on white, so
I'm just thinking that for her your links might disappear on hover! You
might want to check those labels on the contact page, you've forgotten
the ids!

A very nice looking site!
--
Andrew Urquhart
- Contact: www.andrewu.co.uk/contact/
- Employ me: Front/middle tier ASP developer with WAI & web standards

Andrew Urquhart wrote:

Els wrote:

A couple of weeks ago I asked for a site critique here, and
the thing that was mentioned a lot, was that it lacked colour.
So, I've put in some colour.

cut /

Anyway, any comments are welcome:
http://locusmeus.com/

That looks very nice. I like it /much/ more than the previous version
(although it was the winter theme I guess), very fresh and upbeat.

It was the winter theme, but the next winter theme won't be
as bland :-)

You said you have problems with the nav links only being 'hot' over the
text when using IE, have you tried a list for the navigation with the
links inside the <li>s set to display: block?

Tried it just briefly, but if you say it's possible, I'll
try it more thoroughly later. But I guess it would be just
as difficult as Nico's solution, 'cause the links aren't all
the same width. I don't want the submenu links to stick out
from the rest. And I don't specify the width in pixels, but
in em's, which makes it (afaik) impossible to get the
submenu links the same width as the other links. (the
font-size is 95% on the submenu links)
Maybe I'll try a different approach to distinguish the
sublinks from the rest, other than the indent and subsequent
font-size.

I might be tempted to put
the menu descriptions as title attributes and use javascript to extract
this and render the description box below the navigation.

I don't want to use JavaScript. Just personal preference I
guess, but I want to use only HTML and CSS, and a bit of
Perl. No Flash, no JavaScript.

It doesn't
make the site less accessible (might make it more accessible since those
descriptions would be then be attached to the menu links themselves).

How do you mean attached to the menu links themselves?
Aren't they now? They're now part of the link, placed
elsewhere using a span.

Just a thought but you could get away with putting the navigation after
the content in the markup and floating it left, that way content appears
to load faster.

Is that a big difference? I'd prefer to have the menu (in
the code) where it is now, but I never heard of the content
loading faster if the menu comes later. Of course the page
loads from top to bottom, so the first 8 lines will take
their time first. But that isn't too much is it?

I do know someone that can't read red text on white, so
I'm just thinking that for her your links might disappear on hover!

Is that a common sight-problem?
I thought red seems like black for colour-blind people,
which makes it look quite clear on white.
I don't mind the links disappearing on hover, as long as
they don't disappear before hovering :-)

You
might want to check those labels on the contact page, you've forgotten
the ids!

I'm afraid I haven't exactly forgotten them.. I have omitted
them 'cause I don't know why they should be there. (Same
goes for the labels, I just put them there 'cause William
said I should, and I read in the specs how to.)
Can you point me to an explanation of some sort about form
labels and id's? (Not the specs, as apparently that didn't
explain it well enough for me ;-) )

A very nice looking site!

Thanks!

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

In message <40839d78$0$41754$5fc3050 (AT) dreader2 (DOT) news.tiscali.nl>, Els
<els.aNOSPAM (AT) tiscali (DOT) nl> writes

Spartanicus wrote:

Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

[snip]

Linguistically "The title Locus Meus is Latin and means 'my place'.
And that's what this site is all about." is somewhat odd, I'd suggest
that this should be one sentence:
"The title Locus Meus is Latin and means 'my place', and that's what
this site is all about."

Good point.

Leave it as it is -- it reads just fine. Starting that second sentence
with 'And' provides just the right amount of emphasis.

[snip]

div class="clearall"></div
No need for this, just set clear:both on the div#bottom.

Will check that out.

Leave it as it is. The advantage of doing it that way is that you can
use it many times on the page (if you need to) without having the bother
of incorporating the 'clear:both' in succeeding <div>s

[snip]

Anyway, it's a really nice looking site, and it reads well.

regards.

--
Jake

jake wrote:

In message <40839d78$0$41754$5fc3050 (AT) dreader2 (DOT) news.tiscali.nl>, Els
els.aNOSPAM (AT) tiscali (DOT) nl> writes

Spartanicus wrote:

Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Linguistically "The title Locus Meus is Latin and means 'my place'.
And that's what this site is all about." is somewhat odd, I'd suggest
that this should be one sentence:
"The title Locus Meus is Latin and means 'my place', and that's what
this site is all about."

Good point.

Leave it as it is -- it reads just fine. Starting that second sentence
with 'And' provides just the right amount of emphasis.

I've thought about that too, the seperation of the two
sentences makes it more of a statement. I'll see what I'll
do :-)

div class="clearall"></div

No need for this, just set clear:both on the div#bottom.

Will check that out.

Leave it as it is. The advantage of doing it that way is that you can
use it many times on the page (if you need to) without having the bother
of incorporating the 'clear:both' in succeeding <div>s

Of course I can do both, leaving the .clearall{clear:both;}
in the stylesheet for other divs, but the reason I didn't
implement it in the div#bottom, is that I vaguely remember
some peek-a-boo problems with it. Not sure about it though,
but I think it's not worth changing it, only to find out
later what the trouble was. It's working now, and I have no
good reason to change it.

Anyway, it's a really nice looking site, and it reads well.

Thanks! :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Andrew Urquhart wrote:
[maybe try nested lists]
Tried it just briefly, but if you say it's possible, I'll
try it more thoroughly later. But I guess it would be just
as difficult as Nico's solution, 'cause the links aren't all
the same width. I don't want the submenu links to stick out
from the rest. And I don't specify the width in pixels, but
in em's, which makes it (afaik) impossible to get the
submenu links the same width as the other links. (the
font-size is 95% on the submenu links)
Maybe I'll try a different approach to distinguish the
sublinks from the rest, other than the indent and subsequent
font-size.

Here's a very quick nested navigation using lists:
http://www.andrewu.co.uk/temp/nestednav/

[use title and use accessible script to show it elsewhere]
It doesn't
make the site less accessible (might make it more accessible since
those descriptions would be then be attached to the menu links
themselves).
How do you mean attached to the menu links themselves?
Aren't they now? They're now part of the link, placed
elsewhere using a span.

That was me getting confused by the <br>s in the links. When I looked at
the text-mode rendering I didn't notice that the descriptions were
already inside the link, sorry.

[consider putting nav after content in markup]
Is that a big difference? I'd prefer to have the menu (in
the code) where it is now, but I never heard of the content
loading faster if the menu comes later. Of course the page
loads from top to bottom, so the first 8 lines will take
their time first. But that isn't too much is it?

It was just a consideration :-)

[friend can't see red text on white]
Is that a common sight-problem?

No idea

[labels need ids]
I'm afraid I haven't exactly forgotten them.. I have omitted
them 'cause I don't know why they should be there. (Same
goes for the labels, I just put them there 'cause William
said I should, and I read in the specs how to.)
Can you point me to an explanation of some sort about form
labels and id's? (Not the specs, as apparently that didn't
explain it well enough for me ;-) )

<form action="page.ext" method="post">
<fieldset>
<legend>Example Form</legend>
<label for="username">Name (required)</label>
<input type="text" name="username" id="username" tabindex="1">
<label for="password">Passwrd (required)</label>
<input type="text" name="password" id="password" tabindex="2">
<input type="submit" value="Submit" tabindex="3">
</fieldset>
</form>

The label tag associates content with a form control. In the exampe
above without the label it's not necessarily clear that the text 'Name
(required)' is prompting the user to enter a name into the input box.
With the label tag surrounding that text and linked to the input box
there's no longer that confusion. In most browsers when you select the
label the form control associated with it gains focus and usually the
onclick event is triggered for the form control.
--
Andrew Urquhart
- Contact: www.andrewu.co.uk/contact/
- Employ me: Front/middle tier ASP developer with WAI & web standards

In message <4083b569$0$41762$5fc3050 (AT) dreader2 (DOT) news.tiscali.nl>, Els
<els.aNOSPAM (AT) tiscali (DOT) nl> writes

jake wrote:

[snip]

Anyway, it's a really nice looking site, and it reads well.

Thanks! :-)

Now ...... just a few missing hyphens, slightly excessive use of commas,

and the odd mis-spelling to sort out ............. ;-)

regards.

--
Jake

jake wrote:

In message <4083b569$0$41762$5fc3050 (AT) dreader2 (DOT) news.tiscali.nl>, Els
els.aNOSPAM (AT) tiscali (DOT) nl> writes

jake wrote:

[snip]

Anyway, it's a really nice looking site, and it reads well.

Thanks! :-)

Now ...... just a few missing hyphens, slightly excessive use of commas,
and the odd mis-spelling to sort out ............. ;-)

I'll run it through a spellchecker/spell
checker/spell-checker (?), but that won't find any missing
hyphens or superfluous commas; any hints? ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -