thedigitalfeed.co.uk content

thedigitalfeed.co.uk/Code

"W3C standards are totally useless"

Posted on Thursday the 8th of December, 2005

www.thedigitalfeed.co.uk/code/2005/12/08/w3c-standards-are-totally-useless



Separation of Structure and Content via CSS makes things more organized.

ORGANIZED or SCATTERED? Just how does this make a web page more organized? And, does this so-called organization really save time and money? When you have this piece of the web page here, and that piece there, and that other piece way over there for "modularity", you still have to eventually put it all back together in your head to understand what's going on in the first place. And that's going to take a lot longer in billable hours as the code is now scattered all over the place. It removes many of the benefits of wysiwyg as it now becomes a scavenger hunt!


CSS seperates pages into two parts: Content and Layout. There is no code 'all over the place'. In essence, you have one document containing content, and one document containing the formatting instructions. The document containing content may well pull data from different sources (such as PHP pulling in data from databases or include files) but that's not the point. If you want to change one, you can do so without affecting the other.

It also opens up a lot of possibilities such as passing different templates to different applications (such as printers, WebTV or mobile phones) without duplicating any data. Or, you could give users the option to pick their favourite style. You can do this when designing in tables as well, but I find it's not as elegant. For example, one line in can change a sidebar from the left or the right. You don't have the hassle of reorganising your table rows and columns around an alternate layout.

Another reason for CSS to remain seperate is to take the layout structure away from PHP code generation. Why would you want to root through document-generation code if all you're doing is altering the layout?

A spacer gif is typically a 1 by 1 pixel, but W3C standards and 508 Guidelines say you have to have alt="" to represent a null.

Just exactly what text can a person read or see in a 1 x 1 pixel gif? Zippo.
Thus, the text or line reader, JAWS, cynthia, etc, should be smart enough to see that the image size of Height="1" and Width="1" and automatically know it's a spacer and then make a if-then condition to NOT PRONOUNCE alt tag in the spacer.gif. It's like, what word can you put on a 1x1 pixel anyway that needs to be read? Can you put the entire manuscripts of Shakespeare on a 1x1 pixel image? How about a lost painting from Rembrandt on a 1 x 1 pixel?


Here, the author is suggesting that any application that reads HTML documents (screen readers, search engines etc) be able to understand the content. This, they cannot do. They cannot read data with any kind of intuition; they simply adhere to certain rules that the programmer sets.

What if they did write in code that ignored 1x1 pixel images? What if my spacer was 1x2 pixels? or 10x1? or 2x30? Who tells the screen reader what to ignore? What if I have an image that is 2x30 pixels that serves a real purpose within the content? What if I have a 1x1 pixel image, animated to mimic a twinkling star?

Images shouldn't be used in this way. When images are used for design, they should be set as background images of a real element, such as a >div< tag. This way, they are kept seperate from the content becuse they are seperate from the content. Images dropped in using the >img /< tag are part of the content, and therefore have an alt="" value. That value gives a description of the image as it is used in context so that people using screen readers (the blind, or partially-sighted for example) can be told what the image is and why it's there.

Screen readers think they are SMART by just reading the Heading tags first e.g. <H1>. However, web designers and developers rarely use <H1> or header tags anyway.


This is exactly what headers are for! Font sizes are rendered differently across different browsers and different user-settings. If I have a small screen, I will have font overrides in place. Fonts will be larger by default, and not rely on the size="x" value. Headings should be used for larger text because, not only will they scale proportionately, but screen readers and search engines understand the importance of them.

Use headers properly, and the outline of your site not only remains readable to people, but to other applications as well.

Page: