Critique please

Please could you take a look at:

http://www.katzphur.co.uk/

This is my first attempt at a CSS layout and I would very much welcome
your comments and suggestions.

The site is rather short of content at present as I would like to get
the usability right before duplicating my errors across too many
pages...

Many thanks,


Wivens
--
E.D. Wivens http://www.katzphur.co.uk/

Putting the fun back into fundamentally flawed.

On Fri, 26 Nov 2004 04:24:30 +0000, E D Wivens
<edw.news (AT) get-rid-of-this-bit (DOT) katzphur.co.uk> wrote:

Please could you take a look at:

http://www.katzphur.co.uk/

This is my first attempt at a CSS layout and I would very much welcome
your comments and suggestions.

The site is rather short of content at present as I would like to get
the usability right before duplicating my errors across too many
pages...

Good overall effort. I like the color scheme, and the layout seems to work
well and scale.

First point - I never understood the purpose of XHTML Transitional. You
can do this Strict. Go ahead, validate it with the override to Strict, see
what you get. 4 errors, you can replace them. Remember, the only good
reason to use XHTML 1.0 is to prepare for 1.1, and these 4 errors are all
that stand in your way for now.

Then you have to figure out how to serve it as application/xhtml+xml for
the browsers which can acept it, and text/html for poor lame IE, and how
to account for the possibility of the wrong browser getting the wrong
cache. (This is why I no longer use XHTML, by the way. Far too much
thinking for my vodka-soaked brain.)

I'm not crazy about your alt text. It should replace the image, and I
don't think it does in both places on your front page. The image under the
navigation reads "Timespike Web Solutions", but the alt text is "Site
Management". I'd suggest the former is a better alt value.

On the subject of the images - use CSS to replace border and and alignment
and "hspace". There's 3 errors solved. (CSS border property, the float
property instead of align, and margins for hspace.)

The fourth is the clear attribute on br. Replace with CSS style for clear
on the paragraph you want to clear the floated (currently aligned) image.

In fact, try to NEVER use br. It's kinda a hack, you're forcing
presentation in the HTML which is not a good idea. You're better off
avoiding it whenever possible. Use block markup instead.

The hr's are similar - generally if you need a hr, you're better off with
a heading to delineate the page instead. Not always, but often.

The other image - I'd use alt="" as the image isn't really needed. It's a
funny bit, but the sightless and no-image people really won't get the
humor from any alt value, so leave it as null.

-> <b>Yes, they <i>are</i> all completely stupid</b>

Make this bold in the CSS instead. It probably ought to be a div or a
paragraph.

Consider (using perhaps p instead of div):

<div class="comment">Yes, they <em>are</em> all completely stupid</div>

You are emphasizing the word, yes? <i> should be reserved for when the
word is not emphasized, nor does it fall neatly into another HTML markup,
but it should be italicized for language reasons, such as "The <i>USS
Cole</i> was guided into port." or what not.

-> <p><b><a href="/atwork/index.html">At Work</a></b><br />
The world of work can be a strange and confusing place. Here are a few
examples.</p>

Consider instead:

<p><b><a href="/atwork/index.html">At Work</a></b><br />
The world of work can be a strange and confusing place. Here are a few
examples.</p>

<h3><a href="/atwork/index.html">At Work</a></h3>

Oh, and concerning

-> <style type="text/css"><!-- @import "/img/katzphur2.css"; --></style>

- leave out the SGML comment business. No purpose served with them - older
browsers which might be messed up without them are so rarely used (read
"should have been upgraded years ago") it's a waste of effort to include
them.

Your small text is TOO small - I have excellent vision and I can't make it
out in normal default font size. I recommend no smaller than 80% except
for stuff you NEVER want read - that stuff should be cut from the HTML
document.

Normally, I'd warn about text-decoration: none; on a unless the fact that
it's a link is obviously clear, but you've accomplished that so I'll leave
that out.

Not terribly bad, my man. A few tweaks and this is good to go.

On Fri, 26 Nov 2004 00:06:29 -0500, Neal <neal413 (AT) yahoo (DOT) com> wrote:

-> <p><b><a href="/atwork/index.html">At Work</a></b><br /
The world of work can be a strange and confusing place. Here are a few
examples.</p

Consider instead:

p><b><a href="/atwork/index.html">At Work</a></b><br /
The world of work can be a strange and confusing place. Here are a few
examples.</p

h3><a href="/atwork/index.html">At Work</a></h3

Wow I blew it.

What I meant as a replacement:

<h3><a href="/atwork/index.html">At Work</a></h3>
<p>The world of work can be a strange and confusing place. Here are a few
examples.</p>

Neal wrote:

Then you have to figure out how to serve it as application/xhtml+xml for
the browsers which can acept it, and text/html for poor lame IE, and how
to account for the possibility of the wrong browser getting the wrong
cache. (This is why I no longer use XHTML, by the way. Far too much
thinking for my vodka-soaked brain.)

The outlook's not so bad:
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

--
Ben M.

On Fri, 26 Nov 2004 00:06:29 -0500, Neal <neal413 (AT) yahoo (DOT) com> wrote:

On Fri, 26 Nov 2004 04:24:30 +0000, E D Wivens
edw.news (AT) get-rid-of-this-bit (DOT) katzphur.co.uk> wrote:

Please could you take a look at:

http://www.katzphur.co.uk/

This is my first attempt at a CSS layout and I would very much welcome
your comments and suggestions.

The site is rather short of content at present as I would like to get
the usability right before duplicating my errors across too many
pages...

Good overall effort. I like the color scheme, and the layout seems to work
well and scale.

Thank you.

First point - I never understood the purpose of XHTML Transitional. You
can do this Strict. Go ahead, validate it with the override to Strict, see
what you get. 4 errors, you can replace them. Remember, the only good
reason to use XHTML 1.0 is to prepare for 1.1, and these 4 errors are all
that stand in your way for now.

Then you have to figure out how to serve it as application/xhtml+xml for
the browsers which can acept it, and text/html for poor lame IE, and how
to account for the possibility of the wrong browser getting the wrong
cache. (This is why I no longer use XHTML, by the way. Far too much
thinking for my vodka-soaked brain.)

Yes. I did rather suspect I was pushing it a bit going for XHTML as
well as CSS in one leap. Perhaps a return to HTML 4.0 Strict is in
order.

I'm not crazy about your alt text. It should replace the image, and I
don't think it does in both places on your front page. The image under the
navigation reads "Timespike Web Solutions", but the alt text is "Site
Management". I'd suggest the former is a better alt value.

Fair enough. The alt text you mention above is actually a typo - it
should have read as you suggest.

On the subject of the images - use CSS to replace border and and alignment
and "hspace". There's 3 errors solved. (CSS border property, the float
property instead of align, and margins for hspace.)

The fourth is the clear attribute on br. Replace with CSS style for clear
on the paragraph you want to clear the floated (currently aligned) image.

In fact, try to NEVER use br. It's kinda a hack, you're forcing
presentation in the HTML which is not a good idea. You're better off
avoiding it whenever possible. Use block markup instead.

The hr's are similar - generally if you need a hr, you're better off with
a heading to delineate the page instead. Not always, but often.

Right. I did wonder about the IMG parameters as these felt like a hack
while I was doing them. The br tags are left over from the previous
version and were a quick hack to get some content in there. As for the
hr tags - well I guess that's my next project sorted...

The other image - I'd use alt="" as the image isn't really needed. It's a
funny bit, but the sightless and no-image people really won't get the
humor from any alt value, so leave it as null.

Point taken.

-> <b>Yes, they <i>are</i> all completely stupid</b

Make this bold in the CSS instead. It probably ought to be a div or a
paragraph.

Consider (using perhaps p instead of div):

div class="comment">Yes, they <em>are</em> all completely stupid</div

You are emphasizing the word, yes? <i> should be reserved for when the
word is not emphasized, nor does it fall neatly into another HTML markup,
but it should be italicized for language reasons, such as "The <i>USS
Cole</i> was guided into port." or what not.

Again fair comment. I did sort of pick up on this idea but your
example helps.

-> <style type="text/css"><!-- @import "/img/katzphur2.css"; --></style

- leave out the SGML comment business. No purpose served with them - older
browsers which might be messed up without them are so rarely used (read
"should have been upgraded years ago") it's a waste of effort to include
them.

Fair enough.

Your small text is TOO small - I have excellent vision and I can't make it
out in normal default font size. I recommend no smaller than 80% except
for stuff you NEVER want read - that stuff should be cut from the HTML
document.

Again a lot of this stuff has got carried forward from the previous,
table based, version, and probably a lot of it should go. Your point
about the font sizes is also a good one.

Normally, I'd warn about text-decoration: none; on a unless the fact that
it's a link is obviously clear, but you've accomplished that so I'll leave
that out.

Not terribly bad, my man. A few tweaks and this is good to go.

Thanks very much for your time and helpful comments. I'll go away,
make some changes and come back.


Wivens