New Website - critique/feedback requested

[Jim Moe]

I had strict on for a while and could not make it pass. It's definitely
something I want to work toward though.

HTML Strict mostly means moving the presentation aspects into stylesheets.
You only have five errors anyway on the index page. Trivial to finish it.

That's me all the way! This is my first major web project and I just
couldn't get a handle or control of <div> and float. It is something I
want to learn more about and convert that way. Tables were much easier
for me to understand. But I'm learning!

You can get most of the way there by not nesting tables. Use a single
table to layout the page, use HTML+CSS to do the rest. Later on the final
step is much easier.
Look into the "Cascading" part of CSS. It can reduce the size of the
page noticeably. For instance, for the dropdown menu you have <div
class="section"> that contains a list of <a>s, each with an explicit
class="item2". Instead you can define ".section a {...}" which has all the
rules in .item2. There is no longer a need for the .item2 class.

Others have commented the same. I'll fix both. Don't know if I can get
to 16px. You know I based some of this by looking at the ever popular
websites (yahoo, amazon, etc) and they run super small fonts. But I
agree that ABAP (as big as possible) should be the rule.

The general rule is: make it smaller on your display, not mine.
Going with the herd can take you over a cliff.

This is something I could never get to reconcile between IE and Firefox.
Firefox shows it right but IE has this problem.

Interesting. I am using Mozilla Seamonkey; it has the same rendering
engine as Firefox. And the parts do not line up.

 

[Richard Thoms]

Never use javascript for anything that is really important, like
navigation. With javascript disabled, the top menu does not work at all
<a class="item1" href="javascript:void(0)">About Us</a>. You can still
have a horizontal dropdown menu without javascript using CSS. Google
for suckerfish css. Users without CSS will see a regular list, users
with CSS will see the dropdown menu - and all users will have access to
the information.

I found the suckerfish menus:

http://www.alistapart.com/articles/dropdowns

but this also seems to use some javascript (albeit a tiny script) to fix
the lack of support for the :hover psuedo class with IE (whatever that
means!)

I'm ready to try it, just to lighten up the menu system, but I guess
even this little bit of javascript still could cause problems. However,
I tried to turn off the javascript in my IE browser (to test without it)
and couldn't figure out how to do it! So chances are anybody running IE
is probably going to have javascript enabled??

What do you think?

--
________________________________________________________________________
Richard Thoms
President - Top Service Pros, Inc.
Connecting Homeowners and Local Home Service Professionals
Homeowners, Find a Top Service Pro --> http://www.TopServicePros.com
Service Pros, Get Listed on the Web -> http://www.TopServicePros.com

 

[Richard Thoms]

HTML Strict mostly means moving the presentation aspects into stylesheets.
You only have five errors anyway on the index page. Trivial to finish it.

I remember now why I choose Transitional. I have some 3rd-party stuff
on the site (like the shopping cart system) and they were not ready for
Strict. Because I have my doctype declaration in a common include file
(used for every page) I had problems. That's just being lazy, I can use
Strict for my pages and keep the Transitional for the 3rd party stuff.

BTW, what is the real benefit of Strict over Transitional? I guess it
just means that I'm safe in case browsers drop support for the
deprecated stuff??

You can get most of the way there by not nesting tables. Use a single
table to layout the page, use HTML+CSS to do the rest. Later on the final
step is much easier.
Look into the "Cascading" part of CSS. It can reduce the size of the
page noticeably. For instance, for the dropdown menu you have <div
class="section"> that contains a list of <a>s, each with an explicit
class="item2". Instead you can define ".section a {...}" which has all the
rules in .item2. There is no longer a need for the .item2 class.

This will have to be for V2.0! The cascading part is pretty straight
forward but I need to learn more about the placement of <div>s. I'm
trying to put them in in certain situations.

Again, what is the advantage over tables? I guess quicker rendering??

The general rule is: make it smaller on your display, not mine.
Going with the herd can take you over a cliff.

I'm sorry, but I don't get the meaning of "make it smaler on your
display, not mine". For sure there are competing goals of large font
size and keeping as much content "above the fold".

On my development site I've implemented slightly larger fonts and using
"em" sizing now instead of "px" sizing but now I realize why I did not
like it.. Every browser looks slightly different, so much so that some
lines wrap on some browsers but look better on others (sigh). Seemed
like with "px" sizing that you get a more consistent look. Anyway, I
think I'm going to have to suck it up because this is an important
issue. As someone pointed out, I need to make this as accessible as
possible and that means making sure that IE and others will allow the
user to set the font size (something I found out px sizing dies not allow).


--
________________________________________________________________________
Richard Thoms
President - Top Service Pros, Inc.
Connecting Homeowners and Local Home Service Professionals
Homeowners, Find a Top Service Pro --> http://www.TopServicePros.com
Service Pros, Get Listed on the Web -> http://www.TopServicePros.com

 

[William Tasso]

Fleeing from the madness of the Top Service Pros, Inc. jungle
Richard Thoms <[email protected]> stumbled into
news:alt.html,alt.html.critique,alt.www.webmaster
and said:

...
I found the suckerfish menus:

http://www.alistapart.com/articles/dropdowns

but this also seems to use some javascript (albeit a tiny script) to fix
the lack of support for the :hover psuedo class with IE (whatever that
means!)

I'm ready to try it, just to lighten up the menu system, but I guess
even this little bit of javascript still could cause problems. However,
I tried to turn off the javascript in my IE browser (to test without it)
and couldn't figure out how to do it!
http://williamtasso.com/words/hardening-internet-explorer.asp

So chances are anybody running IE is probably going to have javascript
enabled??

What do you think?

Of the commonly used browsers, IE is the most vulnerable to javascript
skullduggery - I'd guess the reverse is true.

 

[Charles Sweeney]

Richard Thoms wrote

That's me all the way! This is my first major web project and I just
couldn't get a handle or control of <div> and float. It is something
I want to learn more about and convert that way. Tables were much
easier for me to understand. But I'm learning!

Plenty of CSS die-hards use tables for layout. Don't worry about it!

Jim Moe does too here:

http://sohnen-moe.com/whoweare.php

(Do as I say, not as I do.)

Looks to me like your focus is on providing an excellent service, which
is as it should be. Someone looking for a painter won't be remotely
bothered by the fact that the information is presented in a table.

Just as someone who is interested in Jim's terms of service, won't be
bothered by the fact that the link is presented in a table.

 

[Ben Measures]

I'm sorry, but I don't get the meaning of "make it smaler on your
display, not mine".

Specify the font size relative to the user's preference, with percentages.
For example:

body {
font-size: 100%;
}

Will set the body text font size to 100% of the user's preference. Make
everything else (headings, footers, etc) relative to that.

Hth,

 

[Jonathan N. Little]

This will have to be for V2.0! The cascading part is pretty straight
forward but I need to learn more about the placement of <div>s. I'm
trying to put them in in certain situations.

Again, what is the advantage over tables? I guess quicker rendering??

Flexibility and maintainability. You markup you content in logical
structure, i.e., you headings and paragraphs...then with CSS you style
it and you have have insets and 1, 2 3... columns just by changing the
stylesheet, even present one way for one device and differently for
another (say 3 columns browser bit 1 for handheld) all without having to
change the markup. With tables you have to redo the page completely!!!
Think about it, read about it, try it out with some test code and you
will see that it can make your job much easier.

 

[Beauregard T. Shagnasty]

I'm sorry, but I don't get the meaning of "make it smaler on your
display, not mine".

All modern graphical browsers (and even old ones like IE) have the
capability for the user to set a default display size. For example, in
Firefox, go to
Tools > Options > Content tab
Fonts & Colors, click Advanced button
Choose your own default fonts and sizes, including minimum size.

Then, if you use: body { font-size: 100%; } on your site, all your
visitors will view in their preferred size. Even IE users.

px (and pt) can't be resized in IE unless the user completely overrides
all sites' fonts, which most don't know how to do.

Note that using percents is safer than em. Some versions of IE have a
bug where if you use "1em" and a visitor resizes from, say, Smaller to
Medium, it will *double* the display rather than the small expected
increase.

 

[Joel Shepherd]

Because, (1) using px for text size, IE won't resize the text and (2)
Opera zooms the whole page and not just the text size.

Okay on (1); misleading on (2). Opera can zoom; it can also adjust font
size independently.

Is that accurate enough for you?

Not quite.

 

[Jonathan N. Little]

Okay on (1); misleading on (2). Opera can zoom; it can also adjust font
size independently.


Not quite.

(2) Still inaccurate, Firefox by design is not supposed to do everything
'out of the box' but to be lean and stable. If you want added
functionality then add it via an extension. There you only add what you
need or want and nothing more. The answer to 'bloatware'. So no, Firefox
can also do page zoom as Opera:

https://addons.mozilla.org/firefox/1499/
PageZoom :: Mozilla Add-ons :: Add Features to Mozilla Software

 

[GreyWyvern]

And lo, Jonathan N. Little didst speak in
alt.html,alt.html.critique,alt.www.webmaster:

Firefox by design is not supposed to do everything 'out of the box' but
to be lean and stable. If you want added functionality then add it via
an extension. There you only add what you need or want and nothing more.
The answer to 'bloatware'.

WRT to the "bloatware" label, I feel compelled to point out that Opera
with the zoom feature (and many, many others for which Firefox requires
extensions) is a 20% smaller download than Firefox without.

This is not bashing Firefox, but your reasoning seemed to imply that
Firefox's commitment to reducing bloat through extensions automatically
made it less bloated than Opera. This is not the case.

Grey

 

[Spartanicus]

Firefox by design is not supposed to do everything
'out of the box' but to be lean and stable. If you want added
functionality then add it via an extension. There you only add what you
need or want and nothing more. The answer to 'bloatware'. So no, Firefox
can also do page zoom as Opera:

'Lean' Firefox 1.5: 5175696 bytes: very few features
'Bloatware' Opera 8.54: 3833344 bytes: loaded with features

And then there are the security problems that Firefox extensions pose,
and don't get me started on extensions not surviving a browser upgrade.

 

[Jim Moe]

BTW, what is the real benefit of Strict over Transitional? I guess it
just means that I'm safe in case browsers drop support for the
deprecated stuff??

Internet Explorer. IE is at its most standards compliant when the DTD is
HTML Strict.

 

[JDS]

'Lean' Firefox 1.5: 5175696 bytes: very few features
'Bloatware' Opera 8.54: 3833344 bytes: loaded with features

And then there are the security problems that Firefox extensions pose,
and don't get me started on extensions not surviving a browser upgrade.

For real, yo. I tried Opera recently after getting fed up with how dog
slow and unstable Firefox has been for me. Mind you, FF 1 or even prior to
1 was pretty fast, IIRC, but seems like it has gotten slooooower and
bloooatier. This is on Linux. FF on Windows seems leaner and faster, to
me.

Opera, OTOH, is FAAAAAST. And even 9.0b (as in "beta") is super stable.
And even if it crashes, it REMEMBERS WHAT YOU WERE JUST DOING. wow. That
feature alone was worth the switch. "Start from last time". Plus mouse
gestures. Oh, yeah, and that fastness thing.

Anyways, I am going to evangelize Opera with all the best of my
evangelizing abilities from here on out.

 

[Jim Moe]

Plenty of CSS die-hards use tables for layout. Don't worry about it!
Jim Moe does too here:
http://sohnen-moe.com/whoweare.php
(Do as I say, not as I do.)

LOL! Yes, there are a few places where that happens. They sidestep the
limitations of Internet Explorer and maintain the look of the site. Its
original incarnation was massively table-based, six deep in some places.

Just as someone who is interested in Jim's terms of service, won't be
bothered by the fact that the link is presented in a table.

Hmm. It's tabular data.
Or is it? Would a definition list work better? No, semantically bogus.
How about an unordered list? No, there are two aspects: name and value.
Lists are one dimensional, not two.
It's one of those fuzzy areas. I have never decided that using a table
was the best choice. Then, of course, there was whole issue with IE and
block element centering... <sigh>

 

[Charles Sweeney]

Jim Moe wrote

LOL! Yes, there are a few places where that happens. They sidestep the
limitations of Internet Explorer and maintain the look of the site. Its
original incarnation was massively table-based, six deep in some places.
Hmm. It's tabular data.
Or is it? Would a definition list work better? No, semantically bogus.
How about an unordered list? No, there are two aspects: name and value.
Lists are one dimensional, not two.
It's one of those fuzzy areas. I have never decided that using a table
was the best choice. Then, of course, there was whole issue with IE and
block element centering... <sigh>

Good luck anyway, Jim!

 

[Neredbojias]

To further the education of mankind, Richard Thoms

Hey that's me! - no not really I guess big yellow tongue means the
tape measure? I checked all the pics and didn't see one where he's
sticking his tounge out.

Hehe, I hope not really... Yeah, that's the one.

Anyway I've got alot more stock photos of
other "service pros" that I hope to be able to make show in "context"
so that you see a maid while searching for a housekeeper, a painter
while searching for a painter ...

That sounds good.

I'm actually running around 770px. I don't like fluid size because
I'm a control freak and I don't think I can make a decent layout that
looks good in both 800px and 1200px.

Well, it can be done, but condemning all fixed laysout isn't correct,
either.

Others have mentioned that too. I did not realize it's a problem.
I'll research but what is the preferred way? % I guess?

Probably the best choice.

Thanks for the feedback.

Happy pagemaking. (I'm an addict, myself.)

 

[Jonathan N. Little]

And lo, Jonathan N. Little didst speak in
alt.html,alt.html.critique,alt.www.webmaster:


WRT to the "bloatware" label, I feel compelled to point out that Opera
with the zoom feature (and many, many others for which Firefox requires
extensions) is a 20% smaller download than Firefox without.

My bloatware remark was really directed towards IE, however I here
remarks 'but Firefox doesn't do...' when there is a readily available
extension. As to size comparisons, I admit the *download* of Firefox is
larger than Opera, but not the final install! Opera guys must use better
compression on their installer because my Opera 21.9MB vs Firefox 20.7MB

This is not bashing Firefox, but your reasoning seemed to imply that
Firefox's commitment to reducing bloat through extensions automatically
made it less bloated than Opera. This is not the case.

Both are very good products, and far superior to IE. I personally have
not witnessed the slowdown in FF1.5x as some folks have, maybe because
I'm on Win2k and not XP, who knows.

 

[Spartanicus]

My bloatware remark was really directed towards IE, however I here
remarks 'but Firefox doesn't do...' when there is a readily available
extension. As to size comparisons, I admit the *download* of Firefox is
larger than Opera, but not the final install! Opera guys must use better
compression on their installer because my Opera 21.9MB vs Firefox 20.7MB

Opera stores it's cache and mail base in it's \Program Files\ dir for
single user installs, FF's cache is located somewhere else
(Windows\Application Data\Mozilla\Firefox\Profiles on my W98 system).

The real installed figures:

Opera: 5.33mb
FF: 15.7mb

 

[Ed Mullen]

Opera stores it's cache and mail base in it's \Program Files\ dir for
single user installs, FF's cache is located somewhere else
(Windows\Application Data\Mozilla\Firefox\Profiles on my W98 system).

The real installed figures:

Opera: 5.33mb
FF: 15.7mb

Not sure how you have only a 5.3 Mb program install size for Opera.

On Windows XP, my Opera 8.54 cache is turned off. My figures:

Opera in Program Files
Total Files Listed:
99 File(s) 13,349,259 bytes
32 Dir(s) 13,472,444,416 bytes free

Opera in Documents and Settings
Total Files Listed:
51 File(s) 894,098 bytes
47 Dir(s) 1,160,716,288 bytes free

I downloaded and installed a plain-vanilla Opera and have only used it
to view some pages for testing purposes.

My Firefox is also only used for testing. I do have a few extensions
installed but the cache is also turned off.

Firefox in Program Files
Total Files Listed:
203 File(s) 20,320,854 bytes
92 Dir(s) 13,472,428,032 bytes free


Firefox in Documents and Settings
Total Files Listed:
74 File(s) 20,957,722 bytes
101 Dir(s) 1,160,679,424 bytes free

Both Opera and Firefox have essentially the same bookmarks file, about
500Kb.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
A politician is a man who approaches every problem with an open mouth. -
Adlai Stevenson