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...
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 HTML4 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
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">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
DTD is the Document type definition With Dreamweaver you may get this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<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 - http://www.webstandards.org/learn/reference/prolog_problems.html 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 http://www.w3.org 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
http://www.9rules.com/whitespace/design/liquid_vs_fixed.php
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]-->
Posted on 17 Apr around 9am