Opera’s Website (26th September 2008)

(In belated reply to Opera’s Web Standards Curriculum from Accessify Forum.)

(Update 2013-07-04: Opera has donated the project to the W3C Web Platform Docs initiative so nearly everything below is now obsolete. Opera have not created redirects, instead choosing to break the old shortcuts and retain the original articles.)

Putting the TOC on the start page definitely helps! Thanks for getting that done. It’s easier to criticise than to create but the following makes some suggestions to improve the things I’ve noticed more recently.

List Marker Indention

The number for each double-digit list item pokes outside the left edge of the content. From Opera 9.5:

Usually, list markers are indented rather than outdented. In IE7, outdented markers get clipped:

IE6 renders the page in Quirks Mode (BackCompat) and the markers are greatly indented:

Tracing the Styles

There is much confusion between the various CSS files. In my experience of doing cross-browser compatibility professionally, this is inevitable on every site that has multiple stylesheets for the same media. Using Firefox 2.0.0.17 with the DOM Inspector, it’s time for a tale of mystery and intrigue as we delve into the murky underworld of Opera’s website styling…

To begin, margin and padding is zeroed on <ol> and <li> at the start of template.css: 

ul, li, ol, dd, dt, dl {
	margin: 0 0 0 0; padding: 0;
	}

Line 106 of screen.css sets a margin-left on <ol>: 

ul, ol {
	margin-left:20px;
	}

Line 184 of screen.css then zeroes margin and padding from <ol> and <li> for a 2nd time: 

ol, ul, li {
	font-size:12px;
	padding:0;
	margin: 0;
	}

This undoes the indention line 106 had dutifully set.

Line 195 of screen.css adds vertical margin to <ol> and zeroes the horizontal margin: 

p, ul, ol {
	line-height:1.4em;
	margin:1em 0;
	}

(Watch out for that if you try rationalising the CSS.)

A little before it, on line 190, <li> is given a margin-left: 

li {
	margin:0.1em 0 0 20px;
	list-style-position:outside;
	}

This is equal to that which was set on <ol> at line 106…before it was zeroed. Twice.

The saga continues as download.css swoops in from nowhere and zeros all margin and padding from <li> once again! Here, at line 265: 

#thanks ol, li {
	margin: 0; padding: 0;
	}

I’m guessing this was an accident caused by using li instead of #thanks li?

Anyway, there’s one last twist in the tale: Web Standards Curriculum screen.css arrives in the nick of time to make a desperate last stand. It heroically re-applies some indention just before its EOF: 

#wsc_content li {margin-left:20px;}

Tragically it’s too little, too late: 20px just isn’t enough for double-digit list markers. Maybe it should be done with em so the indention increases (or decreases) with text size?

I’m not sure what’s happening in IE6 but I bet it’s an even crazier story!

Bogus XML

The markup for that page starts with this: 

<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en" xml:lang="en">

The pages are sent as text/html so they can’t be processed as XML. As such, an XML prolog is wrong. Having something before the doctype is what puts IE6 into Quirks Mode. Finally, it’s only using the Transitional level of conformance.

Article 14 discusses these points, including this:

The presentational markup that isn’t allowed shouldn’t really be there anyway, since you should use HTML to define the structure and meaning of your documents, and CSS to determine how they are presented. Using a strict doctype will help you with that, since the validator will alert you of any presentational elements or attributes that have sneaked its way into your code.

Roger Johansson, et al.

(Sneaked their way, surely, as that sentance is in plural?)

Something along these lines has already been reported. Yet every part part I’ve checked of Opera’s website starts with the same bogus XML and a Transitional doctype.

I agree with using <ol start> for the TOC, btw. But even that page should be Strict to help check for other things creeping in. As well as setting a good example by following your own curriculum.

We’re on the Scroll to Nowhere…

Not sure if Quirks Mode is the culprit, but the border between the columns is placed beneath the right-hand edge of the right-hand column in IE6:

That picture also shows how IE6 gets a horizontal scrollbar, which is shared by IE7:

Neither IE6 nor IE7 have a horizontal scrollbar on the Opera’s homepage:

The main navigation wraps to a new line in IE7:

It’s correct in IE6:

The problem does not occur on Opera’s homepage:

I take it there’s no cross-browser testing for the curriculum?

Jarring Incremental Rendering

On the homepage of the Curriculum, there’s a very big image. The markup for it is this: 

<img src="/education/images/header_wsc.jpg" alt="Opera Web Standards Curriculum" />

When arriving at the page without that image in the cache, the “Learn to build a better Web with Opera” subheading is just after the “Opera Web Standards Curriculum” main heading. But when the image starts to load, the headings jump apart from each other unexpectedly while the big image fills that space.

Setting the width and height on the <img> would reserve the space. This keeps the headings apart even before the image has loaded, so there’s no “jump” while the page loads: 

<img width="780" height="330" src="/education/images/header_wsc.jpg" alt="">

Some other <img> elements on the page already have this, presumably in the templates. I also removed some XML fluff since this is a text/html resource.

alt Text

Incidentally, that big image doesn’t include the text “Opera Web Curriculum”. So why was that in the alt? It shows a Google Search results page and some scribbled notes…which I must concede are far neater than my own scribbled notes! But that imagery seems unimportant to learning about web standards, so I think alt="" works best here.

Heading Elements Missing

In the Making Opera Work for You section, the subsections are marked up as a single paragraph: 

<p><strong>For educators</strong><br>
			Pass on Web Standards and good development practices to the next generation of Web developers. Opera’s <a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/">Web Standards Curriculum</a> deconstructs Web Standards into modules you can teach either in order or as part of your own lesson plans.</p>

This is a subheading followed by a paragraph. The markup should be this: 

<h4>For educators</h4>
<p>Pass on Web Standards and good development practices to the next generation of Web developers. Opera’s <a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/">Web Standards Curriculum</a> deconstructs Web Standards into modules you can teach either in order or as part of your own lesson plans.</p>

The same mistake is present in the sections below the 2 columns, after <div style="clear: both;"></div>. Those could be <h3> or <h4>, depending on how significant the visual end of the right-hand column is.

Text Size Differs

Between the TOC and the actual articles.

WSC IA

The articles are in a whole different area to the Curriculum’s homepage! This means the URLs are not “hackable” and don’t make sense when reading them from the address bar. Indeed, http://dev.opera.com/articles/view/ is a 404.

Specifically, the curriculum seems to be scattered around several parts of Opera’s website:

Truncated URLs

The curriculum URLs are being truncated at unhelpful places. Such as href="…/1-introduction-to-the-web-standards-cur/" in the previous sample. I suggest using a much shorter end to them, like Joe Clark’s slugs. (Or, to a lesser extent, my own.)

Simple URLs as Only Location

Specifically, I suggest using http://opera.com/wsc/n as the only location for each chapter, where n is the chapter number.

The result is short, logical, hackable, memorable and guessable (to varying extents).

Old Page

The main navigation links to a strange old curriculum homepage. The TOC isn’t on it and it has the promo-looking button. Specifically, you reach that page by doing this:

  1. Hover over Company.
  2. Click Education.
  3. The page loads.
  4. Scroll down to the row of 4 images.
  5. Click the 2nd image link or the “Web Standards Curriculum” text link below it.
  6. The strange curriculum homepage loads.

Instead, I suggest this should go to the /wsc/ area.

The alt text for the image link’s in step 5 (above) is different from that link text, even though they go to the same place. Also, the image comes before the heading of the section it is part of: 

<a href="/education/curriculum/"><img src="/education/images/th_studies.jpg" alt="Opera in your curriculum" /></a><h3>Opera in your curriculum</h3>

I suggest putting the <img> inside the <h3>, like this: 

<h3><a href="/education/curriculum/"><img src="/education/images/th_studies.jpg" alt="">Opera in your curriculum</a></h3>

Since the heading text now provides complete link text, alt="" is correct.

By making the heading into a link, the text which grabs the user’s attention is the text they can click to find out more. See it, click it. It also makes the clickable area huge: Fitt’s Law ftw!

When viewing an article, the right-hand navigation has an Article Categories section. This is a list of links (good) where the bullets change colour as you hover anywhere over each item (good) but you can only click on the actual text of each link (bad).

The list includes a Web Standards Curriculum link which goes to yet another TOC. The link which points to this page gets the special bullet (good) but remains a link (bad). Anyway, this TOC has a rather…erm…imaginative order for the articles:

The first article is in the top-left (good). But the rest of the articles are in reversed order (bad). This page could be removed and the sidebar link could go straight to the Web Standards Curriculum homepage, since that now has a TOC. Indeed, its TOC is better since it groups the chapters into sections and summarises the aspects they cover.

Copy & Paste

Opera’s markup is compacted to save bytes. Efficiency is good but they still use:

By producing legible markup, developers could learn from what Opera does as well as from what it’s curriculum says. The convenience of that learning opportunity seems far more valuable than saving an ounce of bandwidth. Clearly showing that you practice what you preach makes sense when you’re releasing a high-profile project telling people how they should make web pages.

Desynchronised TOCs

Article 4 has an “Is XHTML the adult-rated version?” link in its TOC. But this points to a “What is XHTML?” heading.

I guess the heading was edited to be less controversial but the TOC wasn’t updated? There’s a rogue &lt; entity at the end of the “An example page” link in the TOC, too.

“…and it’s goodnight from him.”

Opera’s website is good, for sure. But it “could do better” and really should do better, imho.

Lead by example by getting all of it right. Make improvements which exceed my suggestions.