Yahoo7 HomepageYahoo and the Seven Network have combined to create a new ninemsn clone: Yahoo7. They’ve done well and created a site that is a CSS-based layout (ie no tables except for tabular data). It looks nice too, nicer I would say, than ninemsn. I think this site may actually manage to pull my homepage away from Google Personal Homepage. Y7 doesn’t compete for customisation, but it’s got more personality, and personality goes a long way. There’s some good use of DHTML/AJAX, not overwhelming and showy, just used as it should be, i.e. to make things easier to use. I particularly like the little scrollable news box (but just swiped from the news.com.au site) and the customisable local weather widget.

All very nice, but can someone please tell me why, after all the effort of creating a great CSS-based site, you would go ahead and not specify a content-type and put the DOCTYPE tag in wrong?

There is no <meta http-equiv="Content-Type" content="... specified. Trying to validate the page fails because it contains invalid utf-8 characters (utf-8 is the default).

They’ve specified HTML 4.01 as the DOCTYPE, but there is no link to the DTD URI in the DOCTYPE tag, which means it won’t render as expected in most recent browsers (see below). Manually specifying the encoding as iso-8859-1 in the validator works, but with heaps of errors. It manages to guess the DOCTYPE without the URI, but it still chucks the browser into quirks mode.

Also, it thinks that the head tag has been closed, so all the link tags are coming up as invalid. The problem here is that they’ve specified to use HTML 4.01 Transitional, but they’re using the XHTML self-closing tag syntax, as in

<http-equiv="Content-Type" content="text/html; charset=UTF-8" />

rather than

<http-equiv="Content-Type" content="text/html; charset=UTF-8">

The HTML DTD doesn’t allow for this syntax and so the validator breaks.

What this means is that they’ve created this great, well-designed, well-thought out site, and then not even bothered to run it though the W3C validator (or even worse, not cared when it failed).

The simplest solution would be to either change the document to XHTML or remove the self-closing tags. The former would be preferable, as XHTML is better all-round, but after grabbing the page’s source code and changing the top of the document to

<!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">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Yahoo!7</title>

the validator returns over 400 errors, where as leaving it as HTML 4.01 (fixing up the DTD and character encoding tags though) has just over 100 errors. Don’t get me wrong, it’s not the fact that it doesn’t validate perfectly that bothers me, very few of my pages completely validate, especially when you have a CMS where users unfamiliar with HTML can enter copy. What bothers me is that there has obviously been a huge amount of effort put in to make this a CSS-driven, standards-like site, but it fails at the 1st hurdle: the DOCTYPE and character-encoding.

This isn’t just a technical complaint though. Zeldman on A List Apart explains why the Doctype matters:

A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)

Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.

I do like the site, and it should give ninemsn a run for it’s money, especially with it coinciding with the start of the second series of Lost, which will no doubt generate a lot of traffic to the site. RSS headlines would have been a nice addition, but I guess they want people to load the homepage every day. I think it will steal me from Google Homepage. The only advantage of Google was that I could stick custom news feeds there and see the headlines, but then, that’s what I’ve get FeedDemon for.

Technorati Tags: , , ,