v5, the Responsive HTML5 Master Page for SharePoint 2010

“v5.master” is a simple HTML5 master page designed for SharePoint 2010. It makes good use of the amazing new features of both HTML5 and CSS3, including CSS3 media queries. The master page is extremely simplistic in nature, and is truly meant to serve as a framework for building your own SharePoint 2010 customizations.

SharePoint Gets Responsive

SharePoint has a knack for being rigid and difficult to customize. I’ve been working with responsive layouts for a while now, but the nature of SharePoint has thus far prevented me from making something that is as flexible as, say, this WordPress blog you’re reading right now. It’s easy-peasy to do this in WordPress, but SharePoint simply does too much. When you create a layout in SharePoint, you’re creating a layout that encompasses much more than just pages: you’ll have to contend with pages, web parts, lists, libraries, blogs, wikis, search, meeting workspaces, team sites, calendars, and the list goes on. With so much content to contend with, creating something that can contract to any width is a tall order to say the least.

To me, at least, the answer was simple: ignorance. I’m ignoring every part of SharePoint that I don’t care about. 90% of the sites that I create in SharePoint are publishing sites: public-facing with a focus on pages, navigation, and web parts. Now, that’s a list I can handle. The v5 master page uses a fluid layout that drops to a single column when the display size shrinks below 800 pixels in width. Check out the screens to see the flexibility in action:

Large/Desktop Displays:

Medium/Tablet Displays:
 

Small/Mobile Displays:
 

Features

  • New HTML5 document type declaration
  • Revised <head> content to adhere to new HTML5 standards and best practices
  • New HTML5 semantic layout (<header>, <footer>, <section>, etc.)
  • Uses html5shim for backwards-compatibility
  • Responsive CSS3 media queries

Download v5.master

The v5 master page is provided completely free, released under the Creative Commons Attribution license 3.0.

Update Oct 26, 2011: Dércia Silva has been kind enough to create a deployable solution package, as well as a Visual Studio template, if you’d rather automate the deployment of this master page and related files. See Dércia’s post here.

Installation

  1. Copy the v5.master file into the /_catalogs/masterpage/ folder of your SharePoint 2010 site collection.
  2. Copy the entire v5 folder into the /Style Library/ document library, located at the root of your site collection.
  3. Check in, publish, and approve all copied files.
  4. Change your site and system master page to use the new file you created.
  5. Optionally change the site logo setting to use the new logo image located at /Style Library/v5/i/v5.png.

Requirements & Assumptions

  • This master page was designed for SharePoint 2010, Enterprise and Standard versions.
  • This master page was designed and tested for SharePoint publishing and wiki sites. No other site templates have been tested.
  • Keep in mind that some SharePoint content simply doesn’t work well at smaller screen resolutions (lists with many columns, calendars, etc.). The focus is on external-facing sites with a lot of text- and image-based content.
  • The SharePoint front-end server must have internet connectivity to access Google’s hosted version of html5shim. If you do not have internet connectivity in your environment, download and use a local copy of this file.

Known Issues (Updated Jan 19, 2012)

A few people have encountered some issues with the v5 master page. Although I think the master page still works great (especially as a publishing master page), you may want to consider making these changes, depending on your SharePoint environment and how you choose to utilize the interface.

  1. Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page. If use a lot of system pages in your SharePoint site, you may also try adding the following line of code to the <head> section of your master page:
    <meta http-equiv="x-ua-compatible" content="IE=8"/>

    This forces newer versions of Internet Explorer to display in compatibility mode. Note that you’ll also lose CSS3 and HTML5 functionality when you add this to the master page (everything works, but the site will look a little more bland in IE).

  2. Ribbon not appearing at the top of the browser window — I’ve had some mixed reports of this happening in Internet Explorer, but I think it’s actually an indication that the paths to the attached CSS and JavaScript files are incorrect. If you are deploying v5 master to any site other than the ROOT site collection, make sure you update all references to these files where appropriate.
  3. Scrollbars appearing in SharePoint dialogs (Chrome, Firefox, Safari) — this is actually a side-effect of my ribbon/scrolling fix for SharePoint. SharePoint dialogs are still entirely functional, but the positioning and sizing of them just gets a little weird in any non-IE browser. Again, the idea is that the master page is optimized for publishing sites, which don’t make much use of these dialogs (if at all). If you have a lot of trouble with this, consider using a different system master page.

158 comments

  1. François says:

    Thanks a lot for this master piece. Really handy to jump into html 5 integration with proper fallback handling.
    Read you soon.

  2. Ben says:

    I’ve applied your master page (awesome by the way). But it seems main navigation submenus are not working on Firefox 6 or Safari on a mac. Any ideas? Just something I’m doing?

    • Kyle says:

      Ben, you can change the “MaximumDynamicDisplayLevels” to 1 if you want to use drop-down menus. I think that’s what you mean.

      • Ben says:

        thanks, this morning it’s working…one of those embarassing “oh…now it’s working for some reason”. must have been something else not letting the drop-downs load. it’s all good now. thanks again.

  3. [...] I haven’t gotten around to customizing my own, because instead I ran across Kyle Schaeffer’s HTML5-ready Master Page for Sharepoint 2010. So far it seems to work pretty well, but had a bit of trouble up front on a mac. Seems to be [...]

  4. Brad says:

    This looks really awesome. I love how simple it is.

    How would you handle the tabs and such? Would this only be applied to custom pages so your site admin pages would still function correctly?

    • Kyle says:

      Hi, Brad. This should work as both a site and system master page (for admin pages).

      • Brad says:

        I might try to use this as the master page for my User Group. Do you have any screenshots you can throw up of those examples I asked about?

  5. [...] great work: v5.master. I am recommending to try it. Like this:LikeBe the first to like this post. Published: [...]

  6. Anatoly says:

    Great work! Looks awesome. Works everywhere except IE. IE9 has some problems with html5 and IE-mode 9. When you have a list (e.g. tasks) and listview on the page then you want to add an item, you won’t be able to “save” it, only cancel. And this only happens in IE9.

    I have used IE-9 mode in one of projects, used CSS3 but then I changed back to IE mode 8 due to these small bugs.

    • Kyle says:

      Anatoly, I see the issue. It seems this is only happening on some lists for me — maybe it has to do with approval workflow, or rich text fields? Either way, definitely something Microsoft should remedy! Perhaps a workaround, for those who really need to use this functionality, is to create a separate “system” version of the master page that includes the IE8 compatibility meta tag in the header.

      • This is a problem I have been looking into for a while, as it actually makes HTML5 completely impractical on enterprise intranets – kind of a bore… I still haven’t come up with a definitive resolution, but I have figured out that it seems to be at least partially related to the old rich text field (not the new ribbon based one) attempting to communicate back to the main frame (the form is loaded in an iFrame). One potential remedy is to change all content types using the old rich text field to use the new one, but I’ve been hoping to find something simpler… The most interesting thing I’ve discovered so far is that ?isDlg=1 returns a page with x-ua-compatible ie=8, which I think is related to minimal.master.

      • Also forgot to mention – Attempting to add a new event from a calendar webpart is an excellent test case for this bug.

    • [b]Update: Corrected Link[/b]
      OK, here is a responsive solution which works in IE8 compatibility mode that can be applied to Kyle’s solution.
      https://gist.github.com/1640421

  7. peppedotnet says:

    Great work!!
    Make a wsp and publish the project on codeplex ;)

  8. [...] auch möglich, die komplette Masterpage mittels HTML5 darzustellen. Ein vorzeige Beispiel könnte so aussehen. Jedoch ähnelt sie noch sehr der V4 Version, aber das wird sich im Laufe kurzer Zeit [...]

  9. joost says:

    this is great! Allthough you end up with css classes (in corev4.css for example) you don’t use anymore. Question is, would you recommend using the csslink. With a minimal master you focus a lot on (minimal) output but this way you don’t focus on css. tnx, Joost

    • Kyle says:

      Joost, I usually use a customized version of corev4.css, but I use a SharePoint feature to swap in the customized file (this also allows me to customize files like controls.css).

  10. This is insanely great!

  11. Nice work! Looking forward to working more in HTML5 – this is a great tutorial. Do you have any plans to release a SharePoint Foundation version of this v5.master ?

  12. Dercia Silva says:

    Hi,
    Great work! And thanks for sharing.
    I’ve tested the v5 masterpage and created a solution to automate the deployment of all the files. It’s available on my site, if anyone wants to try it out: http://www.broculos.net/en/article/sharepoint-2010-branding-responsive-html5-masterpage-sharepoint-2010

    Thanks again!

    • Kyle says:

      Thanks, Dércia. This is great! I’ve updated my blog post to include a link to your blog post.

    • Mariela says:

      This worked great. The only other thing you need to do that wasn’t mnoeientd above is go to services in CA and make sure the user profile service is started.

  13. Sjoerd says:

    if you add <meta http-equiv="X-UA-Compatible" content="IE=9"/> in the head of the master page, solutions like the HTML5 Video Player Webpart http://html5videowebpart.codeplex.com/ will also work on IE9.
    Fantastic work Kyle!

  14. russ says:

    Hi,

    I am using the V5 Master for our new share point site does anyone know how to hide the left hand menu on just one page for this master page have tried

    /*–Hide Quick Launch –*/
    #s4-leftpanel{
    display:none
    }
    .s4-ca{
    margin-left:0px
    }

    does not seem to work

    • Kyle says:

      Russ, use a DOM inspector (like Developer Tools in IE or Firebug in Firefox) to figure out which div you should select in your CSS.

    • freaque says:

      Orig css
      #v5-page-column-sidebar {
      width: 200px;
      padding: 0 0 0 40px;
      margin: 0 0 40px 0;
      float: left;
      }

      change css to:
      #v5-page-column-sidebar {
      display:none
      }

  15. Brad says:

    Kyle,

    The ribbon is not set against the very top of the page. It looks like it’s ‘top’ or ‘margin’ is set to 40-50px or so. Any ideas?

    Thanks!

    • Kyle says:

      Hi, Brad. What browser/version are you using? I’ve tested the master on everything I have, and haven’t seen this issue.

      • Karsten says:

        Hi Kyle,

        first of all – thank you very much for your work. I am still amazed.

        Unfortunately I have the same problem like Brad. The ribbon is not set against the very top of the page and the black area with the ‘Websiteactions’ and the ‘Login name’ lay over the site logo and the search box.

        I would like to use the master page in my “Office 365 – SharePoint Online” and I use the IE 9 (9.0.8112)

        Do you have any ideas why the ribbon area is not set against the very top of the page?

        Thanks again,
        Karsten

      • HN says:

        Hello Kyle,

        Thank you very much for your hard work. I do experience issue with ribbon not staying on the top of the page as well. Please advise. Thanks.

      • Paul says:

        All you have to do is add “top: 0px” to the div s4-ribbonrow:

        [code][/code]

  16. Alejo Romano says:

    Hey Kyle, just tested it on IE8, degrades gracefully, except for some of the overlays that load the master page inside like for example “new page”, which come up with both, horizontal and vertical scrollbars, and the content is out of place, cut in half

    I’ve fixed it by commenting out the min-width statement on the rule #v5-wrapper in line #77 of v5.css, and adding a margin:0 statement on the rule html.ms-dialog #v5-wrapper in line #357, also of v5.css

    Great work, thanks

  17. GREAT says:

    This is such a great learning resource, thank you so much.

  18. Russ says:

    Hi i have applied the fix commenting out the min-width statement on the rule #v5-wrapper in line #77 of v5.css, and adding a margin:0 statement on the rule html.ms-dialog #v5-wrapper in line #357, also of v5.css

    But still getting the problem in IE9 with the ribbon not staying at the top of the page.

    • russ says:

      Just to update it works fine for me when i am logged in as a top level admin however if you login the same machine with less permissions the top bar no longer stays at the top of the screen and appears across the header.

  19. Bill says:

    When I publish the site, it works fine when logged in. But for anonymous users, I get the meaningless SharePoint error screen. Everything on the site is set for anonymous access. I have even tried Dércia’s Visual Studio method (was looking for something like that). Any ideas?

  20. russ says:

    Hi, when i got to site actions – new page in the background the mobile block appears i am using a normal desktop pc and would like to fix this has anyone had this problem or any ideas what is causing it?

    Many Thanks

    Russ

  21. Kyle says:

    For those of you having issues with the ribbon not staying at the top of the page, I did some additional testing today, and I have to say that I’m somewhat stumped. I’ve tested the master page in Firefox 3, Firefox 7, Firefox 8, Chrome 13, Chrome 14, Chrome 15, Safari 5.1, IE9, IE8, IE7, and even IE6 (which doesn’t look good, but the ribbon still stays at the top of the page in IE6). I have looked at the site in all of the supported site templates and page layouts, and I’m simply not seeing this issue at all.

    If you’re still seeing this issue, please let me know the (1) operating system and browser version you are using, (2) the SharePoint version you are using and any installed customizations (products, web parts, etc.), and (3) if you have made any customizations to the master page that I have posted here.

    • Chris says:

      Hi Kyle –
      Thanks for all the work! I love this template. I have added another stylesheet and a couple js includes to the master page. I now occasionally get the ribbon issue in chrome where it doesn’t go all the way to the top.
      It appears as though there is some code that gets applied during the page load and moves the ribbon to the top of the page. I see this behavior with my unaltered master page as well. What is it that kicks off that movement? That would really help me with my troubleshooting.

      Thanks!
      Chris

    • Aaron says:

      Hi Kyle, having this issue and here’s my info:
      (1)Windows 7, IE9 (not seeing in other OS or browsers though haven’t checked earlier IE’s)
      (2) SharePoint Foundation 2010 (Bamboo Weather & Fire&Arrow Weather but the latter since uninstalled – have tried this on pages with and without the Bamboo Web Part & problem occurs)
      (3) only small CSS changes to color, addition of breadcrumb trail.
      Thank you. Hope this is helpful.

  22. ijo says:

    Hi, really nice job!

    For more information about SharePoint 2010 masterpage branding, I would suggest looking at special msdn post about branding masterpage (it’s a complete post). Maybe someone find it useful.

    http://msdn.microsoft.com/en-us/library/gg430141.aspx

    And one more moment talking about IE6 – SharePoint 2010 by default is not supported with this version, and if your site looks good for IE6, there is no guarantee, that all the functionality will work too, so consider about this.

  23. Excellent work Kyle and kudos to Dércia as well for packaging this up nicely. I was just about to work on something similar, so it’s nice to see I didn’t have to reinvent the wheel. There are two things I noticed that I thought I should share.

    1.) The CSS and JavaScript references will break if you are not at the root site level. For example, http://portal/sites/xyz. The following updates will ensure they work at any level:

    Before:

    After:

    Before:

    After:
    <SharePoint:CssRegistration name="” After=”corev4.css” runat=”server”/>

    2.) I too am seeing the issue with issue with the ribbon not staying at the top. However, for some bizarre reason, I only this when the site collection is not at the root level. My workaround was to make the following updates in the v5.css file.

    body #s4-ribbonrow {
    /*position: fixed; - REMOVE ME - This ensures the ribbon is at the top*/
    z-index: 1000;
    min-height: 0 !important;
    height: auto !important;
    }

    body #s4-workspace {
    overflow: visible !important;
    padding-bottom:50px; /*ADD BOTTOM PADDING - The padding is removed with the above change.*/
    }

    • Raphaël says:

      Just added “top: 0px;” without commenting “position:fixed;” and the ribbon stays at the top of the page :
      body #s4-ribbonrow {
      position: fixed;
      top: 0px;
      z-index: 1000;
      min-height: 0 !important;
      height: auto !important;
      }

    • Joni says:

      I have user’s who use Firefox (now at version 15 – wait a minute, it’ll be version 16) and the menu bar still does not go to the top of the page. I have tried the fixes presented – anything new? None of them are working for me. Thank you.

  24. [...] been updated, but still contains some good info. Kyle Schaeffer has a new “responsive” HTML5 master page for 2010 that seems to have a lot of popularity so might be a good place to start from (or combine it with [...]

  25. pub says:

    Nice work!

    Sometimes the large display will stuck in the tablet display. A refresh of the page will solve this problem.
    And if i wanna have a background image it didn’t work, but i wil try to figure that out.

    Greetings

  26. Dan Haywood says:

    Great blog post on HTML 5 and thanks for sharing – http://www.danhaywoodblog.com

  27. Martijn says:

    Great work Kyle! The design looks awesome and i had the same problem as some users that the ribbon didnt stay on top

    body #s4-ribbonrow {
    /*position: fixed; – REMOVE ME – This ensures the ribbon is at the top*/
    z-index: 1000;
    min-height: 0 !important;
    height: auto !important;
    }

    body #s4-workspace {
    overflow: visible !important;
    padding-bottom:50px; /*ADD BOTTOM PADDING – The padding is removed with the above change.*/
    }

    This did the job. Thanks John Livingston. Only there are a few problems left, the dropdown menu (submenus) isn’t showing, when i change MaximumDynamicDisplayLevels” to 1 he is showing the subsites but also the library’s at the topsite under the dropdownmenu.

    When i want to invite a user to the site, im getting a error Correlatie-id: e2337e32-f974-4b74-bdcc-540fbb0dc86e. Its working when i dont using the v5 as ‘masterpage from the system’ but then i dont have a fancy layout ;).

    And the last issue at this moment is that the mainsite isn’t shown at the menu. If i click on ‘The “v5” Master Page’ I get directed to the mainsite.

    when i’m in ‘siteactions’ everything except user invitation works fine; the dropdown menu (submenus) is shown correctly, and he is showing the first mainsite as a button.

    If I find the solution i will let you know,

    btw: im working with SharePoint Online (O365) and IE9 :).

  28. Martijn says:

    2 Issues solved.
    1. showing library’s in the dropdown menu (submenu’s) is solved, now i only see the subsites in the dropdown box, :).
    2. The ribbon is on top and the mainsite is shown as a button (link) at the menu.

    few issues to go;
    1. cant add tasks and calendar items, save button isn’t working. Someone allready a solution for this?
    2. getting a error ‘Correlatie-id: 70bd9c74-5812-47a1-8dd0-ac72b02b1e57′ when inviting a member to the site.

    On both issues the layout is crashing on the background.

  29. Martijn says:

    ‘Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page. If use a lot of system pages in your SharePoint site, you may also try adding the following line of code to the section of your master page:

    This forces newer versions of Internet Explorer to display in compatibility mode. Note that you’ll also lose CSS3 and HTML5 functionality when you add this to the master page (everything works, but the site will look a little more bland in IE).’

    Not using the v5 Master page as ‘system’ masterpage, will destroy the design of the template ;). strange thing is that some webparts witht he save/upload button is working.

  30. Martijn says:

    ‘Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page.

    Adding in the head is working, but the design is totally different then the pic’s

    Not using the v5 Master page as ‘system’ masterpage, will destroy the design of the template ;). strange thing is that some webparts witht he save/upload button is working.

    Will be updated

  31. Jeremiah says:

    Has anyone had any trouble with adding webparts using IE7 or IE8? I am getting a js error.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; .NET4.0E)
    Timestamp: Thu, 26 Jan 2012 18:40:19 UTC

    Message: Invalid argument.
    Line: 2
    Char: 1735
    Code: 0
    URI: …/_layouts/wpadder.js?rev=hnGJJEMcU5XH%2BCq7PlSxJw%3D%3D

    • Patrick says:

      Jeremiah, did you ever resolve the wpadder.js issue? I am struggling with it and was wondering if there was a solution out there.

      • gary payne says:

        I have also been facing the “WPAdder” issue in adding web parts to web part zones, and have tracked down the code causing the behaviour. If you look in WPAdder.debug.js at line 81, the code is adding the web part zones as options in the “Add web part to” select element.

        It seems that IE8 in IE7 Standards or IE8 Standards document mode is not happy with adding options that are created using the
        [code]document.createElement("OPTION")[/code]
        method. If this is replaced by
        [code]var newOption=new Option(curZone.displayTitle, i);[/code]
        then the page works fine, and web parts can be added to zones.

        Editing this SharePoint core JS file is not a good idea for production farms, though. Neither IE9 nor Firefox exhibit this same issue – so the pragmatic solution is to use IE9 (or Firefox) to edit the pages!

  32. Piotr says:

    Great Master Page it works like charm ;D
    I found one small semantic bug:
    [code][/code] cannot contain any other elements than [code] ... [/code] accoding to: http://dev.w3.org/html5/markup/hgroup.html

    Greetings and keep posting ;D

  33. [...] soon; so this is not a lot of work. Use a masterpage which is HTML5 compatible, like this one here: http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/. It’ll render the masterpage differently based on the screen resolution [...]

  34. [...] soon; so this is not a lot of work. Use a masterpage which is HTML5 compatible, like this one here: http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/. It’ll render the masterpage differently based on the screen resolution [...]

  35. Olivier says:

    Great job. I have removed the left nav, following your instructions. There must be a simple way, but grateful if someone can explain. I want to get rid of this leftnav on all pages, no matter what page layout I will be using. I suppose that all pages would need to use the same (modified) css. For some reason, I don’t know how to achieve that: no left nav on all the site. Anyone? Thx !!

    • Steven says:

      Hey Oliver,

      If you are still wondering how to do it, it involves a pretty quick and easy process.

      Firstly, open up the site in Sharepoint designer, and uncheck the tickbox for “Display Quick Launch”

      Secondly, fire up v5.css, and change v5-page-column-sidebar to look like the following:

      #v5-page-column-sidebar {
      display: none;
      }

      Thirdly, you will notice that the sidebar still remains..
      That is because of the margin tag still used by the body!

      Around line 96, there is a piece of code as follows:

      margin: 0 0 40px 280px;

      Change it to….

      margin 0 0 40px 280px; (or whatever you want).

      Then the sidebar should disappear for all pages!

  36. Hi, I get this weird problem on IE:

    Whenever open a dialog for some reason, the layout goes mobile. Weird but hapening everytime.

    Other bug is dialogs in firefox, very small in width , requiring big scroll to see full content.

    Any tips?

    • Sal Salvador says:

      I too am having the same issue with this where I click something (e.g. check permissions, etc)” that makes a modal popup…as soon as I move my mouse into the popup box or off the page the grayed out background page turns to a mobile looking site. When I cancel the modal, then refresh the page. It is fine until the next modal is called. Very odd. Any one resolve this?

      • Rob says:

        Yes, having the same issues exactly. I’ve just discovered it so if you have a fix please let me know. Occurs in IE9. IE8 is fine. Firefox v14 has the problem with width on dialogues. Chrome v21 seems ok.

    • Madhu says:

      Hi,

      Please create one more css file for media queries and use the below script in the master page(change the file path and if condition if required). I got it in SharePoint 2013. hope this will work in 2010 as well…. :)

      $(document).ready(function(){
      if($(“html”).attr(‘class’) != “ms-dialog ms-dialog-nr”)
      {
      $(“head”).append(“”);
      var css = $(“head”).children(“:last”);
      css.attr({
      rel: “stylesheet”,
      type: “text/css”,
      href: “path/Media.css”
      });
      }
      })

  37. Peter says:

    Hi Karl

    Great master page.

    It’s working perfectly apart from on my Search Centre. Do you know how to convert it?

    I’ve been working along the lines of Randy Drisgill’s post on this subject, but to no avail:

    http://blog.drisgill.com/2010/09/converting-custom-sharepoint-2010.html

    Any suggestions?

  38. [...] it be nice to use html5 and css3 in SharePoint? No problems, there is actually v5 master out there, created by Kyle Schaefer. Or just use h5ml5 and css3 right away in your webparts and pages. But there is a big problem. It [...]

  39. Nico de Jong says:

    Kyle,

    I am rolling a few masterpages into one. Most make use of the SPNavigationProvider you chose to use the CombinedNavSiteMapProvider (derived from the PortalSiteMapProvider class).

    Is this specifically to be able create two tier top navs? Or are there also other reasons?

    I see here (link below) that special characters can mess things up and that adding EncodeTitle=”false” in the SharePoint:AspMenu can be desirable.

    http://books.google.nl/books?id=ISd9oggjfcUC&pg=SA16-PA246&lpg=SA16-PA246&dq=CombinedNavSiteMapProvider&source=bl&ots=Bsej3sYZQA&sig=DZ1KTiY6oVIaiSxUTSy-3sLvx_s&hl=nl&sa=X&ei=k0xKT8uIHYrtOevL4PsO&ved=0CE8Q6AEwBA#v=onepage&q=CombinedNavSiteMapProvider&f=false

    • Kyle says:

      Hi, Nico. The main difference between the navigation providers is the inclusion of a “Home” link in the navigation links. I use a different provider to remove this “Home” link (I find it redundant, especially when you have a logo that already links to the home page).

      You can fix the encoding issue in your web.config file — there is a property for each navigation provider that has something to do with “Encoding,” and you can change the true/false value to properly encode things like ampersands that appear in the navigation menus.

  40. [...] lately to create a Master Page for a SharePoint blog. It’s based on Kyle Schaeffer’s V5 Master Page, and I’m giving it away free in return for feedback and critique. I’d love to develop [...]

  41. [...] can download it via his blog: v5, the Responsive HTML5 Master Page for SharePoint 2010. Share this:TwitterFacebookLike this:LikeBe the first to like this post. This entry was posted in [...]

  42. [...] If you would like to read the blog post for yourselves you can find it right here: http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/ [...]

  43. Thanks for this! I’ll use this to proof-of-concept that SP and html5 are plausible. This saved a lot of work and answered a bunch of questions already :)

  44. I have also packaged your very sleek master page into a SharePoint WSP package and Visual Studio solution (along with some other master pages). The only difference with Dercia Silvia’s package is that I’ve also made sure the master page is compatible with SharePoint Foundation and uses the site’s title (instead of the fixed “The v5 Master Page” title).

    I have also moved the Sign In link from the ribbon to the right of the search box, so that the master page works better for public facing sites.

  45. I forgot to include the link to my WSP package: http://www.riolinx.com/en/blog/Lists/Posts/Post.aspx?ID=25

    PS: I meant to type “slick” instead of “sleek” in my comment above…

  46. [...] Schaeffer has a new “responsive” HTML5 master page for 2010 that seems to have a lot of popularity so might be a good place to start from (or combine it with [...]

  47. Matthew says:

    Nice work, for IE I added the tag:
    [code][code]

    I am working on a couple page layouts for the search center. When I wrap them up I'll post a link here.

    Matthew

  48. Hi there. Another I found. In calendar, when hovering a day, it is supposed to appear a add event. With this template it does so if I dont scroll dow the page, if I do, it puts the “add event” up a week or more. It’s like it fixes a margin from the top, when page loads, and does not rercalculate the position when I scroll.

    I avoid this by commenting the following css

    [code]
    /*
    body #s4-workspace{overflow-y:visible !important;overflow-x:visible ;!important;padding-top:44px;}

    body #s4-workspace{height: 100%!important;padding-top:44px;}
    */

    [/code]
    But then other issues arise.

    I made a video screen to show you the behaviour.

    I have changed the css, but no solution works other than commenting,

    Video: http://www.screenr.com/dJx8

    • Patrick High says:

      Célia,

      Were you able to resolve this issue? I am running into the same issue with the Add calendar item hover.

      • james says:

        Hi I too am having the same issue when selecting “Add” on the calendar if i scroll down. Were you able to solve this issue?

      • Jay says:

        The event that displays the “+ Add” relies on the s4-mainarea div tag to be available (There is some javascript inside sp.ui.applicationpages.calendar.js that does the trick). The position of “+ Add” (and all event logic) is calculated based on the position of s4-mainarea.

        This is how I fixed the “calendar scrolling bug”:

        I changed what is called here “v5-page” back to “s4-mainarea”.

        I then added the following to my custom css:
        #s4-mainarea {
        float: inherit !important;
        }

        Let me know, if it helps/works for you.

  49. [...] too, they are not responsive though.) In doing my research I found Kyle Schaeffer’s site and his V5 Responsive Master. I like the clean look, and as a starting page, it provides a good start. As a “search guy” the [...]

  50. [...] tag. Luckily, SharePoint design guru Kyle Schaeffer has done the hard work for us and has published v5, the Responsive HTML5 Master Page for SharePoint 2010. For this article (and probably many following articles), I’m going to use Kyle’s v5 [...]

  51. [...] Modal Dialog Size in SharePoint 2010 I’ve been using Kyle Schaeffer’s V5 Master Page as a pretty good starter template for a lot of my stuff recently. But I kept running across an [...]

  52. [...] too, they are not responsive though.) In doing my research I found Kyle Schaeffer’s site and his V5 Responsive Master. I like the clean look, and as a starting page, it provides a good start. As a “search guy” the [...]

  53. Matthew says:

    I finished the Enterprise Search Center work. You can have a look here: http://bit.ly/V5Search. Hope this helps!

  54. [...] Kyle’s blog before, you definitely should, especially his work on responsive design and the v5 master page. The sold out workshop took the attendees through the gamut of thinking about SharePoint design, [...]

  55. [...] Schaeffer’s HTML5 Master Page (my addendum to that [...]

  56. Arnold says:

    Tnx, this really is a neat template, espesialy for mobile use.

  57. Clyde says:

    Thank you very much, please keep the good work up. I am still learning about SharePoint customization and suck blogs are a great help.

  58. Duncan says:

    Graet job, Kyle.

    Just one quirk though. When I’m at site home, my drop downs don’t work but they work when I tried to change the setting under Navigation.

    Has anyone faced the same issue? Where should I look to fix the problem?

    Thanks!

    • Steven says:

      Double check that on your HTML5 master page, the setting “MaximumDynamicDisplayLevels” is set to 1 (Mine was set to 0 by default)

  59. [...] Download Here [...]

  60. [...] Download Here // // [...]

  61. [...] a lot of buzz around the use of HTML5 in SharePoint. Solutions like Kyle Schaeffer’s “v5.master“, or Bind templates are being deployed, and this has me a little [...]

  62. [...] a lot of buzz around the use of HTML5 in SharePoint. Solutions like Kyle Schaeffer’s “v5.master“, or Bind templates are being deployed, and this has me a little [...]

  63. Marcus says:

    Hi Guys

    I’m a SharePoint Developer/UI Designer and i can say that SharePoint 2010 does NOT work with IE9 standards mode, basic functionality is broken the moment you render it in IE9 standards mode which means no HTML5, no CSS3 and no new Javascript engine :(

    The only way that SharePoint 2010 with HTML5 could work if it was just for a front facing brochure website that had no user interaction other than reading content. The bugs are too numerous to count when you start to place basic user interaction elements into SharePoint 2010 that renders in IE9 standards mode, ie: Cannot submit any forms in an IFRAME, people picker error’s out, so trying to make something like a team site is impossibile in HTML5.

    One possible solution for CSS3 is to use CSSPIE to work in older rendering modes of Internet Explorer or use other shivs to fill the gaps.

  64. Hi Kyle, I wanted to say a massive thank you for this as it was the start to my site: http://sharepointdesigner.sharepointspace.com/Respond/SitePages/SPRHome.aspx -> I have included you in full credit, I hope you like it!

  65. Kyle,

    I just wanted to say, “thank you” for this template. It has been a valuable resource.

  66. [...] was SharePoint, specifically, something being called from my masterpage. So I decided to try Kyle Shaeffer’s v5 Responsive masterpage. I added it to the site as is to verify that it worked before I made any changes. Happiness-it [...]

  67. Ollie says:

    Hi. This is really good.
    We’ve come across 1 issue. On our SP, with V5 master, everything is fine except the Language Toggle. It just doesn’t work.

    Is this a known issue? I can expand on the details if needed.

    Thanks

  68. [...] Responsive HTML5 Master Page– Kyle Schaeffer [...]

  69. [...] Download basic v5 master page to build on top [...]

  70. [...] Schaeffer wrote up this great post on implementing a responsive design in SharePoint 2010 along with a working masterpage that can [...]

  71. Corvin says:

    Hi Kyle,
    thank you for your great v5 template! I like it very much.
    I am experiencing some trouble with the ribbon, though.

    IE8: as a visitor the ribbon is not available (which is good) but the space for the ribbon is still used. The page behaves correctly in FF or Chrome – everything is moved up by approx. 44px and the white space is not in use (as it should be)
    iPad: dropdowns work only within the ribbon. They are cut below the ribbon. That makes most of the options inaccesible
    General: hovering ribbon elements shows the tooltip, but the tooltip is shown above the button then, which makes it impossible to click it.

    Did you experience these problems before?

    Thanks and best regards,
    Corvin

    • karen says:

      I just want to note that I did not remove the masterpage comments which interfered with some of the js on IE 7 and 8.

      On IE 7 and 8, The padding-top:44px shows for the #s4-workspace shows up whether the ribbon is there or not, which created a 44px gap at the top when the website is published without the ribbon in ie 7,8.

      This is because IE8 and under treats html comments as children nodes, so according to the js below, it returns true, which created unwanted padding.

      if(elmRibbon.children.length > 0 && document.getElementsByTagName(“html”)[0].className.indexOf(‘ms-dialog-nr’) == -1){
      elmWorkspace.style.paddingTop = ribbonHeight + ‘px’;

  72. joseph says:

    is there any way to implement a flyout menu for the quick launch bar? awesome master page btw.

  73. karen says:

    I just want to note that I did not remove the masterpage comments which interfered with some of the js on IE 7 and 8.

    On IE 7 and 8, The padding-top:44px shows for the #s4-workspace shows up whether the ribbon is there or not, which created a 44px gap at the top when the website is published without the ribbon in ie 7,8.

    This is because IE8 and under treats html comments as children nodes, so according to the js below, it returns true, which created unwanted padding.

    if(elmRibbon.children.length > 0 && document.getElementsByTagName(“html”)[0].className.indexOf(‘ms-dialog-nr’) == -1){
    elmWorkspace.style.paddingTop = ribbonHeight + ‘px';

  74. Marcin says:

    I am trying to modify the color of the Global Navigation Bar at the top by modifying the CSS and the changes I am making come through in Chrome with no issues however the changes are not reflected in IE9. Any ideas how I can fix this?

  75. Troy says:

    Hi,

    Great work! Just a question. How do I change the colour of the black navbar. I need to give it a gradient and use different buttons for navigation. Somehow whenver I create diff nav buttons there is a black background that overrides my settings.

    Thanks

    Troy

  76. Richard says:

    Hi,

    First of all, thank you for this fantastic layout, it looks amazing.

    I have one problem however on blog sites in IE9. When you view a blog post, the post itself is positioned halfway down the screen leaving a big white space at the top between the post title and the navigation bar.

    This doesn’t happen in Firefox or Chrome however.

    Has anyone else noticed this or has a fix for this issue?

    Many Thanks,
    Richard

  77. Patrick says:

    Kyle,

    Great job with this! I have been bound and determinied to utilize HTML5 with a customer’s internal collaboration portal and have addressed all reported issue but 2 as far as I have found:

    Existing issue:
    “Send To” drop down menu not displayed in IE9

    New Issue:
    Gantt Chart List View does not render. This doesn’t appear to be an issue with rendering HTML5 content but rather an issue with how the page elements are arranged in the v5.master. Poking around online, I have found may who report that changing the s4-workspace and s4-bodyContainer DIVs are a cause of the issue. As far as I can tell, these 2 containers remain unchanged in your masterpage; however I have been unsuccessful in resolving this particular issue. Any thoughts, suggestions, or ideas would be much appreciated.

    Thanks,
    Patrick

    • Patrick High says:

      Turns out the issue was being caused by the v5.js file and the changes it’s making to resive/reposition the s4-workspace div. I resolved this particular issue now to find a bug where the gantt chart colored “bars” do not render in IE Edge/9 mode in IE. They render properly in Firefox. I’ll work to see if I can resolve this issue and post the results.

      • Andrew says:

        Any word on the Gant view issue? I’ve run into the same wall here and wondering if this has been resolved by anyone?

  78. [...] from HTML5 Boilerplate in a SharePoint 2010 master page (you may want to check out the v5 master by Kyle Schaeffer…though I have not personally used it, I heard it has some promise). You will be able to use [...]

  79. Srinath Subramani says:

    Great Work !!! this is base for sharepoint HTML5 design… Keep rocking !!!!

  80. Brandon says:

    Hello, Awesome Job! I’m wondering is anyone else having a problem inserting lists and images into a page when in edit mode works fine when loading from computer but when you load it from sharepoint it does not work. The picture loads as an [X] . Anyone found a remedy for this issue?

  81. Troy says:

    Hi,

    What font type did you use for your headings?

    Regards

    Troy

    • Kyle says:

      Hi, Troy. The font stack (for headers and paragraphs) is [code]'Helvetica Neue', Arial, Helvetica, sans-serif[/code]. On most computers, this means that Mac OS will show Helvetica Neue, but Windows will use Arial. I do this because the regular “Helvetica” font is present on a lot of Windows machines and quite frankly looks terrible, so I specify the more Mac-specific Neue version of the font.

  82. Aaron says:

    Love the clean and responsive design! I’m new to SharePoint, using Foundation 2010, and attempting your solution for an intranet read-only site.

    How can I recreate the left QuickLaunch menu (shown in your images) containing 1st & 2nd level nav? I’m still getting the default Sharepoint tree view. And, in way of advice, does it matter how the lower nav levels are created to be visible there – as subsites, wiki pages, etc? Thank you.

    • Aaron says:

      It appears I can replicate the QuickLaunch (as shown in the images) by manually changing Headers and Nav Links on each page, but perhaps there is a more dynamic solution I am missing?

  83. Stephen says:

    Looks great, can we use this with foundation?

  84. kensley says:

    I just need a yes or a no on this. Will this package work for a “Page Viewer” web part, which is basically an iframe on top of a .aspx page???

    Thanks!

  85. Shane Perran says:

    Hi Kyle,

    I went through the comments but oddly did not see this issue listed. If you change the Metatag to render in IE9, versus IE8 compatibility mode which is the default then you cannot move web parts from zone to zone.

    Edit page, move web parts, stop editing, the web part goes back to the originaly location.

    This is not the case when in IE8 compatibility mode.

    Curious as to if you found a work-around for this?

    Thanks,

    Shane

    • Pepijn Mortimer says:

      I have the same issue. A work-around is to use the Zone Index in the Layouts settings of the web part. The higher the number the lower de web part will be positioned. But with this you are able to place them in any order you’d like.

  86. Ali says:

    Hi Kyle,

    I would like to add an image banner right above the global navigation on HTML5 Master Page but I don’t know how. Can you please help me out?

    Thanks a lot in advance,

  87. Xavier says:

    Kyle,

    Have you have an issue with edit form properties not displaying on the task list when using this master page.

    When I try to edit or even create a new task on the task list, I only see the informational text of: The content of this item will be sent as an e-mail message…. yet none of the columns for the task show up.

  88. Vinny says:

    It does not appear to be working for me. I’m shrinking down my browser window and it’s not adjusting? I wonder if it’s something simple I’m missing?

  89. Pete says:

    First of, Thank you so much for this master page, really saved me a lot of trouble. I do have one issue regarding Silverlight(Powerpivot report viewer)

    The silverlightControlHost never displays at the correct size, the width works perfectly but height is an issue. With all other objects it generates correctly. When I manually force the Height value of v5-page-content then it will be set to that height, I would like however not to set the height to 500 for example but rather leave it as auto.

  90. Troy says:

    Hi Kyle. Thanks once again for this. Brilliant! Just one issue I have. If you go to site permissions- check permissions and after you have finished the mobile view stays in view afterwards. I have seen happen on other functions too. Is there any way of getting it to go back to the normal view without refreshing the page or navigating away?

    Regards

    Troy

  91. Bjørn says:

    Hi Kyle, nice work.

    But i had a lot of issues with the IE8 / IE9 mode.

    I wrote a web control that will turn on IE8 mode when the page is in edit mote / webpart page edit mode.
    And remove the IE8 meta tag when the page is in display mode (and enable CSS3).

    Apparently the problems only appears in edit mode.

    I can live with not having css3 in edit mode as long as i have it in display mode / normal use.

    http://xtrmdevtips.blogspot.no/2012/12/enable-css3-in-sharepoint-2010.html

    It’s kinda beta, i would appreciate if anyone could try it out.
    If you discover any problems i sure want to know about them.

  92. kirk says:

    unable to get this template to work in a multilingual environment. it seems to only support the English language. I have installed the language pack, and tried about everything i could think of to get the menu for the multi language to work. If i switch my default masterpage back to the previous default site then it works without issue.

    any suggestions?

  93. john says:

    hi, i need version for sharepoint foundation

    • Kyle says:

      All, as noted in the post and comments above, this master page is not intended to be a “theme” that you can simply drop into your SharePoint site and begin using. If you are looking for something like that, you’re in the wrong place. v5 is intended to be fiddled with, tweaked, and changed before it can be properly used. It is a demonstration and an experiment with implementing responsive design, CSS3, and HTML5 into SharePoint. Adding the IE8 compatibility tag (as mentioned above) resolves many bugs, but not all.

  94. thaxy says:

    Hi Kyle,

    thanks for the v5 masterpage. Do you have an updated/newer version?
    I have modal popup dialog width problems with IE9 and Opera only Chrome works.
    The fix suggested in the comments doesn’t work correctly.

    I tested it with SP 2010 Server (german) and a teamwebsite. Could this be a problem?

  95. [...] v5, the Responsive HTML5 Master Page for SharePoint Server 2010 – Kyle Schaeffer [...]

  96. [...] SharePoint to build sites. They’re clean starting points for creating your own customized pages. Kyle Shaeffer’s pages are also a good choice. They’ll give you a solid foundation for creating your own SharePoint [...]

  97. Sara says:

    Thank you Kyle and all of the blog commentators. This is an incredible cooperative effort. Kyle – you should feel so happy at what you started here. The sample is just amazing and much appreciated.

    Sara Tenenbaum

  98. franco bao says:

    Would this masterpage be compadable with sharepoint 2013?

  99. [...] But there are a couple of promising solutions out there like Kyle Schaeffer’s Responsive HTML5 Master Page for Sharepoint 2010. [...]