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).

Is the iPad for creating or consuming?

Nick Smith — Wed, 10 Feb 2010 00:20:16 +0000

As an avid Apple follower and a web designer I’m interested to know. I saw Apple demo an iPad version of iWorks, but will this thing work for real-world productivity? If it’s just for consuming, then it’s all set up already. It has the screen for movie watching, the graphics for games and over 130,000 content delivering apps already developed.

But if it wants to follow on from the iPhone then it has to extend what’s gone before. It’s going to have to fill the space as advertised and provide some desktop-like features. To occupy the sub-notebook/netbook world, it’s going to need a bit more functionality than a mobile phone. It’s revealing that I’m writing this on an iPhone but will upload it from the desktop where I feel I have more control.

Screen size

When web browsing I’m expecting to get the full desktop version of every website, unless a page has specific browser detection this already happens with the iPhone. But on the desktop I expect to have extended ways to deal with the content, of which plugins and background processes are a big part. Will Apple allow me to install a Delicious plugin or chop and change between 2 – 3 apps running at once? Will I be able to have my web code open in one programme and the site I’m working on in another? Better yet, will they let me install an alternative browser, one with a wealth of extensions already developed? All very doubtful.

Size of the market

Currently I see good uses for the iPad in business and education. Imagine the delivery person using it to find your house, or the hospital doctor pulling up digital X-Rays, or the classes with lessons tailored to individual students with content delivered at a suitable pace and level.

If marketed and priced right, I can even see it becoming the next big gaming device at Christmas. Evidence suggests major games developers are already switching to the platform. But what will take the iPad into the mass market?

Essential or extravagance?

With the iPod and iPhone, Apple were entering established markets where demand for the product type was already developed. With the iPad it’s different since most consumers won’t have heard of a tablet, let alone be convinced of why they need one.

The boundary between creating and consuming could be what makes the difference here.

The adaptable device

The genius behind this device is that Apple haven’t bowed to the pressures of the rumour mill. They haven’t created an overcomplicated piece of hardware full of whizz-bang features (OK, it could’ve had a camera). The genius of Johnny Ive and co. is that they didn’t tinker with a winning formula. It looks like an oversized iPhone. This leaves the software people to work from a solid foundation and build features into later updates that match developer and consumer needs (sorry guys, not necessarily ‘wants’).

Another genius move is that Apple haven’t cornered themselves too much with the possibilities for this device, meaning that everyone interested has their own thoughts and hopes for what it can do. Software driven products like the iPad have a huge potential to capture the imagination.

So if anyone’s listening and if this post can be at all useful, I’d be interested to hear your ideas on what you’d like to see it do.

Nick Smith » iPad