I'd like some insight as I compose instructional materials on something I'm learning myself. I have a philosophy/strategy statement, and sample pages I will pull code samples from. I'd like any feedback you wish on both or either.
I lead a couple teams of coders and designers. Primarily, they make sites with mixed tables and CSS rules. I'd like to introduce them to the ideas I've encountered in this group, where the XHTML can be semantically marked up to describe what it is, and then styles describe how it looks based on what it is.
Before I create code samples for them to gnaw on, I want to run the basic ideas past the thoughtful folks in this group.
http://www.bivia.com/sandbox/semantic_markup/
I hope to introduce them to these ideas:
-> habitually validating documents
-> defining classes and ID-selected styles based on what a thing is (thinking less about presentation)
-> using h# tags instead of spans and styles
-> restyling lists
-> choosing when an image is content and should be in an img tag, or presentational and might be better as a background-image
These are smart people I'm working with, but they think solely about presentation. I'm looking to push them on just the right concepts. Did I miss any? Am I off base on some?
The companion pages where I worked out these concepts are here:
http://itgtradingcards.bivia.com/ http://itgtradingcards.bivia.com/page2.html
They validate as XHTML1.1, and the CSS hacks that would not validate are imported using @import code that the validator ignores -- so the CSS clears, and the browsers still are ok. I viewed them both at various default font sizes, and we target full design realization in these browsers:
Win XP: IE6, Firefox 1/Gecko, Opera 7.5
Win 98: IE5, IE5.5, IE6, Firefox 1/Gecko, Opera 7.5
MacOSX: IE5.2, Safari 1.2, Firefox 1/Gecko
MacOS9: IE5.2Minor design bugs are allowed in IE5 (Win/Mac). The style-less display should be just as usable, although we don't put any effort into un-styling things for bad browsers. For style-less review, we test in Lynx and Firefox (Web Developer -> disable CSS).
Some concerns I have (besides the designer insisting on images in the navbar):
- the method of importing the styles (causes a FOUC in Safari?)
- navigation code last, with a "skip to" link
- proper use of dl for the "Events" listing
- why I can't get the footer hr to display the same in Win IE as other browsers
Thanks for any tips.
--
Ben Curtis : webwright bivia : a personal web studio http://www.bivia.com/ v : 818 507 6613
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
