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
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.
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.
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)
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.
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.
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 'https-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, 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.
TrackBack URL for this entry:
Listed below are links to weblogs that reference Site watch: New Age and SMH online designs - much to like, but work to be done:
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 188.8.131.52 https://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