You may also be interested in: Mobilize SharePoint Webinar by Sitefinity
Editor's note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield
In my first two articles (one and two) on HTML5 and SharePoint 2010, I provided an overview of HTML5, what it is, and why it is important for us SharePoint Branding folks to start learning it and using it. I've already provided a quick introduction on how to add the fundamental HTML5 elements to SharePoint but let us now review this proess in greater detail so that we build a solid foundation of HTML5 and how it will interact with SharePoint.
- Open your SharePoint 2010 development site in SharePoint Designer 2010 and create a copy of your v4.master found in the _catalogs/masterpage directory. For this example, I renamed my Master Page copy v4-html5.master.
- Open your custom Master Page in SPD in Advanced Editing Mode, select the code view, and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Replace the existing DOCTYPE tag with the following HTML5 doctype. Note: make sure you replace the entire tag, often split in two lines in SPD.
- Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
Update the “content” value to either “IE=9”, “IE=edge” or ever better “IE=edge,chrome=1”.
That is about it. You can now begin to add additional HTML5 elements such as <header>, <footer>, <nav>, etc. to this new HTML5 Master Page that is mostly backwards compatible with IE7 and IE8, as well as use CSS2 and CSS3 to providing styling. You can also begin to use the multimedia elements such as <canvas>, <audio> and <video>. Easy right?
Wait, What? What is Going On? Explain Please!
Before I go on I would like to discuss these first five steps in greater detail to give you an understanding of what each step is doing. Step one is standard procedure, we need to open SPD and create our own copy of a Master Page, in our case a copy of the v4.master, as you never, ever make edits directly to the OOTB v4.master Master Page. In Step two we look for the doctype so that we can modify this in step three. Step three is straight forward enough as well, we are changing the doctype from XHTML 1.0 Strict to HTML5, but what is nice is how lean the doctype is. With html 4.1, XHTML 1, etc we had to have a very long doctype but now it’s just fifteen characters.
Note: When you change the doctype in SPD, SPD will now recognize your Master Page as for IE6 and still with CSS 2.1. I mentioned this in my previous article if you would like to review why and what this means. There is no current work-around and unfortunately this is also the case with SharePoint Designer 2013 Preview at this time. Basically if you are going to use HTML5 in SPD, you will only use the code view, but since that is going away in SPD 2013 you might as well start getting use to it.
Now I am recommending IE=edge,chrome=1 as the value for the content tag. The reason why is that IE has been, and supposedly will continue to support the IE=edge value to mean always render the page in the latest mode possible. This means that IE8 will render in IE8 mode, IE9 will render in IE9 mode and when IE 10 is released it should render the page in its latest mode. Adding the chrome=1 value tells the browser to render in Google Chrome Frame if available. You can learn more about GCF from https://developers.google.com/chrome/chrome-frame/ and http://www.chromium.org/developers/how-tos/chrome-frame-getting-started. The value of GCF is beyond the scope of this article so we will come back to this later on. It’s easy to add now, so let’s just do it so.
Why don’t we stop here for now? Next time I will explain step five in greater detail. We will then look at a few optional modifications that you may chose to make as well as review a few pre-build HTML5 Master Pages for SharePoint 2010. Until then,