Saturday, April 17, 2004
Web Standards
I was inspired to put together this presentation on Web Standards after reading Jeffrey Zeldman’s ‘Designing with Web Standards’, New Riders, 2003. This book needs to be on all web designers shelves, alongside Jeffrey Veen’s marvellous ‘The Art and Science of Web Design’, New Riders, 2001.
furthermore...
Web Standards A bit of history: with Internet came HTML then came browser wars Netscape started it by adding proprietry features like image display and coloured text. These were extensions to the basic HTML and gradually added to HTML versions. Microsoft then started to add features to Internet Explorer so that you could create web pages for either browser. W3C Someone saw that this wasn’t very sensible so the World Wide WEB consortium was formed and Microsoft, Netscape, Macromedia and Adobe joined Then we had HTML 3.2 Then came HTM4 and CSS Separating Content from Presentation demonstrated beautifully here: http://www.csszengarden.com/ XML and XHTML Because HTML has had such shaky beginnings the W3C came up with a more extensible language - XML This is A language for creating languages In order to implement some transition to XML (the future) HTML was rewritten in XML and becomes XHTML. why to use? Theoretical advantage: XHTML is certainly better but what of browsers. Can they all support? Browser inconsistencies Even modern browsers that ‘support’ CSS and XHTML do so with little inconsistencies Create once deliver to many platforms Forward compatability Objective: efficiency How to use XHTML / CSS DOCTYPE declarations: The declaration at the beginning of the page informs the browser what standard system of tagging is being used, here are some examples: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ---- DTD is the Document type definition With Dreamweaver or GoLive you may get this: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Remove this first line and put the encoding in as a meta tag if you find that some browsers are not rendering correctly. Further information about this issue can be found at the web standards project web site Quirks mode To display older pages designed to work with older browsers, many modern browsers have a ‘quirks’ mode, so called because it can behave like an old browser. You can force a modern browser into ‘quirks’ mode by making no doctype declaration. Strict or Transitional Does it work? Check your page at [url=http://www.w3.org]http://www.w3.org[/url] to see if it validates wysiwyg editors The trouble with the ‘wysiwig’ tools is that they deliver some of their own proprietry code Why not use Flash? One reason that many designers have opted for Macromedia Flash is that in the ‘browser war’ days it was very difficult to get consistent results over different browsers (and still is, if you have to support older browsers). Liquid designs for a commentary on the debate about ‘liquid’ or fluid design see whitespace tables or DIVs see an earlier article ‘Sans-tables’ Solving some problems With Proprietry Code Internet Explorer on the PC can be manipulated depending on the version by using ‘conditional commenting. Here are some examples: <!--[if IE]> <style> div.logo { margin-left: 10px; } </style> <![endif]--> <!--[if IE]> According to the conditional comment this is Internet Explorer <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5 <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0 <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5 <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6 <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6 <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5 <![endif]--> Further Information on conditional comments at Quirksmode Using multiple stylesheets and fooling the browsers For information on delivering different stylesheets to different browsers try an earlier article of mine Netscape 4 Revisited and also thesitewizard and a useful article at A List Apart
