This is the 5th post in the series of HTML5 for ASP.NET Developers 

Support for HTML5 in Visual Studio 2010 has been quite good with Visual Studio Service Pack 1

However, HTML5 Boilerplate template has been one of the most popular HTML5 templates out in the internet.  Now, there is one for your favorite ASP.NET Webforms as well as ASP.NET MVC 3 Projects (even for ASP.NET MVC 2).  And its available in the most optimal place, i.e. NuGet.

Lets see it in action.  Let us fire up Visual Studio 2010 and create a “File – New Project – ASP.NET Web Application” and leave the default name to create the project.  The default project template creates Site.Master, Default.aspx and the Account (membership) files.

When you run the project without any changes, it shows up the default Master Page with the Home and About placeholder pages.

Also, just to check the rendering on devices, lets try running the same page in Windows Phone 7 Emulator.  You can download the SDK from here

Clearly, it looks bad on the emulator and if we were to publish the application as is, its going to be the same experience when users browse this app.

Close the browser and then switch to Visual Studio.   Right click on the project and select “Manage NuGet Packages”

The NuGet Package Manager dialog opens up.  Search for HTML5 Boilerplate.  The options for MVC & Web Forms show up.  Click on Install corresponding to the “Add HTML5 Boilerplate to Web Forms” options.

It installs the template in a few seconds.   Once installed, you will be able to see a lot of additional Script files and also the all important HTML5Boilerplate.Master file. 

This would be the replacement for the default Site.Master.  We need to change the Content Pages (Default.aspx & other pages) to point to this Master Page.  Example <%@ <% Master Language="C#" AutoEventWireup="true" CodeBehind="Html5Boilerplate.Master.cs" Inherits="WebApplication14.SiteMaster" %> would be the setting in the Default.aspx Page.

You can do a Find & Replace for Site.Master to HTML5Boilerplate.Master for the whole solution so that it is changed in all the locations.

With this, we have our Webforms application ready with HTML5 capabilities.  Needless to say, we need to wire up HTML5 mark up level code, canvas, etc., further to use the actual HTML5 features, but even without that, the page is now HTML5’ed.   One of the advantages of HTML5 (here HTML5 is collectively referred for CSS3, Javascript enhancements etc.,)  is the ability to render the pages better on mobile and hand held devices.

So, now when we run the page from Visual Studio, the following is what we get.  Notice the site.icon automatically added.  The page otherwise looks similar to what it was earlier.

Now, when we also check this page on the Windows Phone Emulator, here below is what, we get.

As you can see, we definitely get a better experience now.  Of course, this is not the only HTML5 feature that we can use.  We need to wire up additional code for using Canvas, SVG and other HTML5 features.  But, definitely, this is a good starting point.

You can also install the HTML5boilerplate Template for your ASP.NET MVC 3 and ASP.NET MVC 2 from the NuGet packages and get them ready for HTML5.

Cheers !!!