What I didn’t know about HTML5

Nick Smith — Wed, 18 Aug 2010 20:45:15 +0000

(Plus a little bit of CSS3).

Bruce Lawson from Opera software came to Skillsmatter on Wednesday night to talk about HTML5 (video here). What follows are my notes. I’m not an HTML5 boffin, but I did start to code a client site in the new doctype recently. Here are the bits I thought were interesting. To read it properly you need to understand more about HTML5. I’d recommend the HTML5 Doctor website or tentatively (I haven’t read it) Bruce and Remy’s book. Sorry for any typo’s etc in the following.

Opera did their own study of the top twenty class and ID names because Google wouldn’t share their results (the HTML5 spec was built on the results of Google’s research). Google looked at 1000 million web pages. You’d wonder why was this important, but e.g. The ID and class names are really important for screen readers. HTML5 gives 28 new tags (or 29 because one’s still being decided).

There’s no version number in the HTML5 doctype because in implementation it never really mattered, bowsers will render what they can, they don’t care whether the tag’s in HTML4 or whatever. All the HTML5 doctype is designed to do is send the browser into standards mode. Therefore it’s the shortest string possible.

Interesting, if you don’t declare a character set, Internet Explorer (IE) has a small but real security risk. The character set declaration must appear within the first 512 bytes of the document. Browsers also never cared whether you closed your tags, they didn’t care whether you used upper or lowercase tag names. The validator did, but the browsers didn’t. The browser also doesn’t care (in HTML5) whether you put in the and elements, the browser puts them in if you don’t. He demo’ed Opera doing this. However Internet Explorer (I assume before IE9) won’t style up a page unless the body tag is present.

He recommends http://html5.validator.nu since it’s the validator that tends to be most up to date.

I forgot you don’t need to close tags in HTML5, that’s just weird, surely the browser has more to guess? Surely the rendering will become less predictable?

* Actually, I spoke to Bruce about this afterwards. He said 70 pages of the HTML5 spec are devoted to telling browsers what to do when elements aren’t closed properly. Therefore any guesswork (not really guesswork if it’s in the spec) on the browser’s part will be consistent across all UAs. The only thing I didn’t ask about is what happens in browsers that use the HTML5shiv and don’t support HTML5, e.g. if IE reads the page, is it still rendering in HTML4? Do I still need to use closing tags to help it along?

The element has been redesigned in HTML5 to mean ‘copyright’. It’s designed to isolate legalese from the rest of the content.

When thinking of

don’t think of a newspaper article (one per page), think of an article of clothing. If the content is discrete and could be pulled into another website it’s probably an article.

HTML5 can be styled in IE without JavaScript but you must know the DOM throughout. Bruce will post a link about this on Monday.

Forms

In HTML5 the browser implements standard error messages for forms. What I didn’t know was using JavaScript, you can intercept these messages and replace with your own. HTML5 is potentially more accessible since “built-in beats bolt-on”, if a slider etc are already built into the browser it’s better for you and accessibility. At the moment the date picker doesn’t work very well with screen readers. It currently depends on the browser and the operating system. NVDA and VoiceOver both work quite well with HTML5 forms. The leading commercial screen reader vendors don’t appear to be interested.

Video

HTML5 video controls are keyboard accessible. You can use a still image to represent a video on screen but there’s a bug in Mobile Safari that doesn’t show the default image. Supporting Ogg and H.264 at the same time is possible! For Safari you put in a second child video source that’s coded in MP4. It means you have to encode your video twice to be cross browser compatible (three times if you use a Flash fallback). Put in an Ogg for Opera, an H.264 for Safari, then a Flash for IE (before IE9). There’s a bug in iPad that means it only recognises the first source element, so where you want to include H.264, Ogg and Flash fallback, you need to include them in that order. Bruce plans to post his code examples for all of this on Monday, or you can review the video at the top of this post.

CSS3

There were lots of snippets of information on this. All I wrote down was the following: if using vendor prefixes in CSS, Bruce always includes all for the major browsers e.g. -moz- ,-ms-, -o-, -webkit- and the unprefixed statement, e.g “transition:”. Use these features with caution, you don’t know if proposed CSS declarations will be modified in implementation or dropped from the spec entirely (as “box-shadow” apparently has been, but it may come back).

6 million user website

Nick Smith — Tue, 30 Sep 2008 22:51:02 +0000

Several years ago I remember taking part in an online survey somewhere on the BBC website. It was geared towards understanding what I, as a user, wanted to see in future developments. I made the effort to stop and take part because I believed there was something worthwhile in developing their web presence, I also believed they were willing to listen and respond. It seems I was right.

Apart from the BBC internet blog and backstage etc. @media 2008 had the fortune of hearing a whistle-stop tour of the redevelopment of the BBC homepage. This site has haunted many web designers since it’s launch with comments from colleagues of “Why can’t we do… {insert name of feature here}… like the BBC homepage?”. It became a shining example of what can be achieved.

Tom Cartwright and Claire Roberts presented their short piece on the development of a site that: took them three months to build; had to cater for 6 million users per month; couldn’t contain loops in the code; couldn’t process XML; had to be accessible; where 5% of users (that’s 300,000) didn’t use Javascript. This is web development at the sharp end.

A point of interest is that they managed to get 60 image requests down to just 3 using sprites. This had the affect of reducing the number of HTTP requests, a big saving on a highly trafficked site.

The size of this project is reflected in the fact that the development team recognised a need to drop JQuery as a Javascript framework and develop their own. Tom described Glow (www.bbc.co.uk/glow), a new framework that supports Safari 1.3 (apparently unlike JQuery). We were told that Glow would be available as open source software towards the end of the year, but judging by the password it looks like this still hasn’t been finalised. They also mentioned that their next project will look towards a pan-BBC identity system for users. The idea is that they’d have implicit and explicit personalisation and that, once logged into one BBC site, your credentials would follow as you traverse the sites. In support of this the BBC joined the OpenID federation, looking at becoming a consumer.

For insights into the future of the BBC homepage see www.bbc.co.uk/home/beta/. They recommended Steve Souders’ High Performance Web Sites (he really knows optimisation).

Nick Smith » Uncategorized

What I didn’t know about HTML5

Forms

Video

CSS3

6 million user website