Coding W3C XHTML / CSS Valid Websites
A step by step approach I have found to work well when developing static W3C XHTML / CSS compliant websites or the initial templates for static websites:
- Copy a standard set of site template files. This saves the keep retyping the standard html / body open / close tags, along with including CSS files, and sets up a basic folder structure for the CSS, and other resources such as images.
- Working from the PSD copy / paste the textual content into HTML mark-up (i.e. put it into “h1″, “li”, “p”, “div” tags etc.
- Validate the HTML code at validator.w3.org validating at this stage usually saves time in the long run since any display issues that crop up must then be a result of CSS problems or browser incompatibility, and not errors in the HTML.
- Code the CSS testing in Internet Explorer 7 / Firefox all the way through, also making any additional HTML changes as required.
- Revalidate the HTML code.
- Test in Safari, fixing any cross browser compatibility issues by changing the HTML/CSS and retesting in Internet Explorer 7, Firefox, Safari.
- Revalidate the HTML code (if it was changed since the last time).
- Validate the CSS at jigsaw.w3.org/css-validator
- Test in Internet Explorer 6. I use a copy of Windows XP running in Parallels virtualisation software for this as I have it install for other applications. Microsoft also provide a free IE 6 Virtual PC image for this purpose.
- If any Internet Explorer 6 incompatibility issues are found (generally there are) use conditional comments to load an additional stylesheet just for Internet Explorer 6 to correct these.
- If time permits create a CSS Print media stylesheet to prevent unnecessary visual elements such as navigation menus appearing when the site is printed, and remove any formatting that makes text look incorrect / not correctly line up / unnecessarily span multiple pages.
When coding sites I make use of the Yahoo CSS Reset which removes CSS styles applied to elements such as h1, h2 etc by the browser itself. It very much simplifies the process of coding cross browser compatible sites. I also use EditPlus text editor for all my HTML / CSS / JavaScript.
