It seems to be increasing said these days, that software solutions are moving away from the desktop and to the cloud and mobile space. There’s more to be said about this which I’ll blog about soon, but let’s just agree that this leads to at one possible conclusion – we need to be able to develop sufficiently rich client-based solutions that run on both desktops and a wide variety of mobile devices that all connect to the cloud. If we add the requirement that we want to reach as many users and devices as possible on the client-side, with a single ‘base’ of code (and we aren’t too fussy about immersive UI, richness of experience, deep access to local resources and to varying extents, and very high development productivity/maintainability), then we are often lead to the door of HTML. With ‘HTML5’, we can even be fussy about a few things too.
Microsoft is making its platforms capable of running those HTML5 solutions. Currently this means IE9 on the Windows desktop and now also IE9 on Windows Phone 7.5 (now RTM’d and due on phones this fall). We’ll likely see more native platform support for HTML5 solutions in Windows 8 with IE10. Given the right use of HTML of course, a solution for Windows desktop and phone, should also work on a large range of HTML5-compatible desktop browsers and mobile devices.
Here’s the same hardware-accelerated HTML5 content running on IE9 and Windows Phone Mango.
Getting started with HTML5 development on Windows
So what do you need? On the desktop you can get IE9 and start ‘coding’ in something as simple as Notepad(!). Use the free included F12 developer tools to explore and even debug your solution. For something a little more productive, you can go for the free Visual Studio Web Developer 2010 Express SP1 largely for the HTML editor support and test web-server, plus you’ll want the community-based Web Standards Update for Microsoft Visual Studio SP1 for IntelliSense support. For testing on Windows Phone, go to http://create.msdn.com to get the latest Windows Phone Tools/SDK (currently Windows Phone SDK 7.1 Beta 2) to be able to run the emulator on your machine which includes the mobile browser. If you are not connecting to any web-based data services, or you are connecting to existing services, you may not need any other tools, but you’ll probably want the jQuery library to be more productive with your JavaScript. Want some great slides on jQuery (from a Microsoft guy)? Download Joe Marini’s Mix 2011 jQuery bootcamp slide deck.
Doing rich HTML5 stuff
The easiest way to learn about new HTML5 is to see some in action and check behind the scenes. To demonstrate the great HTML5 and hardware-accelerated capabilities of IE9 on the Windows desktop and Windows Phone, Microsoft created two ‘testdrive’ sites. They include some great and diverse examples as well as links to useful resources.
http://ie.microsoft.com/testdrive for IE9 on the desktop
http://ie.microsoft.com/testdrive/mobile (which works on the phone and the desktop)
Detecting desktop vs. mobile browsers
One of the key issues to tackle when creating an HTML5 application that will work on the desktop and on mobile, is getting the right layout experience for the screen size, ideally using the same markup. CSS3 Media Queries are a great solution here. The test site includes an example of this (see entry in screenshot above). In addition I’d suggest watching this video from Mix 2011 as well as this blog entry from the Windows Phone team (by the same Joe Marini that did the jQuery bootcamp at Mix).
Dealing with down-level browsers/capabilities
Of course a good solution should deal gracefully with down-level browsers and missing HTML5 capabilities, especially given that the specification is still in flux. On many existing websites, this is still handled on the server side by looking at the User Agent string provided by the browser application, and delivering browser-specific content. In the new client-side world, it’s often better to detect the browser capabilities in the client code and enact progressive enhancements to the user experience based on what specific features the browser has. If the browser cannot do some of the new HTML5 goodness, you may want to consider a ‘Polyfill’. To help detect browser capabilities, there’s a library called Modernizr, and a number of Polyfills available to handle missing capabilities that Modernizr can detect.
I hope this has given you an idea of how you can start to test drive HTML5 experiences and development on the Windows desktop, upcoming Windows Phone 7.5/Mango phones and beyond on to other ‘HTML5-ready’ browses and devices.
by clicking the links below on a phone or with Zune 4.7 installed.
Colinizer 