« Australians at SxSW interactive 2006 | Main | Semantics in the wild »

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 &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.

John

October 30, 2005 in site watch | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341cbf7d53ef00e55021084e8833

Listed below are links to weblogs that reference Site watch: New Age and SMH online designs - much to like, but work to be done:

Comments

A little odd that they've made errors that previously weren't evident.

My guess is the _height in the CSS is intended as an IE hack... much as I don't like conditional comments they'd probably be better off using them for their situation.

Speaking of new sites... the National Bank just launched a new version of www.national.com.au and they're shooting for XHTML Strict (not quite there, but at least they're aiming high). I haven't done a full John Allsopp scale evaluation yet though :)

Posted by: Ben Buchanan | Oct 31, 2005 12:45:12 PM

Underscores in front of property names are used to feed values only to IE. The interesting thing, though, is that it's arguably valid -- see 4.1.2.1 http://www.w3.org/TR/CSS21/syndata.html#q4

Posted by: Adrian D. | Nov 9, 2005 11:37:22 PM

 This is a very good idea! Just want to say thank you for the information, you have to share. Just continue to write such a position. I will be your faithful reader. Thank you again.

Posted by: fivefingers | Sep 9, 2010 11:25:30 AM

Then if a 1314different cotton is shipped to us on the order which we give at the

Posted by: UGG Outlet | Jul 23, 2011 11:46:59 AM

yeah,I like your article,this is very useful for me.

Posted by: Moncler Outlet | Aug 16, 2011 3:43:16 PM