SITE CRITIQUE: Please comment

[JB]

Hi All,

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

Thanks in advance,

Jeff

[Beauregard T. Shagnasty]

JB wrote:

This is my first go at a pure CSS web site and I'd like your comments
and suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

Looks pretty good to me. Nice clean layout. Coupla comments:

Change body font size to 100% instead of that microfont, then drop all
the other sizing except the <hx> elements, and perhaps use 85% for any
legalese.

Visit http://validator.w3.org/ and fix the errors.

--
-bts
-Warning: I brake for lawn deer

[Spartanicus]

"JB" <[e-mail]> wrote:

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.

The URL is http://www.waukeshapumps.com/
It's not a "pure CSS web site" It uses deprecated presentational code.
Ditch the transitional coding, switching to a Strict doctype might make
validation a more useful tool. While on the subject of validation, your
page doesn't:
http://validator.w3.org/check?uri=ht...eshapumps.com/

XHTML served as text/html is silly:
http://www.spartanicus.utvinternet.ie/no-xhtml.htm
HTML 4.01 Strict is the better choice.
Comments on CSS, design and content very welcome.
Looks like you used a template.
<h1>Choose the right alternative</h1>
You header usage is all wrong. The logo image of the index page should
be wrapped in the <h1> with "Waukesha Pumps UK Ltd." as the alt content.
No other <h1>s should be used in this page.
* {
padding:0;
margin:0;
}
This is unwise, it requires you to explicitly define padding and margins
for elements that need it, resulting in needlessly bloated CSS. It's
commonly seen amongst pixel precision fans, don't fight browser
defaults, accept that things will look somewhat different on different
browsers, this is an essential concept when designing for the web.
#leftColumn {
width: 175px;
float: left;
}
Containers for text should be sized using the em unit, your menu text
overflows it's container here due to it's current pixel sizing. Use the
em unit and the container will adapt to different font sizes than the
one you are seeing.

Use a Gecko based browser to zoom the text to check if the design adapts
to varying text settings.

There is no need for this layout to be fixed width, it should adapt to
the available viewport width.
body {
font-size:62.5%;
}
p {
font-size: 1.2em;
}

Idiotic text sizing, leave the body font size alone, including
paragraphs.

--
Spartanicus

[Chris Hughes]

In message <43**********************@ptn-nntp-reader02.plus.net>, JB
<[e-mail]> writes

Hi All,

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

Thanks in advance,

Jeff

On the home page, Line 73 column 15: value of attribute "clear" cannot
be "both"; must be one of "left", "all", "right", "none".

Nice job!
--
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk

[Stan McCann]

"JB" <[e-mail]> wrote in
news:43**********************@ptn-nntp-reader02.plus.net:

Hi All,

This is my first go at a pure CSS web site and I'd like your
comments and suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

Transitional HTML, yech. What are you transitioning from? Use strict
for newly coded pages.

I use XHTML (not served properly) on one site because it is mandated
from up above. My other sites are done with HTML 4.01 strict. Why are
you using XHTML (not served properly)?

In your CSS, you set foreground colors without setting background color
and vice versa. When you set one, you should set the other. Best done
once for the body only.

Pixel sizing, yech. If I maximize my browser window, there sure is a
lot of white space. Use px only for images, containers for images, and
sometimes for other objects to place them with images. Use em or % for
most other things.

The "look" is good, and as far as I can tell, so is the content.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

[Jim Moe]

JB wrote:

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.
The URL is http://www.waukeshapumps.com/

What others have said, and ...

Overall the visual design is clean, the information well presented.

There is no observable reason for the fixed width design, especially
the center column.
I notice there are no links to pump data, specs, etc. Is this intentional?
IIRC, the trademark symbol is needed only on the first instance of a
trademarked phrase, and not at all necessary in the owner's literature.
The trademark is a distraction and, worse, insulting to have the legalese
constantly forced to my attention.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[JB]

> Change body font size to 100% instead of that microfont, then drop all

the other sizing except the <hx> elements, and perhaps use 85% for any
legalese.

Thanks for the reply. I'm playing around with the font size at the moment
but don't you think a large font makes a site look amateurish?

Are percentages preferable to ems?

Jeff

[JB]

> It's not a "pure CSS web site" It uses deprecated presentational code.

What I mean is it's my first site without using tables for layout. I'll look
into doctypes and validation next.

Comments on CSS, design and content very welcome.
Looks like you used a template.

All code was created by me. I am using the template function in Dreamweaver
however.
You header usage is all wrong. The logo image of the index page should
be wrapped in the <h1> with "Waukesha Pumps UK Ltd." as the alt content.
No other <h1>s should be used in this page.
I thought an IMG within a H was bad practice. I intend on using a single
<h1> at the top and smaller <h2>, <h3>s moving sown the page.

don't fight browser defaults

I much prefer to level the playing field from the start. This makes
everything equal from the start.

Containers for text should be sized using the em unit, your menu text
overflows it's container here due to it's current pixel sizing. Use the
em unit and the container will adapt to different font sizes than the
one you are seeing.
I'm trying to keep the whole site at 770px wide. Nothing worse than long
lines of text on a website.
There is no need for this layout to be fixed width, it should adapt to
the available viewport width.
See above.
Idiotic text sizing, leave the body font size alone, including
paragraphs.

I took this advice from a CSS tutorial site. I find it gives good control
but I will try your suggestions.

Thanks,

Jeff

[JB]

> On the home page, Line 73 column 15: value of attribute "clear" cannot be

"both"; must be one of "left", "all", "right", "none".

Thanks. I'll change to all...in fact, I'll take a closer look and see if I
actually need that line.

Jeff

[JB]

> Transitional HTML, yech. What are you transitioning from? Use strict

for newly coded pages.

I'll read up a bit more on doctypes and xhtml.
I use XHTML (not served properly) on one site because it is mandated
from up above. My other sites are done with HTML 4.01 strict. Why are
you using XHTML (not served properly)?
I think it happened via Dreamweaver!

In your CSS, you set foreground colors without setting background color
and vice versa. When you set one, you should set the other. Best done
once for the body only.
Noted. Thanks.

Pixel sizing, yech. If I maximize my browser window, there sure is a
lot of white space. Use px only for images, containers for images, and
sometimes for other objects to place them with images. Use em or % for
most other things.
I need to keep the text lines to a certain width. I hate reading long lines
of text on screen. Many commercial sites used fixed width layouts.

The "look" is good, and as far as I can tell, so is the content.

Many thanks,

Jeff

[JB]

> Overall the visual design is clean, the information well presented.

Thanks.

There is no observable reason for the fixed width design, especially the
center column.
Just trying to keep the lines of text to an easy to read length.
I notice there are no links to pump data, specs, etc. Is this
intentional?
I'll be adding content when the client provides it.
IIRC, the trademark symbol is needed only on the first instance of a
trademarked phrase, and not at all necessary in the owner's literature.
The trademark is a distraction and, worse, insulting to have the legalese
constantly forced to my attention.

The client was adamant about this even though I am sure the legal lines at
the bottom of each page are sufficient. I've removed them as they were
bugging me too!

Thanks,

Jeff

[Spartanicus]

"JB" <[e-mail]> wrote:

You header usage is all wrong. The logo image of the index page should
be wrapped in the <h1> with "Waukesha Pumps UK Ltd." as the alt content.
No other <h1>s should be used in this page.
I thought an IMG within a H was bad practice.

You thought wrong, just make sure that if it's an image of text that the
exact image text (no silly "logo" additions) is used as the alt content.
I intend on using a single
<h1> at the top and smaller <h2>, <h3>s moving sown the page.

It's not about size (smaller, bigger), headers are the principle element
to apply logical structure to a document. They should be used
consecutively.

don't fight browser defaults
I much prefer to level the playing field from the start. This makes
everything equal from the start.

As I said that's a common mistake amongst pixel perfect confused print
designers who do not understand that this is a recipe for failure on the
web.
Containers for text should be sized using the em unit, your menu text
overflows it's container here due to it's current pixel sizing. Use the
em unit and the container will adapt to different font sizes than the
one you are seeing.

I'm trying to keep the whole site at 770px wide. Nothing worse than long
lines of text on a website.

Resize your viewport width to suit your preference, don't force your
preference onto others. Or use text blocks limited in width that
themselves are allowed to flow into the available space.

--
Spartanicus

[Alan J. Flavell]

On Thu, 2 Feb 2006, JB wrote:

but don't you think a large font makes a site look amateurish?

If I'm forced to choose between a competent amateur and a professional
hack, I know which I'll choose.

[Ed Mullen]

JB wrote:

Hi All,

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

Thanks in advance,

Jeff

Nice clean looking design. The other comments regarding fixed
dimensions and sizes are good suggestions. 1) You shouldn't try to
force visitors to deal with, what very well may be, unreadable type and,
2) you really can't anyway. See how your page looks in my browser with
my usual settings of 16 point proportional and minimum 12 point font sizes:

http://edmullen.net/temp/1.jpg

Removing my minimum font size it renders as you probably expect.

http://edmullen.net/temp/2.jpg

But, with the same settings as immediately above, and my browser not
maximized nor in full-screen mode, if I then use Mozilla's (or SeaMonkey
or Firefox's) Text Zoom feature other things begin to happen, including
needing to scroll horizontally.

http://edmullen.net/temp/3.jpg

The point being that your site's visitors will have a variety of
preferences and setups, including the size of their displays and their
eyesight. Using relative settings such as percent or ems actually
allows your design to look closer to your preference with a wider
variety of user setups.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net

[Keith Baird]

"JB" <[e-mail]> wrote:

don't you think a large font makes a site look amateurish?

It's generally regarded that text so small it borders on illegible is
amateurish. Especially true of the white on navy/orange and royal blue
on white text; contrast with the "normal" black on white text just
barely saves it.

--/<eith

[Beauregard T. Shagnasty]

JB wrote:

[I think Beauregard wrote this:]

Change body font size to 100% instead of that microfont, then drop
all the other sizing except the <hx> elements, and perhaps use 85%
for any legalese.
Thanks for the reply. I'm playing around with the font size at the
moment but don't you think a large font makes a site look amateurish?

If it looks too large in *your* browser, maybe your own default size is
too large? At least allow me, the visitor, to use my chosen default
size. My eyes may not be as good as yours.
Are percentages preferable to ems?

Yes, because of a bug in Internet Exploder, where for example a font set
at 1em - and the visitor changes from Smaller to Medium - the result
will be double the size. Doesn't occur with percents.

Please don't strip attributes from your posts, y'know, who said what.
Thanks.

--
-bts
-Warning: I brake for lawn deer

[Darin McGrew]

JB <[e-mail]> wrote:

I'm trying to keep the whole site at 770px wide. Nothing worse than long
lines of text on a website.

I can think of lots of things worse: sites that force horizontal scrolling
on non-maximized browser windows, sites that use microfonts, sites that use
href="javascript:..." or href="#" links, sites that harrass you with "this
site requires ..." messages or because they don't "support" your browser,
and so on.
--
Darin McGrew, da***@TheRallyeClub.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: TRC's 25th Anniversary (Saturday, February 4)

[Jim Moe]

JB wrote:

There is no observable reason for the fixed width design, especially the
center column.

Just trying to keep the lines of text to an easy to read length.

I find the center column too narrow. You are imposing your reading
preference on me, the potential customer. Just because other places insult
their customers does not mean you should.
If I want a narrower or wider column to read, I adjust my browser. With
your site I cannot do that. You arbitrarily limit my options because it
looks good with:
- your monitor size
- your monitor's sharpness, brightness, contrast and color balance
- your display resolution
- your font package's text rendering (not all font packages are equal)
- your default font size
- your font smoothing
- your browser
- your browser's viewport
- your vision's acuity
- your comfort zones
Notice that none of the above considers anything besides you.

The default font size for my browser is 18px because I am using
1400x1050 resolution on a 17" CRT monitor; text looks small, the display
is not as crisp as LCD. I have a minimum font size set to 15px.
Your font settings set the <p> size to 13.5px (62.5% * 1.2em * 18px),
1.5px less than the *minimum* I tolerate. The side effects of this are:
1. I can actually read the content.
2. The intended "optimal" center column looks too narrow.
3. Captions wrap in the right column that you probably did not intend.
4. The text in the left nav extends beyond the container because its
width was set to 175px rather than 8em (or so).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[kchayka]

JB wrote:

I'm trying to keep the whole site at 770px wide. Nothing worse than long
lines of text on a website.
If you are limiting lines of text, you should be counting the number of
characters per line, not the number of pixels on screen.

px is the wrong tool for the job. Set a paragraph max-width of about
35em and you will do much better. Keep in mind that your visitors will
be using different font sizes, so 700px may be too wide for those with a
small text size and too narrow for those with large text. Set max-width
in ems and it won't matter what font size they use.
I took this advice from a CSS tutorial site. I find it gives good control

That tutorial is giving unsound advice. You have no control, you can
only make suggestions.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[JB]

>>I thought an IMG within a H was bad practice.

You thought wrong, just make sure that if it's an image of text that the
exact image text (no silly "logo" additions) is used as the alt content.

I still don't get this. Why put an image in a <h1> tag when you can simply
use the <IMG SRC=... tag? Surely <h1> should be used for text only?

Jeff

[Darin McGrew]

JB <[e-mail]> wrote:

I still don't get this. Why put an image in a <h1> tag when you can simply
use the <IMG SRC=... tag? Surely <h1> should be used for text only?

No, H1 is for inline content, which includes IMG. Here's an example:

<h1><img src="/images/logo.png" alt="Acme, Inc."></h1>

The logo serves as the heading. If the image isn't viewed, then the ALT
text is used instead.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"It said 'Insert disk #3', but only two will fit..."

[Spartanicus]

Darin McGrew <mc****@stanfordalumni.org> wrote:

H1 is for inline content

Headers are block level elements that may contain inline and other block
level elements.

--
Spartanicus

[Spartanicus]

"JB" <[e-mail]> wrote:

I thought an IMG within a H was bad practice.

You thought wrong, just make sure that if it's an image of text that the
exact image text (no silly "logo" additions) is used as the alt content.

I still don't get this. Why put an image in a <h1> tag when you can simply
use the <IMG SRC=... tag? Surely <h1> should be used for text only?

Widgets Inc. has a home page, <h1>Widgets Inc.</h1> is the level one
header on their index page.

If "Widgets Inc." is replaced with an image portraying that same text
then it is still the level one header.

--
Spartanicus

[Darin McGrew]

I wrote:

H1 is for inline content

Spartanicus <in*****@invalid.invalid> wrote: Headers are block level elements that may contain inline and other block
level elements.

Well, yes. H1 itself is a block-level element. But what version of HTML
allows anything but inline content inside an H1?
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"I've cut this board three times, and it's still too short!"

[Spartanicus]

Darin McGrew <mc****@stanfordalumni.org> wrote:

Headers are block level elements that may contain inline and other block
level elements.

Well, yes. H1 itself is a block-level element. But what version of HTML
allows anything but inline content inside an H1?

Whohee, my mistake.

--
Spartanicus

[Eric Lindsay]

In article <43**********************@ptn-nntp-reader02.plus.net>,
"JB" <[e-mail]> wrote:

I thought an IMG within a H was bad practice.

You thought wrong, just make sure that if it's an image of text that the
exact image text (no silly "logo" additions) is used as the alt content.

I still don't get this. Why put an image in a <h1> tag when you can simply
use the <IMG SRC=... tag? Surely <h1> should be used for text only?

I just put a linked logo inside a <h1>, mostly because I couldn't find
any satisfactory way to do what I really wanted using CSS.

<h1><a href="index.html"><img src="images/logo.gif" alt="logo"
width="153" height="182"></a>This is a heading right here Notare quam
littera gothica, quam nunc putamus parum claram anteposuerit. Per
seacula quarta decima et quinta decima, eodem modo typi qui nunc nobis.
Nihil </h1>

It still feels bad to give up and put an image as the first item on the
body of a page, instead of shoving the logo material down below the main
content, well out of the way of the search bots. It does validate
however, and I can't see that it breaks the rules.

--
http://www.ericlindsay.com

[Michael Stemper]

In article <43**********************@ptn-nntp-reader02.plus.net>, JB writes:

This is my first go at a pure CSS web site and I'd like your comments and
suggestions please.

The URL is http://www.waukeshapumps.com/

Comments on CSS, design and content very welcome.

My only comment is that it has a horizontal scroll bar. You're apparently
doing something to force it to have a minimum width -- it appears to be
the horizontal line immediately above the "site content" notice -- the
text isn't running beyond my browser's right side.

--
Michael F. Stemper
#include <Standard_Disclaimer>
Always use apostrophe's and "quotation marks" properly.