Making compatible & useable web sites by Matt Ottewill

Introduction

The web is one big compatible standard, right? WRONG!! Microsoft and Netscape's browser wars resulted in the buggy implementation of agreed standards due to (depending on how you view things) ineptitude or plain sabotage!! Buggy browsers have frustrated many web designers seeking to build sites which will work on all computer operating systems and browsers.

Add to this the need to create attractive sites that work for disabled and able bodied surfers, are easy to update and simple to use, and can be effectively indexed and ranked by search indexes, and suddenly deciding upon the best technologies and approach becomes a bit of a minefield.

Therefore, before actually building a site, every web developer will need to consider ...

  • Accessibility
  • Easy of updating
  • Useability
  • Choosing the right technologies

Choosing the right technologies

The overseers of forward thinking compatible web standards w3.org, are encouraging web site developers, web software authors and browser developers to use XHTML 1.0 transitional and CSS. JavaScript is discouraged and should be used only when absolutely necessary.

There has also been a move away from backend programming with Pearl and CGI and a move towards Java, Ajax, Flash, ASP and to a great extent the open source (free) PHP and MySQL.

Flash should still be used with care because of its accessibility and search engine indexing issues. Most developers are using it to add some interaction to pages built in XHTL/PHP.

Also, you must consider your SEO (search engine optimisation) strategy carefully when planning a web site.

At present the best supported technologies are ...

  • HTML 4
  • XHTML 1 transitional
  • CSS 2.1
  • Flash & Flash video
  • PHP
  • MySQL
  • .net
  • ASP

Using these technologies as the foundation of a web site will help ensure your sites are as compatible as possible. There are some work-around's required for bugs in some browsers but these are slowly being resolved with new releases.

XHTML 1.0 transitional

A page that is XHTML compliant must have the following code at the top to enable a browser to recognise and display it correctly ...

<!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">

If you make a new XHTML doc in Dreamweaver it will create this code for you. It will also add this important tag into the head tag ...

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Let it. This will help resolve XML conflicts (don't ask!)

CSS & separating content from styling

The current thinking in accessible web site design is that data/content (HTML pages with images, boxes, animations etc) and styling (presentational look) should remain separate whenever possible. Data should retain logical semantic flow however it is styled.

Click here for a presentation on the concepts of Semantic mark-up.

Web sites styling should therefore be performed by a linked external CSS (cascading style sheet) document.

Let's be clear about this ...

An HTML/XHTML or dynamic content web page document will contain tags (including <div> IDs), text and links to media (images, Flash, video etc) ... but the presentational look (styling) of it will be performed by a separate linked CSS.

Separating the content (html and media) from the formatting (CSS) has 5 primary purposes ...

  1. It helps make the site accessibility compliant (the text can be read in a logical order by screen readers for example)
  2. The same CSS can style multiple pages
  3. Style changes effect every page when the CSS is edited
  4. Separate style sheets can be created to redefine the look of a page for different devices (printers, computers, TVs, mobile phones etc).
  5. Sites are easier to update.

The building of an XHTML / CSS page could follow this order ...

  1. Create an HTML/XHTML document and add text
  2. Format the page with tags (p, h1, a href, ul etc)
  3. Prepare for layout and positioning by creating <div> tags with unique IDs
  4. Create an external CSS and link it the XHTML page
  5. Re-define the attributes of tags in the CSS
  6. Define the attributes of your ID (div) tags in the CSS

CSS is described in depth here

JavaScript

Beware of 2 issues when using JavaScript ...

1. It could render your web site inaccessible to screen readers
2. There are various incompatibilities between browsers

You will need to be aware of these issues if you plan to use it. This site has no resources on writing JavaScript but there are LOTS out there!

Related downloads

None at present

Free music MP3s

Free MP3 tracks

Related ads