Supporters of End User
Web

HTML5 and SharePoint 2010 - Part 4: Adding the Code (Continued)

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Branding; HTML5; CSS; Site Manager/Power User; MOSS; WSS; 2010

You may also be interested in: O'Reilly - SharePoint 2010 at Work

 

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

Step 5

In Step 5 we link to the powerful HTML5 IE enabling script, html5shim, which adds “some” HTML5 compatibility to older versions of IE, in particular IE8 and older. You can learn more about html5shim from Google at http://code.google.com/p/html5shim/. Normally I prefer to download my own copy of JavaScript files so that I may compress them on my own, combine them with other scripts and other such reasons, but it is quicker to link to the publically available version as well as the addition of caching improvements.

The benefits of html5shim include enabling the rendering of HTML5 elements such as <header>, <footer>, <article>, <section>, <nav> in IE8-. Without html5shim, IE8- will render the content in new HTML5 elements in a similar manner as it would to content in a div, but the unrecognized HTML5 elements cannot contain children, nor will CSS be applied. Big problem! Since this is not good, html5shim automagicially allows older versions of IE to at least render the page and apply the proper styling to the new HTML5 elements. Html5shim will also recognize any custom HTML5 elements you may use such as <customnav>, <myaside>, or most any element name you decide to create. Nifty.

Note: Html5shim does not add new multimedia capabilities such as the <canvas>, <audio> or <video> support to IE8-. Currently there is no simple workaround for this.

Additional Steps (Optional)

Now that we understand the first five steps, let’s move on. There are a few more general updates that could be made to the new HTML5 Master Page including removing the trailing forward slash (/) before closing an element when the element does not need a closing tag. As an example, consider our meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

In XHTML 1.0 Strict the trailing / before the end of the meta element was required, at least to be standards compliant. Sure, almost all browsers did not actually “require” it, but it was supposed to be there. Well in HTML5, that trailing / is not required, thus this element could be modified to:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

My opinion though, I suggest leaving the trailing forward slashes in but that is because as a coder, one of my passions lies in beautiful code and the trailing forward slash properly closes an otherwise open element.

HTML5 also allows for the shortening of a few additional elements. <script> and <link> elements no longer require a “type” value and the character encoding as specified in a meta tag has been greatly compacted. A resource on these additional modifications can be found at Heather Solomon’s blog post Convert SharePoint 2010 master page to HTML5.

2013-06-22-SharePoint2010HTML5-Part04-01.png

HTML5 templates

As I mentioned in my previous article there are a few HTML5 ready Master Pages for SharePoint 2010 that have already been created that can provide you a boilderplate Master Page to speed your learning curve and deployment. Three that I recommend you consider include:

Kyle Schaeffer’s Responsive HTML5 Master Page
http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/

Dan Kline’s SharePoint 2010 HTML5 Master Page at Codeplex:
http://sharepoint2010html5.codeplex.com/

Heather Solomon recently updated her “Just The Essentials” Master Pages for SharePoint 2010 to include HTML5 ready Master Pages
http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/

My suggestion is that you download all three of these and install them on your development environment (Possibly on one of your CloudShare servers? Do you not yet know about CloudShare? It’s one the nicest developments tools I know of for SharePoint. Create a new SharePoint environment, including a SharePoint 2013 Preview environment in minutes. Then if you accidently break it you can start over in a few minutes more with a fresh rebuild. No, I am not a sales rep, I simply think it’s a great tool.) Review each Master Page and the included css and pick and chose from these different implementations. Each Master Page is slightly different and may or may not fit your own style. Using a pre-built Master Page is one of the quickest ways to get started with HTML5 and SharePoint. Leverage the experience of these experts!

What’s Next?

2013-06-22-SharePoint2010HTML5-Part04-02.png

I know that you are anxious to jump even deeper into HTML5 and CSS3 but there is still more foundation we want to build. There are more issues with IE7 and IE8 that we want to discuss as well as another great tool for HTML5, CSS3 and browser feature detection, that being Modernizr. We will touch on this next time before moving onto cool HTML5 feature and tricks. Until then, happy coding.

Comments

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: