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.
So, how does this v 2.0 of their standards based design, first launched a couple of years back stack up? Recently I completed a survey of major Australian web sites and their compliance with best practices in web development. smh.com.au faired reasonably poorly, with a score of 6/20. This actually put it second in its sector, so they are far from alone in being able to do better.
How are they doing this time around? Let's take a look.
My survey looks are 4 aspects of web development practice - validity of HTML/XHTML, validity of CSS, use of structured and semantic HTML, and accessibility. If you'd like to know more about the criteria, please take a look at my original article which details the decisions I made.
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 &
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.
John
October 30, 2005 in site watch | Permalink | Comments (5) | TrackBack
