Site Ratings & Reviews - Critique requested

Author

Critique requested

Timothy

2005-07-20, 7:22 am

Good day, I was hoping some of you folks could view my site and let me
know how it is. This is my first attempt at a full css site. The back end
of the site is not done, but I'll end up finishing it in the winter when I
have more time. The page passes w3c validator, but the speed report say's
that my page is a little heavy on the loading time for 56K.

http://www.websiteoptimization.com/services/analyze/

Any help to get this page working better would be great. Thank you for
your time.

--
Yard Works Gardening Co.
http://ywgc.com/resources.html

Chris Beall

2005-07-20, 7:22 am

Chris Beall

2005-07-20, 7:22 am

Chris Beall wrote:

> Timothy wrote:
>
> Timothy,
>
> The URL that you posted is for a site that provides load-time analysis.
> It does not look like a "first attempt at a full css site". I suspect
> that is the site that you used to test YOUR site and is not really the
> site you want us to review.
>
> Please clarify.
>
> Chris Beall
>
All,

I have concluded that Timothy wants us to review the site that appears
within his sig, which is http://ywgc.com/resources.html.

Chris Beall

Chris Beall

2005-07-20, 7:22 am

Timothy wrote:

> Good day, I was hoping some of you folks could view my site and let me
> know how it is. This is my first attempt at a full css site. The back end
> of the site is not done, but I'll end up finishing it in the winter when I
> have more time. The page passes w3c validator, but the speed report say's
> that my page is a little heavy on the loading time for 56K.
>
> http://www.websiteoptimization.com/services/analyze/
>
> Any help to get this page working better would be great. Thank you for
> your time.
>
Timothy,

The page loaded quickly enough for me at 56Kb. The only pages that were
slow were the photo thumbnails, due to the number of images.

Good selection of colors for the subject matter. Nice clean layout.
Well-chosen favicon.

Using an image for your main page header text:
- Prevents the user from resizing it.
- Hides it from search engines (though perhaps they'll pick up the
alt= or title= text).
- Limits the minimum window size without a horizontal scroll bar.
I'd change the text from an image to what it is: text.
This would also reduce load time and eliminate the gnats around the
text, caused by jpeg artifacts.

You can keep the wheelbarrow, but use a .gif instead of .jpg, to remove
those artifacts. JPEG is great for photos, but usually messy for line
art, especially B&W.

On my 600 X 800 screen, with Netscape 7.1 maximized, I see only the
upper-left 25% of your actual background image. That's not a problem,
but the effect probably isn't what you wanted.

I like the rollover styling on the links, but it seems to not look so
great if the text is reduced or enlarged from the default size. The
background image, butbg.png, has a fixed height and doesn't adjust to
the changing height of the text in front of it. (I don't recall if
that's easily corrected or not.)

On the main page, there's a nice margin around the <h2> text, but the
text in the following box is pretty tight up against the box borders. I
saw this in other places as well. I'd specify a 1-2 em margin on both
right and left.

NOTE: When specifying something that should scale up or down with the
text (such as margins adjacent to it), use em units, not px (which won't
scale).

The page titles for all of the pages are the same. I prefer a unique
title on each page, such as "Yard Works Gardening Co. - FAQ"

You've used a Transitional DOCTYPE. I didn't see any reason not to use
Strict (and you've left off the URI, which may be important some day).

The random indentation of your source code makes it hard to read. If
you clean it up now, you won't have to struggle with it in 6 months when
you want to update something.

You've used an external CSS page (good), but include in-line style as
well (why?).

Your list of navigation links could be marked-up as what it is, a list.

Bookmark page:

The text has a nice margin on the left, but the one on the right seems
stingy.

At the default font size, the link for "Resource Home" splits into two
lines, which is fine, but the line spacing is such that the two words
overlap each other vertically, with 'Home" below, but on top of,
"Resources". This effect came and went as I increased and decreased the
font size. Play with the line-height, perhaps starting with 120%.

There's no link here to Photos.

FAQ page:

FAQ is an acronym and should be all capitals. It isn't in the <h2>, nor
in the return links from specific FAQs.

Photo pages:

I would use real names, not just the file names, under each photo.

On my setup, the rightmost of the three plant thumbnails in a row
extended outside the green box over which they are displayed. On all
such pages if I narrowed the window, the images extended beyond this
background.

Read up on the CSS 'float' property. Proper use of it would allow you
to specify rows of three thumbnails, but would allow them to stack
vertically if the window (or the <div> within which they are contained)
was not wide enough. (Ah, I see you've used tables. Time to refer you
to http://pages.prodigy.net/chris_beal.../How%20to.html.)

Cheers,
Chris Beall

Timothy

2005-07-21, 4:45 am

On Wed, 20 Jul 2005 02:01:32 +0000, Chris Beall wrote:

> The URL that you posted is for a site that provides load-time analysis.
> It does not look like a "first attempt at a full css site". I suspect
> that is the site that you used to test YOUR site and is not really the
> site you want us to review.
>
> Please clarify.
>
> Chris Beall

Sorry 'bout that Chris. It was early... and I was late for work 80(

The correct address is :
http://www.ywgc.com

--
Yard Works Gardening Co.
http://ywgc.com/resources.html

Timothy

2005-07-21, 4:45 am

On Wed, 20 Jul 2005 03:34:09 +0000, Chris Beall wrote:

> The page loaded quickly enough for me at 56Kb. The only pages that were
> slow were the photo thumbnails, due to the number of images.

I was really worried about loading times with 56K'ers. I didn't expect
that the photo pages would load quickly, hence the warning about loading
times.

>
> Good selection of colors for the subject matter. Nice clean layout.
> Well-chosen favicon.
>
> Using an image for your main page header text:
> - Prevents the user from resizing it. - Hides it from search engines
> (though perhaps they'll pick up the
> alt= or title= text).
> - Limits the minimum window size without a horizontal scroll bar.
> I'd change the text from an image to what it is: text. This would also
> reduce load time and eliminate the gnats around the text, caused by jpeg
> artifacts.
>

Thank you for this tip. I was very un-happy with the over-all look of the
main title and I've learn quite a bit over the last few months when it
come to graphic and text. I fully plan on re-woking the title area of the
site.

> You can keep the wheelbarrow, but use a .gif instead of .jpg, to remove
> those artifacts. JPEG is great for photos, but usually messy for line
> art, especially B&W.

I was under the impression the gif would be of a larger size than the jpg?
I maybe confussing gif and png in this case.

>
> On my 600 X 800 screen, with Netscape 7.1 maximized, I see only the
> upper-left 25% of your actual background image. That's not a problem, but
> the effect probably isn't what you wanted.

Hmmm, I'm unsure really. The bg image 'should' be a leaf with a mosly
white background with the leaf edge exposed. The image is a very large
image (1500 X 1125), and I'm unsure how to make a background image scale
to different window sizes (if possible at all).

>
> I like the rollover styling on the links, but it seems to not look so
> great if the text is reduced or enlarged from the default size. The
> background image, butbg.png, has a fixed height and doesn't adjust to
> the changing height of the text in front of it. (I don't recall if
> that's easily corrected or not.)

I really don't know of a fix for this either. The butbg.png is 10 X 25 and
I have the buttons background repeat -X to save bandwidth.

>
> On the main page, there's a nice margin around the <h2> text, but the
> text in the following box is pretty tight up against the box borders. I
> saw this in other places as well. I'd specify a 1-2 em margin on both
> right and left.
>
> NOTE: When specifying something that should scale up or down with the
> text (such as margins adjacent to it), use em units, not px (which won't
> scale).
>

Thank you for this tip also. I was un-aware that px didn't scale. I'll be
fixing this issue also.

> The page titles for all of the pages are the same. I prefer a unique
> title on each page, such as "Yard Works Gardening Co. - FAQ"
>
> You've used a Transitional DOCTYPE. I didn't see any reason not to use
> Strict (and you've left off the URI, which may be important some day).

What I did to create my site was to hack out a css file and an index file
untill I got what I wanted and then re-saved them under different names. I
tend to agree with you though about the page names and it is a detail that
I forgot.

URI...? Dunno nothing about it. These pages were made with Quanta +3.2 and
this is the default.

>
> The random indentation of your source code makes it hard to read. If
> you clean it up now, you won't have to struggle with it in 6 months when
> you want to update something.
>

I indented the code like that so I can see the nested div's. I've done
this with tables and cells so I can see what I looking for quickly. On
man's madness is another man's sanity I guess.

> You've used an external CSS page (good), but include in-line style as
> well (why?).
>

Just plain lazy 80)

> Your list of navigation links could be marked-up as what it is, a list.
>

Would this create a cleaner look?

> Bookmark page:
>
> The text has a nice margin on the left, but the one on the right seems
> stingy.
>

The bookmarks page is a chunk of my firefox bookmarks file. What a mess
that coding is! It took a bit of work to get it that clean. I plan of
reworking the whole page and updating the links latter.

> At the default font size, the link for "Resource Home" splits into two
> lines, which is fine, but the line spacing is such that the two words
> overlap each other vertically, with 'Home" below, but on top of,
> "Resources". This effect came and went as I increased and decreased the
> font size. Play with the line-height, perhaps starting with 120%.

I do not find this happening in firefox nor konqueror. Could this be a
netscape issue..?

>
> There's no link here to Photos.

AAwww bugger, guess your right there.

>
> FAQ page:
>
> FAQ is an acronym and should be all capitals. It isn't in the <h2>, nor
> in the return links from specific FAQs.
>
> Photo pages:
>
> I would use real names, not just the file names, under each photo.
>
> On my setup, the rightmost of the three plant thumbnails in a row
> extended outside the green box over which they are displayed. On all
> such pages if I narrowed the window, the images extended beyond this
> background.
>
> Read up on the CSS 'float' property. Proper use of it would allow you
> to specify rows of three thumbnails, but would allow them to stack
> vertically if the window (or the <div> within which they are contained)
> was not wide enough. (Ah, I see you've used tables. Time to refer you
> to
> http://pages.prodigy.net/chris_beal.../How%20to.html.)
>
> Cheers,
> Chris Beall

Thank you for your time on this Chris. This has helped a lot. In truth,
the resouces/faqs/photo pages will most likely be removed. I was never
sure about them in the first place. I'm starting a project with a friend
doing a native plants guide and will most likely move the photos and the
like to that site. Atm I'm working like mad and have spent quite a bit of
time getting my mail server up and little time for coding. Again thanks
for your time.

Timothy

--
Yard Works Gardening Co.
http://ywgc.com/resources.html

Ben Measures

2005-07-21, 7:26 am

Timothy wrote:
> Chris Beall wrote:
>
>
> I was under the impression the gif would be of a larger size than the jpg?
> I maybe confussing gif and png in this case.

As Chris wrote, JPEG is great for photographs, and a bit pants for
anything non-photorealistic, such as line-art.

General rule of thumb for the web:
If your image is a photograph, use JPEG.
Otherwise, use PNG.

--
Ben M.

Chris Beall

2005-07-21, 7:32 pm

Timothy wrote:
> On Wed, 20 Jul 2005 03:34:09 +0000, Chris Beall wrote:
(snip)
>
>
> Hmmm, I'm unsure really. The bg image 'should' be a leaf with a mosly
> white background with the leaf edge exposed. The image is a very large
> image (1500 X 1125), and I'm unsure how to make a background image scale
> to different window sizes (if possible at all).

I don't see anything in CSS that allows for scaling. I would:
1. Reduce the size of the image itself, to fit inside an 800 X 600
window with some room to spare. In larger windows you'll still see the
entire leaf shape, though it won't fill the window.
2. In the CSS, for the 'body', specify background-position: center.
This will center the image on the window. For small windows, the
background will become the mottled green of the center of the leaf. For
those at 600 X 800 or more, the leaf will be centered on the window.

There's been lots of discussion here about scaling of images. The
general consensus is that folks with very large displays tend to use
that real estate to display multiple windows, rather than to display a
single window at the full size of the display. If that's correct, your
current 1500 X 1125 background will seldom fit within the user's display
window.

>
>
> I really don't know of a fix for this either. The butbg.png is 10 X 25 and
> I have the buttons background repeat -X to save bandwidth.

Yes, and that works fine. It's the Y dimension that causes the problem.
But if you add a repeat-Y then you'll get horizontal stripes rather
than the overall gradient effect you want. Frankly, I think you've gone
outside the envelope of what CSS allows at the moment.
(snip)
>
>
> What I did to create my site was to hack out a css file and an index file
> untill I got what I wanted and then re-saved them under different names. I
> tend to agree with you though about the page names and it is a detail that
> I forgot.
>
> URI...? Dunno nothing about it. These pages were made with Quanta +3.2 and
> this is the default.

URL, which you're familiar with, is a subset of a larger set of objects
called Uniform Resource Identifiers (URI) [or perhaps they are the same;
even the W3C seems uncertain on this point]. Anyway, just replace that
truncated DOCTYPE you have with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> (all on one line, please) and
you'll be good to go.

>
>
> I indented the code like that so I can see the nested div's. I've done
> this with tables and cells so I can see what I looking for quickly. On
> man's madness is another man's sanity I guess.

Hmmm, we agree completely and yet what I see does not match what you say
you have done. If I look at the source for the home page at
www.ywgc.com, and find the 4 navigation links, the <div>s for the first
three links are all at different indentation levels (the 4th one matches
the 3rd), yet these are all logically peers.

Did you, perhaps, use Tab characters to do the indentation? That can
cause readability problems if you change the font of your source file.

I'm not sure why we have different perceptions here.
(snip)
>
>
> Would this create a cleaner look?

No, it would have no effect on the 'look', but, if done right, it could
improve the 'sound'. Not all users can see your page; some will use a
screen reader. Presenting the list of navigation links as a list, I'm
told, improves the intelligibility for such users. Look back in this
forum or Google for 'Accessibility'.
(snip)
>
>
> I do not find this happening in firefox nor konqueror. Could this be a
> netscape issue..?

Could be, but isn't. I see it on IE 6.0 as well. On the Bookmarks
page. Try playing with windows sizes near 600 X 800.
(snip)
> Thank you for your time on this Chris. This has helped a lot.
(snip)
> Timothy

You are quite welcome,
Chris Beall