Well, I suppose it's about time I outed myself... Having spent half the winter creating this site, the owner is ready to officially unveil it in the coming weeks.: It had its unofficial launch on April 2nd, this year.
I chose the Standards Based method for two reasons (apart from the obvious: accessibility): 1. Forward looking: I like to think that in more capable hands than mine, the site can be easily shaped in the future. 2. Simpler: Since the folks who will be looking after it have no web development experience, I wanted markup that could be easily understood and content that is readily accessible. Hopefully this will go a long way toward preventing mistakes. The home page is below: http://www.wdfcs.ca/index.htm The stylesheet can be found at, http://www.wdfcs.ca/index.htm/fcss/default.css There is one validation warning in the stylesheet for which I have no explanation; to wit: Line 0 : font-family ... a generic font should be given as a last resort. To avoid using fonts that may or may not exist on the visitor's computer, I opted to use only the generic serif and sans-serif fonts in most cases. Is there a problem with this approach? Also, the topmost rule was added to prevent Opera from breaking. I've tried to arrange the cascade to please that browser, since it is the pickiest about that sort of thing. I spent hours rearranging the sheet, and found that putting a dummy rule at the top cured a lot of the problem. Someday I'll be able to figure out why. It's a relatively small site, about 22 pages. For a framework, I adopted Russ's two-column layout (Thanks Russ!), and 'borrowed' the technique for the navigation from Eric Meyer. Hopefully, I have done enough development work on these ideas to render the result 'loosely derivative.' The site is very elastic, with marginal breakage to the masthead in the small window of Opera. As the image is absolutely positioned, and not floated, the textual content has nowhere to go but down, and cannot slip below the image. The audience is very likely not of the internet set, being primarily seniors, so there is nothing of eye candy, and virtually no images. Our area comprises of mostly dial-up users so bandwidth was a serious concern. I've made every effort to ensure that the site meets with all three Priority levels in the WAI guidelines, and every page is validated XHTML 1.0 Strict.. The site uses one table for layout on the Contact Us page. I had floats but was running into problems with them so reverted to a table. The page is still Bobby rated AAA. The stylesheet for this table is at, http://www.wdfcs.ca/index.htm/fcss/datab.css There is one other data table, which uses the following stylesheet: http://www.wdfcs.ca/index.htm/fcss/feetab.css The navigation in the main menu has hidden pipes to comply with Priority 3 guidelines which stuipulate that adjacent links must be separated by a non-whitespace character surrounded by whitespace. Since I don't use <em>'s, and they are inline, I chose that element as my hidden container. Previously I was using <span>'s, and later I used <p>'s, but the menu printed vertically when styles were removed. Now it prints horizontally. The markup is expanded to make maintenance and revision simpler for the non-html familiar staff who will be looking after the site (once they're trained). There is one issue, though, which relates to the use of Javascript to publish e-mail addresses as the page is loaded. I cannot figure out a way to include <noscript></noscript> elements in a manner that will validate. Is it an inline/block level issue? As this is a secondary issue (for the most part) I have simply included information to explain that e-mail addresses will not be visible if scripts are not supported (or turned off) in the user's browser. If there is a better way to do this, I'm listening. The site is mounted on Telus's Shared Hosting servers, so there is very little in the way of Server-side that can be done; plus the fact that I'm a newbie, and know nothing of server-side includes, anyway. My test environment (Windows XP and Win98SE) includes IE 6/Win, Mozilla Firebird 0.7 and Firefox 0.8, Netscape 7.1 and Opera 7.23, all of which render the pages in like fashion, with only very slight differences. I have had to use a couple of hacks in the sytles, most notably to ensure that the nav menu renders the same width in Opera/NS/FF as it does in IE6/Win, and to prevent the 3 pixel jump to the left that occurs when the navbar content runs out. Too bad this hack won't work for UL's, OL's or DL's, though. To combat the shift, I've had to invent content that will push the list below the line of distortion. I had to combat the 'chopped div' effect in the Contact page, so applied the Holly Hack to that. The little disclaimer div would partially disappear as the page was scrolled up and down using the scrollbar. The hack worked to put a stop to that. A clearing div is used to preserve the margin around the main content. My next project will be to create Print styles, though it is a very low priority to the site owners, so I will be doing this for my own benefit, more than theirs. I'm eager to know what the site renders like in the Mac environment, to which I have no access. Any input here will be greatly appreciated. So now I put this before the list, and await your comments, suggestions and advice, if you will be so good as to give it a gander. This list has been largely influential in my re-working of the site over the past several weeks, especially the discussion a while back concerning code bloat, and the one on clearing div's. Thanks everyone for freely contributing such excellent advice in such copious amounts. You are indeed helping to make the web a better place for everyone. Thank you in advance, Roy ***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
