thoughts on software, technology, fatherhood, and other stuff

October 30, 2005

Site watch: New Age and SMH online designs - much to like, but work to be done

Last week, The Age, Fairfax's Melbourne sister paper of the Sydney Morning Herald, relaunched with a new site design. Indications are that early next week the smh online will also use a very similar design.

Validity of HTML

theage.com.au, when checked with the W3Cs validator, reports 229 errors, and a doctype of XHTML 1.0 Transitional.

With 229 errors in total, what's going wrong?

Here is a breakdown, most if not all of which turn up commonly, as I outline in my original article.

Case and XHTML

XHTML, an application o XML, is case sensitive. The site uses Javascript event handlers like onLoad, which should be onload. Similarly, attributes like HREF and elements like A appear. I suspect these are being generated by a content management system of other application.

Unescaped Javascript

when using HTML as part of the values of Javascript, this must be escaped. I cover this in detail n my earlier article. This accounts for a signiicant percentage of the 229 errors.

Style elements in body

<style> elements must be in the head of an HTML document. This i s a very common error.

Script element with language, not type attribute
This is also a very common error.

Unescaped ampersands

All &s, whether in the content or in attribute values must be encoded as &amp;

Missing required alt attributes

alt attributes are required for all images, and some other elements. If an image is purely decoration, then alt="" is recommended as the value for the attribute.

divs inside paragraphs

It is a basic containment rule that paragraphs must not contain divs. This design uses <div class="clear"></div> inside paragraphs to clear the floated contents of divs (my guess is so that the containing paragraph "grows" to include any floated contained elements)

Overlapping tags

a most basic requirement for XHTML documents is that they be well formed. That includes the requirement that elements don't overlap. The site features example slike this

<a href="https://subscribe.fairfax.com.au/cgi-bin/age.cgi?s_cid=fd:planner:age">Get The Age delivered for $2.70 a week<sup>*</a></sup>

Unquoted attribute values

In XHTML, all attribute values must be quoted.

Non existent attributes

The site features "attributes" such as MARGINWIDTH (and many others) which are not part of any HTML specification.

These results are very similar to and consistent with the results I found i the original survey.

Score out of 5

The site would get 0/5 based on my criteria as outlined in my original survey.

CSS

The W3C CSS validator will often not validate CSS in invalid HTML documents. In this case it is usually enough to use the text area version of the validator. However, for the embedded CSS for this page, this threw an internal error.

My own validation using Style Master found spelling errors like this ine-height:1.2, and a number of properties like this _height:20px, which I suspect were properties to be ignored, but never removed.

I'll give the site 3/5 for CSS.

Structural and Semantic HTML

For such a complex site, it is gratifying to see not a table for layout in sight. The site does use extraneous div elements for clearing floated elements, but also gratifyingly, no other common non semantic elements such as bold elements in place of headings. It does use inline CSS, which discuss in the original article.

I'll give the site 3/5 for this aspect.

Accessibility

For more discussion on this area, see the original article.

The site has the following problems with accessibility as reported by Cynthia says

WCAG checkpoint 1.1

Some images, and pother required elements, fail to have an alt attribute

WCAG checkpoint 7.4

The site uses the META element with the 'http-equiv' attribute value 'refresh'.

WCAG checkpoint 11.2

Avoid deprecated features of W3C technologies

WCAG checkpoint 13.1 Clearly identify the target of each link

WCAG checkpoint 12.4 Associate labels explicitly with their controls

Which does give the site a score of 0.

This is probably a little on the harsh side, as the site is very complex, and some of the infraction are either a mite contentious, or like 11.2, only slightly infringed. But for consistency with the earlier survey, I'll maintain this purely objective approach.

Overall

Overall, the results are similar to those of my recent survey. There, the smh online received 6/20, as this redesign does too. Interestingly, in that survey the scores were 2 for accessibility, 4 for CSS and 0 for the others.

Has progress been made?

Despite appearances, I think so. The code for the design is now leaner and more semantic/structural than it was. This is perhaps the hardest problem for most sites to fix. Not much work could easily fix at least 3 of the accessibility problems. While many of the XHTML problems are probably the result of the CMS or other applications that are being used to develop or serve the page, or by content mixed in from other servers like ad servers, a coupe of days might well be enough to fix most of these. The CSS errors could even more easily be fixed with literally a few minutes work.

I do appreciate the enormity of the task facing the designers and developers of sites like smh and the Age. Content is being constantly updated, and the site design itself must of necessity be very very complex.