Category Archives: HTML5

modern.IE

modern.IE I’m a Program Manager on the Developer Relations team for Internet Explorer. The core mission of my team is to help developers write interoperable web sites across all of the major browsers. To that end, we have put together a set of tools and downloads that will help you testing, especially for Internet Explorer but most of the tools help across app browsers.

modern.IE Scanner

The modern.IE Scanner is does a static scan of your web site looking for common issues on web sites. Currently, it looks for:

Fix common problems from supporting old versions of IE
Known compatibility issues
Compatibility Mode
Frameworks & libraries
Web standards docmode

Fix common problems from supporting old versions of IE
CSS prefixes
Browser plug-ins
Responsive web design

Suggested enhancement
Browser detection
Optimize the images on your page
HTML5 inputs

Suggested enhancement
Prerender + prefetch

Suggested enhancement

Compressed content

Consider building with some new features in Windows 8
Touch-first browsing
Flip Ahead Browsing
IE11 tiles + Notifications

Once you’ve scanned your site and reviewed the static results, you can take a look at how your site looks across a lot of browsers with the screen shot service by Browser Stack and also do a scan for code that’s no longer supported by current versions of Internet Explorer.

It will save you a bunch of time testing and looking for issues to scan your web site with the modern.IE Scanner.

Virtual Machine Downloads

The scanner is great but there’s nothing like looking at the real thing. To help here, the team has put up a large set of virtual machines to help you out here. These virtual machines are designed for you to do Internet Explorer testing.

We have virtual machines for folks running Windows, OSX and Linux across the following virtualization platforms (dependent on base platform):

Hyper-V (Windows)
Virtual PC (Windows)
Virtual Box (Windows, OSX and Linux
VMWare (Windows, OSX)
Parallels (OSX)

The virtual machines include a lot of different Windows OS and browser configurations.

Windows XP with IE6
Windows XP with IE8
Windows Vista with IE7
Windows 7 with IE8
Windows 7 with IE9
Windows 7 with IE10
Windows 7 with IE11 (Currently RP but soon to be release)
Windows 8 with IE10
Windows 8.1 and IE11 (Currently preview but soon to be release)

This is a lot of machines. If you count up all the variations of virtualization platform, OS and browser, it’s a little over 90 VMs that we’ve got for you to download.

These are 90 day VMs because they are not activated VMs. This means that in 90 days, you’ll need to come back and download a new one but that’s a good thing because we’ll be keeping them up to date with security patches and the like on the web site so you don’t have to think about it.

Offers

There are also partner offers that we give from time to time ranging from some percentage off of Parallels to a 3 month trial of Browser Stack (rather than their normal 1 month trial) and so on. These change from time to time so I’m not going to go through all of these here.

Summary

There’s a ton that the team is doing which is all aimed at helping web developers build an interoperable web. What I hope never happens again is a “Best viewed in X Browser” tag on a web site again.

.NET Rocks Ireland

.NET Rocks Ireland is coming to Ireland and Northern Ireland

 

Register:

Oct 7th, 2013 – Galway – http://bit.ly/netrocksgalway

Oct 8th, 2013 – Dublin – http://bit.ly/netrocksdublin

Oct 9th, 2013 – Belfast – http://bit.ly/netrocksbelfast  

Carl and Richard are coming to Ireland and Northern Ireland! That amazing podcast done by those technical and comic geniuses will be recorded in front of a live audience in three great cities on Oct 7, 8 and 9.

Richard Campbell and Carl Franklin

 

Dates

Oct 7th, 2013 – Galway – http://bit.ly/netrocksgalway

Galway is our kickoff. We haven’t picked the evening guest yet but we’ll announce them soon.

 

Oct 8th, 2013 – Dublin – http://bit.ly/netrocksdublin

In Dublin, we’ll be joined by the astounding Mark Miller himself. He’s going to be recorded live in from of the audience.

 

Oct 9th, 2013 – Belfast – http://bit.ly/netrocksbelfast 

In Belfast, we’ll be joined by marvelous Martin Woodward who undoubtedly improve your software development process.

 

Daily

We’ll start the day at 1:00 with a half day HTML5 conference and end the day with a .NET Rocks recording. Whether you are doing web development or app development with HTML5 technologies, this conference is for you. We’ve got 3 sessions that start off with how to handle touch in my HTML5 app and then diving off into ninja level talks with 3D and how you do performance analysis to make sure that your users are blown away.

Schedule:

1:00 – 1:10 – Welcome and introductions

1:10 – 2:00 – Touch Me, I dare you!

2:00 – 2:50 – You can do that in a browser?

2:50 – 3:00 – break

3:00 – 4:00 – The Perf Doctor is In

4:00 – 4:10 – break

4:10 – 6:00 – .NET Rocks recording

Touch Me, I dare you!

Speaker: TBA

Abstract:

Designing for a touch first web is becoming more important every day with the proliferation of touch devices ranging from phones to tablets to convertible laptops to touch monitors. The issue is that most folks think this just means having bigger buttons but they are wrong. Yes, understanding touch target sizes is important but that’s the absolute bare minimum. A great touch experience starts with understanding your user’s context and includes understanding the difference between touch and a mouse with issues ranging from how to handle gestures to thinking about things like your usage of hover state to scoping input correctly and more. In this brief session, we will dive into these issues and show you how to build a great web experience that will help you on all platforms and devices with touch interface.

You can do that in a browser?

Speaker: Michael Barr – CTO of Scaboodle and an outstanding speaker. He’ll wow you with his demos and his knowledge of creating an amazing experience for your customers.

Abstract:

The web platform is amazing. With the onslaught of new capabilities in modern browsers such as WebGL, Pointer Events, Video, WebSockets, Web Workers, FileStorage, Geolocation and so much more, web development is more fun, and more challenging, than ever before. In this session, we’ll dive into some amazing demos and show you what’s possible in the modern day browsers and show you how you can do this yourself.

The Perf Doctor Is In

Speaker: Josh Holmes – Senior Program Manager on the IE Developer Relations team.

 

Abstract:

Building a high performance front end is a balancing act. You need to understand all the different moving parts and subsystems in the browser and how they interact with each other.

Small changes can significantly impact page and app load time, memory consumption, and processor use which has a huge impact on your user’s experience!

In this session, we will dive into the subsystems of the browser and learn to optimize performance on sites and in web apps.

We will also deep dive into the new performance analyzing tools available expose good and bad run-time patterns for your sites and web apps, and provide users with a fast and fluid experience.

 

.NET Rocks Recording

Recorded live in front of you will be that amazingly popular podcast that’s reaching (literally as in actually as in for real) millions of developers each and every month.

The guests and topics for the recording will be announced closer to the time but there are rumors that Mark Miller (if you haven’t heard of him, go listen to http://dotnetrocks.com/default.aspx?showNum=338 – brilliant and funny) is going to crash the party and join us in Ireland. We’ll also be highlighting some of the amazing folks from Ireland who are forging the way in technology.

Looking forward to seeing you there!
Josh Holmes

Working on a HTML5 REf Poster

Question marksThere’s a ton of new things that I’m working on in my new job on the IE Dev Marketing team but one of them is a 3 part reference poster for HTML/CSS/JS. I’m trying to figure out the correct content and the like for these reference posters and using a ton of things as inspiration. However, I’m kinda at a head smacking keyboard point so I thought I’d ask for help.

What would you like to see on a set of reference posters that we give away at conferences, user groups and the like?

Chances are that you’ll see one of these posters being given away at an event near you sometime soon so it’s in your best interest to chip in and give me some ideas. 🙂

I really don’t want to end up with something as messy and text heavy as some of the reference posters that I’ve run across (not pointing fingers but http://www.visibone.com/html/charts.html…).

First I saw the posters up at HTML5 Poster – http://html5poster.com/. Those are beautiful and I think that people like them but I’m really leaning towards something that would be useful in addition to beautiful so that people would keep them up and use them for a long time to come.

One of the first semi technical inspirations was poster that was part of a kickstarter – http://www.html5blog.org/2012/09/01/the-best-html5-poster/ but I looked at the kickstarter and it failed to raise the desired $4000 in funding so I’m not sure what that tells me.

The next one that I saw was from XHTML-Labs which you can check out at http://www.xhtml-lab.com/html5poster. There’s a similar one for CSS (https://gumroad.com/l/css-cheat-sheet). Reality is that these are not a new concept (http://blogs.msdn.com/b/cbowen/archive/2007/12/09/got-tech-posters.aspx). I’m not ashamed (well, not that ashamed) to say that I had the Silverlight 1.1 Developer Reference Poster (http://www.microsoft.com/en-us/download/details.aspx?id=10423) on my wall at one point. But I started thinking about that and wondering if that’s valuable. Would you like a reference of all of the HTML tags possible and their associated attributes?

Or would you prefer something that was a little more targeted at the new stuff so assumed that you know the basics of the head, body, ul, ol, li and the like? Or is that even useful?

I also saw the SitePoint HTML Reference poster – http://www.sitepoint.com/have-you-got-your-free-sitepoint-html5-reference-poster/. That one goes through and shows a number of little useful tidbits and how they were built. Thoughts on that? It breaks down the idea of three posters being HTML, CSS and JS but we could continue to add to it over time and it could be more than three posters and end up at 10-20-* depending on how many little ideas we come up with. What I don’t like about this is that this seems like a LOT more work than the simple reference ala the ole Silverlight reference poster that I used to have.

There’s also the periodic elements poster but AlaraMills.com at http://alaramills.com/store. It’s definitely a unique take on the HTML spec. It’s not something I’m going to do but I really like the take. My problem there is that then how do I take it to JavaScript and CSS as well.

So I put it to you, what kind of poster would you find valuable/desirable? What would you hang on your wall and refer to?

Please use the comments below or if you want to send me a not privately, ping me on twitter (@joshholmes) or email me at [my first name].[my last name]@[where I work].com (hopefully you can figure out the email without too much trouble…).

Thanks!!!

Touch Me, I Dare You…

Touch me I dare you This week I’m at JSConf and had the pleasure of speaking. The title of my talk was Touch Me, I Dare You. It’s the first talk that I’ve done since I joined Internet Explorer. One of the big things that we’re working on in Internet Explorer is touch. We think that it’s an incredibly important part of life on the web going forward. Why does touch matterThere’s a lot of reasons that we think that. One of the reasons that we think that is that is that we’re looking at the incredible proliferation of touch devices out there in the world. This ranges from all of the smart phones out there to the tablets to the laptops and convertibles that have touch screens as well. It’s a growth space for sure. Touch has reached into almost every aspect of our lives. There’s even a touch screen TV with an interactive display just off the lobby in the hotel here at the conference.

What's your strategy for dealing with touch?

So what’s your strategy for dealing with touch? The first possible strategy is to just simply ignore touch and let the defaults take care of things. If you do that, the browser will treat your finger as a mildly inaccurate mouse. This is a legitimate strategy as long as it’s your strategy and you do it deliberately and take on board some of the other best practices which I’ll talk about in a moment. The second strategy is to retrofit touch support onto your web site. This is a loosing strategy every time. It’s much better to work the other way around and design for touch first. This ensures that you’ve taken the best practices into account typically mouse and keyboard just work at that point.

Hover sucks

The first of the best practices is that hover sucks, don’t use it. The key to touch is that it’s touching. The screen has no idea that your finger is a millimeter from the screen. Some of the browsers will help you and make the touch emulate a hover but it’s not a great experience. Even with a mouse actually, hover still sucks because it’s not a natural motion to try and stay over your content even if it’s not a straight line in order to keep the menu open. If you don’t believe me, try it sometime and think about the users that keep loosing the menu when trying to move from the top to a sub menu.

Touch sized buttons

Hopefully obviously, you need to use touch sized buttons. It’s a great thing that a lot of devices, especially smart phones, allow you to zoom in in really easily into your different controls and interactions but this is not fun. The ideal way to do this to build for touch first and everything that you do here will actually make your mouse and other inputs work better.

Demo of different size fingers The reality is that the finger is much wider than a mouse. How wide? Depends. An NBA player has a finger that’s kinda in the 20mm width range. That’s a big finger and he’s not going to be able to use your site on his touch device. Normal is closer to 11mm which works out to roughly 42px depending on the size, resolution and pixel density of your screen.

Ergonomics & touch

And with touch more than any other type of input, you need to keep your user’s context in mind. They could be walking, holding the device on their lap, on a train, in a stand on a desk like a normal monitor or any other type of context. All of these contexts mean that accuracy might or might not be incredibly accurate. You should design with large targets with plenty of breathing room to help with that. It’s also important to give visual and potentially audio feedback on touch to let people know that something actually happened.

how far to fingers reach on a tablet

Also for touch, you have to think about how long a finger is and how comfortable it is to reach different points on the screen. You can check this yourself on your own touch device. Reaching things in the top center of the screen is tough whereas on the sides and the bottom is a lot easier.

Design for touch first

The natural reading areas are at the top center of the screen. This is true regardless of what type of input you are using because that’s where the eye goes.

 

Remember there's more than one finger

Another thing that is incredibly important to remember is that there’s more than one finger that they could be playing with. It’s actually very possible that two people will be touching your site at the same time. This is in stark contrast to a mouse as there’s only one on the screen at any point in time.

remember there's more than one kind of input

The other thing to realize is that there’s very potentially more than one type of input happening at any given time. People can use mouse, touch and pen input all at the same time. It’s important to keep this in mind and build for that from the beginning.

So how to I do all that?

That sounds like a lot of stuff. So how do I do that in the simplest way possible. One of the issues with a lot of current code is that it will work for either touch or mouse. Or it will ignore pen input. The reality is that we can, with one simple set of events, manage for all of that.

Go Pointers

With IE10, we implemented a new interaction model called Pointer Events. It’s currently implemented as a MS prefixed set of events in just IE10 but we’ve submitted it as a spec to the W3C. The reception from the W3C and surrounding community has been outstanding. It made it from submission to Candidate Recommendations in a fairly blazing 9 months. We’ve been working with a lot of other browser vendors and we’re looking forward to some wide spread adoption.

W3C Pointer StandardThe event model is fairly similar to what you’d see with your mouse but the events you catch are much richer.

The events are pointerdown, pointerup, pointermove, pointerover, pointerout and pointercancel. I made the mistake in the slides of upper casing the second word in each of the events.

Pointer Event Models

At the moment, in IE10, the events are MS prefixed and you should use those in IE10. We’ll talk about support for other browsers in a moment.

 

 

Values on the events include width, height, pressure, tilt, rotation, and more

On each of the events, you get width, height, pressure, tilt, rotation, pointerType (mouse, touch, pen…), event type and more. The great news here is that

 

 

Coding for multi-touch

Coding for multi-touch is actually pretty simple. Each time you get one of the events, you should iterate through the list of current pointers and react to each of them appropriately. This is the primary difference that you’ll have to make to move from mouse and interacting with one item on your page to more than one and interacting with multiple items on your page. Gestures and the like were not something that I discussed primarily because it’s a complex subject and I only had a short 30 minutes.

current touch support on IOS/Android

Current touch support on IOS and some android devices is based on the Apple recommendation of touchstart, touchmove and touchend. There are a couple of issues with this approach. Sidestepping the politics and focusing on the technical, touchstart handles exactly what it says – touch. It doesn’t handle mouse or pen so you have to code separate paths for each.

Touch first coding With pointer events, you only have to code for one thing if the browser supports pointer events but you will have to polyfill on the browsers other than IE10 at the moment. You can do this by hand by just doing a fallback to touchstart and mouse. There’s actually an unintentional bug in the code sample in my slide. I do the pointer event but in the fallback, I only catch touch OR mouse, not both which means that someone with a touch screen won’t be able to use a mouse.

Use polyfills for older browsers

Regardless, it’s much better to use one of the polyfill libraries such as hand.js from Bitovi. I still like to default to the MSPointer events in IE10 because they are native and then polyfill the other browsers where needed at the moment.

 

 

if (window.navigator.msPointerEnabled) {
	
	// MSPointer events which are only in IE10. Use if possible as they are native
	Event(leftOverlay, "MSPointerUp", function() { 
		if(Game.canStart()) { Balls.release(Player.ONE); } }, false);
	
	Event(rightOverlay, "MSPointerUp", function() { 
		if(Game.canStart()) { Balls.release(Player.TWO); } }, false);
	
	Event(leftOverlay, "MSPointerMove", Game.movePaddle, false);
	
	Event(rightOverlay, "MSPointerMove", Game.movePaddle, false);

}

else
{
	
	// these are the polyfill events for hand.js. Use these as a backup currently
	
	// as these are the polyfill.
	
	Event(leftOverlay, "pointerup", function() { 
		if(Game.canStart()) { Balls.release(Player.ONE); } }, false);
	
	Event(rightOverlay, "pointerup", function() { 
		if(Game.canStart()) { Balls.release(Player.TWO); } }, false);
	
	Event(leftOverlay, "pointermove", Game.movePaddle, false);
	
	Event(rightOverlay, "pointermove", Game.movePaddle, false);

}		

wrapup

Hopefully this has been helpful. There’s a lot more that I didn’t get a chance to cover that can be found at http://modern.ie as well as http://docs.webplatform.org/PointerEvents. And as always, you can find me on http://twitter.com/joshholmes.

BTW – the slides are up at http://www.slideshare.net/joshholmes/touch-me-22254401 

Good luck and go touch something…

Is that a Rich Web in Your Pocket?

clip_image002I had a fantastic opportunity recently as I was asked to speak at the Google Tech User Group on HTML5. Eoin Bailey, co-founder of Hit the Road and one of the founders of the Dublin GTUG, invited me to speak on HTML5 with some of their other speakers to give a full out HTML5 day at the Dublin GTUG. I couldn’t pass up the opportunity to speak at Google so I rearranged my schedule to make sure that I could make it. 🙂

 

The schedule was as follows.

1. Ilmari Heikkinen, "Sprucing up your pictures with HTML5" – Ilmari will cover some HTML5 basics – the enhancements that it provides over previous web standards and will focus on how image and video filters can be used, demonstrating some examples.

2. Neil Turner, "Lessons learned with HTML5" – Neil has built some web applications based on HTML5 and will talk about his experience doing this, including browser support issues, compatibility, responsive web design and performance.

3. Josh Holmes, “Is that a Rich Web in Your Pocket?” – A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

I borrowed some of the slides from Joe Marini’s MIX talk on Mobile and put my very demo heavy spin on it. My slides are at http://www.slideshare.net/joshholmes/is-that-a-rich-web-in-your-pocket.

Slide1I’ve been passionate about mobile and mobile web for quite some time. I’ve been doing on device mobile development for the better part of 10 years now starting back with CE 4 in January 2002. It’s amazing to me, however, how far the mobile industry has come in that time period. It’s been a fast and furious but fun ride in that time…

Slide2Do you remember the pain of trying to develop on for the text based browser? Remember  when WAP (Wireless Applications Protocol) development was all the rage? It seems soooo long ago at this point and so old school. In actuality, the WAP forum who were the main drivers of WAP was actually consolidated in 2002. And I remember when it was such a huge deal that the ASP.NET Mobile Toolkit could produce WAP compliant mark-up which meant that I didn’t have to…

Slide3

But the mobile web development space has exploded. Smartphones these days, including the Windows Phone, are capable of running some amazing things. To demonstrate I showed HamsterDance Revolution which uses javascript, CSS3, the audio tag and more with some serious performance on a Mango device. Next I showed the FishIE Tank and the Speed Reading in rapid succession and then moved over to the Mango emulator for my demos.

Slide4Phones these days have the potential to be much more than just a small computer in our pocket. Phones these days know what time it is (clock), where it is (geo-location), what the lighting is like (light sensor), if it’s moving (accelerometer), where it’s going (compass) and can even see (camera) and hear (mic). It’s amazing what they are capable of these days. With all of that knowledge of their surroundings, mobile apps and sites should be augmented by reality. They should geo-locate you to give you directions to the closest train stop (for instance) rather than you having to pick from a list. If the lighting is bad, they should go with a high contrast colour scheme. If it’s loud around you, they should not ask for voice input. If you’re moving, minimize text input. And so on. At the moment, the browser doesn’t have access to all of these sensors but I can’t imagine that that’s that far away.

Slide5In addition, the way that people use devices in a mobile context is vastly different than a desktop development. It’s more than just the screen size that matters here. People who are using mobile are on the go and need immediate information. As part of that, I showed the United Airlines mobile site, Facebook, Twitter and the like.

Slide6When people are sitting at their desk, they are in a controlled, stable and (a lot of the time) comfortable environment. They are able to do sustained browsing and research.

When people are on the go, they need quick, "glance-able” information that will give them the information that they need at the moment. For example, that could be directions to the venue that they are headed to or a phone number or any number of discrete bits of information that they need while on the go.

Slide7Then I moved on to talking about designing for the finger verses the stylus/mouse/keyboard. First of all, the finger is not as accurate as a stylus or mouse. If I turn my finger on it’s side and am very careful, my finger is still at least 40 pixels across and most of the time it’s closer to 80 pixels. And then there’s all of the sites that are so dependent on the mouse and/or keyboard.

As an example, I pulled up http://thekillersmusic.com/html5 in IE9 and showed how fantastic of a site it is and then showed the same site rendering on Mango but talked about the fact that it’s too reliant on the mouseovers and the like to be useful in a mobile context. Same thing with Pacman in IE9 verses on a mobile device. While it renders and plays, it requires a keyboard for navigation.

Slide8

Mobile sites need to be clean and crisp without a lot mixed fonts, colours and the like. Don’t overuse graphics, gradients and  heavy background images as they can all effect download speed and/or view-ability in direct sunlight. Make sure that you’ve thought about the readability and the usage of whitespace. Obviously you don’t want to go nuts with the white space because you’ve got so little real estate to start with but a little bit of white space can make all the difference.

Slide9

Work as hard for your user as you can. In other words, minimize the user’s input by providing intelligent defaults and picking up as much from the sensors as you can to make as many decisions as possible. Make sure that you store user’s previous inputs and where possible, use them to help streamline future engagement.s

Slide10Lastly, think carefully about your mobile strategy. It can range from doing nothing to going hog wild with a mobile specific design.

One of the key things here is that you make a deliberate choice with regards to your mobile strategy because almost guaranteed you’ll have users browsing your site from their mobile devices.

  • Do nothing
    • No special content adaptation, result is the desktop site being delivered to the device. Sometimes, this is the right choice. It’s definitely the default choice and the easy one to go with.
  • Basic Mobile Adaptation
    • Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile. This one is slightly more difficult to pull off as you have to make sure that your content works on both desktop and mobile.
  • Multi-Serving Content
    • Same page is sent to mobile and desktop, styled differently for each. This is not as hard as you’d think. You can accomplish this through the use of the @media tags to reformat the layout dependent on screen width and the like.
  • Mobile Specific Design
    • Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary. This is a high end strategy that requires a lot more work as you’re effectively building two different sites. On the other hand, it makes the mobile experience fantastic but doesn’t require you to compromise on the desktop experience.

Slide12

The quick couple of take aways are that mobile web has evolved tremendously over the past handful of years. As a result you should really think about your mobile strategy and consider your mobile user’s context as part of that strategy.

Oh – and in my last moments I threw up http://ie6countdown.com to hopefully push out the last bits of IE6 around. 🙂

This was a fun talk to give and I hope to expand on this talk and do a much richer version in the near future.

Getting Started with HTML5

imageI’ve been spending more and more time in front end web development with HTML5 recently (yes, you can expect a redesign of my blog here soon) an ,d thought I’d demystify some of the bits that I keep hearing out there.

First of all, HTML5 is not all brand new and completely different and going to revolutionize the world. It is an conglomeration of standards and an evolution of various parts of those standards. The reality is that it’s added 30ish new tags, some of which you’ll care about, some of which you won’t. Some of these tags are very powerful and some of very narrow in focus. For example, <canvas> is a very powerful tag that brings a drawing surface that’s going to allow some amazing interaction while <ruby> is a way to denote pronunciation guides for obscure characters in logographic alphabets such as Chinese and Japanese. While absolutely needed for the localization in those communities, it’s fairly limited in use.

But you’ll find that type of thing throughout the new tags – there’s a huge emphasis on localization and accessibility. For example, the new <nav>, <header>, <article>, <figcaption>, <aside> and more have nothing to do with the flashy animations and transitions that we are used to hearing about with regards to HTML5. Rather they are focused on accessibility and giving machines, including search engines, more intelligence about your site and content. This is a great help to screen readers such as JAWS but also is a step towards semantic web.

You can start using these features today with absolutely no worries because down level browsers will just simply ignore them. Now, if you site is heavily dependent on the most hyped tags, <canvas>, <audio> and <video>, you’ll have to figure out what your contingency is for non-HTML5 capable browsers. That could be using Silverlight or Flash or a completely different representation of the information in old school HTML4.

A very simple format for blog page (yes, I’m stealing this from the redesign that I’m doing on my site as we speak) is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="yourcss.css" />
        <title>Getting Started with HTML5 - Josh Holmes</title>
    </head>
    <body>
<header>
     <h1>Josh Holmes</h1>
</header>
<nav>
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/aboutme">About Josh</a></li>
      <li><a href="http://twitter.com/joshholmes">twitter</a></li>
   </ul>
</nav>
<section>
<article>
   <hgroup>
      <h2>Getting Started with HTML5</h2>
   </hgroup>                     
   <p>Main content</p>
   <p class="image"><img src="html5logo.jpg" alt="HTML5 Logo" /></p>
</article>
<article>
   <hgroup>
      <h2>Some other post</h2>
   </hgroup>                     
   <p>Main content</p>
</article>
</section>
<footer>
   Licenced under Creative Commons <br /> Updated: <time datetime="2011-01-06">June 1st, 2011</time>
</footer>
    </body>
</html>

There’s a bunch of little things to notice here.

  • Notice that it looks extremely similar to an HTML4 web site.
  • Notice the short and simple doctype declaration – <!DOCTYPE html>.
  • Notice the beautiful separation of the various sections into very human and machine readable content.
  • Notice the <time> element that gives meaning and structure to the date.

In a nutshell, don’t be scared of HTML5. It’s an evolution of existing standards. You can use the structure that I listed above with little to no worries without having to figure out all the new stuff with <canvas>, <video>, brushes and the like or going nuts with JavaScript.

I’ll be blogging along about the JavaScript integration and the CSS improvements but I wanted to start with the very basics and point out some of the bits that really help with accessibility.