[Wsuug] New Web Page

Wed Feb 17 20:22:37 EST 2010

I would disagree that ID usage is a throw back to table design for layout. Maybe since I do use JS hooks ALOT is why I think ID for page structure is really semantically correct too. I'm open – but I'd say show me "out of favor" articles. It sounds like programmer premature optimization to make top level nodes classes at the start of a template. Can you share CSS use cases of the "extend" concept? An ID can be extended in the same way a class can, see below. A class to me means that it will be applied to more than one element, #header, #footer #content, never had more than one on a page since 1994 and still counting :)

#content { width:960px; }
#content .mobile { width:360px; }

When I see that in CSS, I know I am detailing with a top level page element. IDs and classes are both important, I really think they should be used when appropriate and I doubt the new age is really to do away with them but love to read new topics if that is the case.

 - Ken

On Feb 17, 2010, at 8:07 PM, Kelley Walker wrote:

> using IDs is out of favor.
> 
> there's no good reason to ever think that something won't get reused on a page -- you have to think future proof. in other words, if you can imagine a wholly different design you should avoid IDs so you *could* use it again. e.g, even branding could potentially be re-used - not in it's current instantiation, but in a future one. for example, what if branding were to be just a simple text piece, like Refresh Hampton Roads, where the branding is using a font and colors, no images: Refresh is green, Hampton Roads is red. and instead of being a fixed design, it's fluid. in which case branding could certainly be used again in some other module on the page where you want to repeat the branding. you'd just extend <div class="branding"> with another class.
> 
> a footer is another good example of something that's often given an ID but there's no need to.
> 
> and, although this is changing, currently best practice is to reserve IDs for javascript hooks (a la Nicole Sullivan).
> 
> it's religion, really, but in my mind, using IDs is a holdover from the days of table design where people used IDs to mimic structural design and classes to mimic themes.
> 
> We just rewrote pages at work to reflect this approach which all the UIs collectively agreed on: get rid of all the IDs and use classes only so we can always reuse them on the page if we need.
> 
> kelley
> 
> At 07:44 PM 2/17/2010, Ken Collins wrote:
> 
>> My thoughts with a caveat that I seldom think about these details now :)
>> 
>> 1) I see a lot of classes that should really be IDs. Generally page sections are a one per page thing. Perhaps change all DIV's that use one off class names to IDs instead?
>> 
>> 2) To address the font and semantic happiness for the header would something like this work?
>> 
>> <div id="branding">
>>  <h1>Refresh Hampton Roads</h1>
>> </div>
>> 
>> #branding { /* ... your normal CSS here for BG ... */ }
>> #branding h1 { display:none; }
>> 
>> 3) Since the heading graphic is the <h1> for every page, maybe everything else that is currently and <h1> is really a <h2>?
>> 
>> 
>> - Ken
>> 
>> 
>> 
>> On Feb 17, 2010, at 7:25 PM, Kelley Walker wrote:
>> 
>> > I'm kind of attach to accessibility guidelines because I have so many friends and acquaintances who use them, and because I was a big cheerleader for them when I worked on an LMS years ago where we had to hew to accessibility requirements b/c it wa a product for fortune 100s and the government, all of whom had accessibility requirements. It really brought me up close and personal with the increasing numbers of people who are visually disabled.
>> >
>> > According to the W3C:
>> >
>> > "When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]
>> > For example, use MathML to mark up mathematical equations, and <http://www.w3.org/TR/WCAG10/#style-sheet>style sheets to format text and control layout. Also, avoid using images to represent text -- use text and style sheets instead. Refer also to <http://www.w3.org/TR/WCAG10/#gl-new-technologies>guideline 6 and <http://www.w3.org/TR/WCAG10/#gl-use-w3c>guideline 11.
>> > <http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-use-markup>Techniques for checkpoint 3.1 "
>> >
>> > Stop Design's Doug Bowman obsessed about the issue for quite awhile back in 2003 or 2004? He tried using various techniques such as FIR but came up against problems. I'd have to dig out my notes from back then. or google it. :)
>> >
>> > Oh, thanks google: <http://www.alistapart.com/articles/fir/>http://www.alistapart.com/articles/fir/ 
>> >
>> > and thanks again, Cederholm's book has a 2009 version of the debate where he concludes that the FIR method is still an issue for accessibility:
>> > http://books.google.com/books?id=Eli4Z2w8zgkC&pg=PA224&lpg=PA224&dq=%22web+standards%22+images+replace+text&source=bl&ots=kLMPeAqkfQ&sig=6prNvksO0Yw0piN6gb9NKkatQfk&hl=en&ei=s4Z8S8TPCJGcsgPe-_W8Cw&sa=X&oi=book_result&ct=result&resnum=9&ved=0CB8Q6AEwCA#v=onepage&q=%22web%20standards%22%20images%20replace%20text&f=false
>> >
>> >
>> > My preference is to skip FIR and to skip the images for the sake of accessibility issues. Use text. We have to compromise so much in our day jobs, why compromise on something that is about our voluntary efforts, and about making the world a better place?
>> >
>> > Kelley
>> >
>> > At 06:08 PM 2/17/2010, Reese wrote:
>> >> Hello everyone,
>> >>
>> >> I'm finishing up work on the design for the Refresh Hampton Roads page.
>> >> We have a chocolate versus strawberry versus vanilla decision. The site
>> >> is already image heavy with the large branding image so I'm not sure
>> >> that we want even more images. So, in the spirit of Refresh and its
>> >> mission - Web standards - which is preferable:
>> >>
>> >>   - use of background images where text could be used for headings
>> >>   - use of font-replacement technology that doesn't work in all
>> >>     browsers. it will some day, it isn't yet
>> >>   - use of text only (the current implementation)
>> >>
>> >> The text in question?
>> >> These header text strings from http://www.inkworkswell.net/refresh-hr/
>> >>
>> >>   "What is refresh | Hampton Roads?"
>> >>   "our manifesto"
>> >>   "meetings"
>> >>
>> >> The driving questions? What is the best practice? Which would reflect
>> >> best on our commitment to Web standards?
>> >>
>> >> Reese
>> >>
>> >> _______________________________________________
>> >> Wsuug mailing list
>> >> Wsuug at list.wsuug.org
>> >> http://www.thelinuxlink.net/mailman/listinfo/wsuug
>> >
>> > _______________________________________________
>> > Wsuug mailing list
>> > Wsuug at list.wsuug.org
>> > http://www.thelinuxlink.net/mailman/listinfo/wsuug
>> 
>> _______________________________________________
>> Wsuug mailing list
>> Wsuug at list.wsuug.org
>> http://www.thelinuxlink.net/mailman/listinfo/wsuug
> 
> _______________________________________________
> Wsuug mailing list
> Wsuug at list.wsuug.org
> http://www.thelinuxlink.net/mailman/listinfo/wsuug