Chasing the shiny – HTML5, CSS3, transitions – oh my!
Yesterday I had a back and forth on Twitter with Paul Irish and Divya Manian on Twitter about a thing that is full of win but also drives me crazy.
Those two lads built http://html5readiness.com/ – a beautiful demo of what you can do with CSS transformations, JavaScript and markup these days. Here’s what it looks like:
In essence this is the designer’s eye for http://caniuse.com/ which listed the same information in a lesser visual but very useful manner.
When I looked at the visualisation I went “WOW” and so did a lot of other people. But actually when using the site my fascination and interest quickly disolved.
I consider myself quite an observant person and I can read really, really fast. Looking at this visualization though I found myself constantly having to check from the coloured ray to the legend to understand just which browser we are currently talking about. Clicking the fixed browser position checkbox made this a bit more obvious but I am still very confused – especially as the colours are close to each other (on my laptop) and the rollover colour change doesn’t match the legend any more. This gets even more confusing when the colour of the main ray and the rollover changes:
I have no clue why the ray is coloured differently. I might think it is the connector between HTML5 and CSS3, but Geo Location is not part of HTML5.
The next thing I normally do to any interface is to turn off CSS to see how it degrades for non-visual users or on old mobile devices (yes, I do have to use an old Blackberry from time to time).
If you do this on HTML5 readiness you get a terrible experience:
- There is no connection between the year names and the browser support (other than links – a nested list would make the connection much more obvious).
- None of the links (like “Multiple backgrounds”) does anything.
What really made me very confused was looking at the source code though. The authors use B and I tags all over the shop and one of the rays for example is:
<p id="ray-1" class="css3">
<a href="#ray-1">
<em class="twenty10">
<b class="ch"></b>
<b class="sa"></b>
<b class="op"></b>
<b class="ff37"></b>
</em>
<em class="twenty09">
<b class="ch2"></b>
<b class="sa32"></b>
</em>
<em class="twenty08">
<b class="sa31"></b>
</em>
<i>Multiple Backgrounds</i>
</a>
</p>OK, I get it – I and B are text stylistically offset from the normal prose without conveying any extra importance> which technically gives us a carte blanche to do whatever we please with these elements.
Back in the real world, however, WYSIWYG editors have B and I buttons which include these elements as BOLD and ITALIC. Now, as accessibility and semantics fans we’ve been bickering for years that this is a bad idea as this is painting with HTML rather than telling a user agent that the text needs to be emphasized or strong. We made quite some headway with this – and people started listening to us. Now we go back and say “oh well then, actually this is all fine – use whatever you want”.
All in all this example reminds me of something I built 8 years ago:
This was friggin cool back then. It was done for the Commodore 64 scene and it had to work in every browser that knows HTML - including Amiga ones. I managed to make it a “how is that done” moment by not using an image but instead a layout table with spacer gifs:
<table width=1 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
<td width=20><img src="dot_clear.gif" width=20 border=0 alt="" height=20></td>
</tr>
<tr><td colspan=30 align="right">
<font face="Courier,arial" size="-1">
.: the very best of :.
</font><br>
<img src="dot_clear.gif" width=20 border=0 alt="" height=5></td>
<td></td></tr>
<tr>
<td width=20> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20> </td>
<td width=20 bgcolor="#333366"> </td>
<td width=20> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan=5> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td > </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan=5> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td colspan=5> </td>
<td> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td bgcolor="#333366"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#333366"> </td>
</tr>
</table>
<!-- End "Logo" -->
Wow, terrible, right? Who would use tables for layout? This is madness – these are technologies we shouldn’t need to use any longer.
Or is it? By using the plethora of HTML elements in the visualisation above we do exactly the same thing! HTML is there to logically structure content and give it semantic meaning – not to paint lovely pictures.
The page uses Can I use as its source of data – but instead of using a scraper and converting it to the necessary HTML (and by that making it possible to update automatically) the data is duplicated – and once displayed with no semantic value or logical structure whatsoever. We have the technology to convert sensible, good and clean HTML and turn it into something different. I’ve proven that in the past with the data table to charts conversion script:
I really don’t understand why we forget the simple promise we share with our users over and over again:
- Build on stuff that works and then make it more interactive and pretty
In the case of this visualisation – use data tables and generate all the fluff and classes you need to make the CSS work out with JavaScript. Or – how about using SVG for the whole thing?
I am not saying that Paul and Divya did something bad – I am big fans of their work – I am just saying that we keep doing the same mistakes. If you would not write some HTML by hand and only need it for an effect – you are doing things wrong.
Tags: accessibility, annoyances, best practices, clean code, css3, html5, pragmatism, semantics
May 14th, 2010 at 3:52 pm
HTML5Readiness clearly isn’t for showing IE8 users what they’re missing.
May 14th, 2010 at 5:28 pm
Divya is a woman.
May 14th, 2010 at 7:37 pm
You’re right on both accounts (the two being the visually not ideal experience and the markup).
My first thought actually was “Why is IE supporting so muc… oh right, Firefox is blue. Mmm.”
May 14th, 2010 at 8:22 pm
I totally agree.
Doing something like a semantic table -> visualization is the best move, semantically. (Although you know there would be plenty of “you mean this is what HTML5 will be like? tables? FAIL!”)
And you’re the perfect person to be calling us out on this. I recently pointed everyone to your progressive enhancement article in the front-end web development standards document I put out.
However,
There is something to be said about the value of a quick project.
Would I do use markup like this for a client? No. But I have no problem creating a non-IE site with an intended audience of web developers, using some techniques that will help me finish it in a matter of hours.
I think as web developers on the frontline, when it comes to developer-targeted projects, we should be shipping a lot more than perfecting.
May 15th, 2010 at 1:46 am
Thanks Chris! I agree with you mostly on all this. I was hoping to build a progressively-enhanced version of the chart, but all this attention happened before I could get to it!
May 16th, 2010 at 10:24 am
I like the demo and everybody I have showed it to says it’s cool. I do agree that this is not a way to build “real” websites, just like the Spiderman cartoon in CSS animation is not the way to do real animation.
That said, my gripe is the definition of “supported”. Caniuse (where the data is fetched) differs between partial support and full support. html5readiness does not make that distinction. E.g. Safari is claimed to support HTML5 forms, when in reality that support is for 5 % of the additions. Not even Chrome 5 can be said to support HTML5 forms, since that support still is very half-baked. I would say that it is actually bad that that implementation has reached the market, since the behavior is not consistent with how a full HTML5 compliant browser should behave. It will lead to false expectations and the flourishing of bad examples in blogs.
I am pondering an “Half baked HTML5 form support in Chrome considered harmful” article… So in summary, looking at html5readiness the user is totally left in the dark about stuff that really matters, and it is therefore misleading.
May 21st, 2010 at 11:53 pm
Ok, you better stop using JQuery UI not. Jump on that CSS3!
May 27th, 2010 at 2:52 pm
> but Geo Location is not part of HTML5
Many things which are not part of the HTML5 spec are generally considered to be part of ‘HTML5, the movement’, eg. things like Web Workers and Web Storage. A Google for ‘html5 geolocation apis’ gives me ‘About 2,640,000 results’.
May 29th, 2010 at 4:33 pm
Can i launch rocket by CSS 3 or HTML 5?
May 31st, 2010 at 4:00 pm
wow
May 31st, 2010 at 4:17 pm
Chris – Reminds me of a good post by my U.K. coding buddy, in which, he argues why programmers and developers are looking at [javascript] “degredation” wrong. Similar idea, to my way of thinking.
http://waffleson.co.uk/index.php/2010/why-degradation-is-wrong
PS - Hi Paul! Hope you’re enjoying your change in latitude!
May 31st, 2010 at 4:22 pm
I agree so much with this article that it’s actually difficult to express.
It took us 8 years to make html “useful, meaningful, content separated from style”, it took the css3/html5 hype about 1 month to destroy almost all of that. I predict that it will take a good year or so (maybe 2?) before people will start looking at all these “sexy” things as we’re looking at Flash banners and overuse of Javascript now, stopping all the tech wanking and start looking for useful, meaningful and degradable solutions using these new techniques.
Coincidently, wrote about this exact issue last week:
http://www.onderhond.com/blog/onderhond/unsexy-css3-and-html5
June 3rd, 2010 at 6:28 pm
For those interested, Michael Hemesath ported the html5readiness site to SVG via Raphael using a full datatable as the data source.
It’s very cool http://github.com/mhemesath/html5readiness.com
August 22nd, 2010 at 8:50 pm
Wasnt there a comment thread here??
You trash them in a move to disqus? :/