Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for May, 2010.

Archive for May, 2010

Chasing the shiny – HTML5, CSS3, transitions – oh my!

Friday, May 14th, 2010

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:

HTML5 Readiness

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:

HTML5 Readiness dark rollover.

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:

HTML5 without CSS

  • 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:
















Multiple Backgrounds

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:

Logo painted with a layout table

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:




















































































































.: the very best of :.


                                                             
                                                   
                                                           
                                                   
                                                   


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:

Generating charts from accessible data tables using the Google Chart API by  you.

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.

Leancamp London – a new outlook on startups

Tuesday, May 11th, 2010

After spending the past weekend at Warblecamp I went up to the construction site that is the Great Western Studios to attend Leancamp. In essence, Leancamp was an unconference trying to promote a new, more agile and leaner approach to starting your own business. Instead of trying to dazzle investors with great visuals and random predictions of future prosperity you concentrate on what you want to build for whom first and then spend as little as possible to achieve as much as possible. Being nimble, agile and lean is more important than showing impressive numbers and burning through a lot of cash before hopefully being bought by somebody.

leancamp scheduleLeancamp attendees.

With me being very oblivious to the pains and ideas of having an own startup my part in Leancamp was two-fold: giving a talk introducing Yahoo technologies that startups can benefit from (YQL, YUI, Design Patterns) and interviewing David Heinemeier Hansson of 37 Signals about their new book Rework for the YDN Theatre.

The latter came as a bit of a surprise as I neither knew anything about the book or much about 37 signals really (never having had a small company I never used BaseCamp). So I spent my weekend reading the book to prepare myself for the interview. For me it was a bit of a blast from the past as I used to work for a radio station constantly interviewing people before becoming a web developer.

My talk had – after a few initial planning hickups – a lot of people in the room and covered all the things Yahoo offers for companies to use for free to build quick prototypes that can easily be turned into full blown products without worrying about scaling and them working in an environment as hostile as the internet. The slides are available on SlideShare and the audio at archive.org.

I once again was fascinated just how many of Yahoo’s tools are not known to people. I do think I am doing quite a good job promoting them but clearly not enough :)

I will write more about the interview with David Heinemeier Hansson and the book once the video is out.

All in all Leancamp was an interesting (un)conference for me as it meant I met people from environments I normally don’t hang out in. The organisation was good (exception was the lack of food as it ran out very quickly – although @farhan was nice enough to get me a sandwich while I was preparing my talk).

There were some really good discussions going on and I am sure a lot of the material that was recorded will show up on the Leancamp site sooner or later.

May the fourth be with you – TTMMHTM – 8 bit trips, Android apps, Senate porn and lots of other good stuff

Tuesday, May 4th, 2010

Things that made me happy this morning