I will spare you the drama and get right to it.  SharePoint forces IE8 mode via this tag in the master page:

<meta http-equiv=”X-UA-Compatible”content=”IE=8″/>

If you are trying to use web fonts with SharePoint 2010, you are likely having an issue getting them to display.  That tag above is the reason.

If IE8 is a requirement, then you’ll need a new solution.  Otherwise, change the IE8 metatag to Edge.  Edge defaults to the most recent version.

<meta http-equiv=”X-UA-Compatible”content=”IE=Edge″/>

Think Responsively

Usually when someone talks about SharePoint customization they dive directly into the CSS, Master Page(s) and Page Layouts.  Few people take the time to step it back to the “UI Design” level.  All good design start visually, working out your masterpiece on a canvas gives you the ability to see what works and what doesn’t before trying to implement.  Similarly it gives you the opportunity to discuss the time to  implement against the value.  There is a lot of work that goes into planning, designing and implementing a usable SharePoint interface and it generally starts in Photoshop.

For those of you designing for SharePoint and leveraging the Bootstrap framework, I figure’d I’d share this tip.  Many are familiar with a 960 px framework.  In those cases most people would start be creating their mockup in photoshop using a 960px image… eventually implementing it into a master page leveraging bootstrap – bootstrap using the “.container” class to apply this width.

If you are using the “responsive” feature of Bootstrap then you should be aware that there is a media query for sizes that have a minimum of width of 1200  (as seen below).  This means that for all users using a relatively modern desktop/laptop with a decent resolution, they’re going to see the site at 1200 pixels and things that stretch the full width of your design would actually seem short.  (Things like a navigation menu or header).

@media (min-width: 1200px)

{
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container
{width: 1170px;}
}

So, if you are planning on using a fixed width responsive design using Bootstrap, you should probably consider starting with a mock-up of 1200 px wide instead.  This will fit perfectly on larger screens and scale down on smaller ones. The width is 1170 in the media query but that’s accounting for padding and margin as well.  It’s best to stick with 1200 pixels as you will scale down as needed and if you want to ever stretch the full width of the design with no padding/margin you will need the full 1200px.

Remember this is for a “fixed width” design only meaning you are using <div class=”container”> and <div class=”row”> for your main containers.

Bonus Tip!

If you wish to have a “full screen and fluid” design then you were need to use <div class=”container-fluid”> and <div class=”row-fluid”>.  In that case you are building for full screen and that should be taken into account with your images as well.  Usually you would create a large enough image to fill the full width of your screen (picture a 24″ monitor @ 1920 resolution). The idea would be then that you do not specify an image height/width in the HTML, but rather let the build in CSS scale the image accordingly.  Provided it’s large enough to proportionally look good which stretched across the entire screen, you would be ok as it scaled down to smaller resolutions.  If you have text on the image you might want to hide it via a media query as it gets to phone size if it’s unreadable.

If you enjoyed this post or have and questions please feel free to drop me a comment!

Hope that helps,

I hear a lot of opinions on responsive design from clients, other developers both in person and via social media.   The spectrum of opinion is a wide one.  I figure if I’m going to try and contribute to the pioneering of this journey of helping SharePoint move into the mobile realm, I should share my own opinion on responsive design.  It’s OK if you don’t agree with it – it’s only one opinion.

I believe that truth be told the enterprise as a whole is not ready mentally (understanding the value) and the industry is not ready physically (tools and methodologies) for responsive design “yet”.  However, the tide is changing and the mobile usage is undeniable so as thought leaders we must forge forward and clear a path for next 10 years of online information consumption.  It’s not about having the perfect answers or solutions right now, it’s about adjusting our approach and preparing for the next wave.  Few things start out perfect.

I was getting a random error now and then which would render my site inaccessible.  Turns out it is related to the servers “time zone”.  If you are faced with a context has expired, go to Central Admin, Web Application, General Settings.  Make sure your time-zone is set.   Once you set it you will need to reset IIS .  Start > Run > Type, CMD and then /iisreset.

Old habits die hard and one of my habits is labeling .html files, .htm?  This isn’t an issue in most cases as it’s perfectly recgonized.  However, in the case of SharePoint 2013 if you convert a .HTM file, you will encounter an issue with accessing the “Master Pages and Page Layouts” gallery from Site Settings.  In a nutshell, if your custom page is based on a .HTM file, you won’t be redirected to the gallery, instead you will be stuck in preview mode.  Simple rename your .HTM to .HTML and it will act normally.

If you use the design manager to create a design package, it seems there is a problem during the export / import that corrupts page layouts.  The result will be missing/corrupt content types.  For example, if you create a publishing site you can create pages within that site just fine, but if you create a sub-site also using the publishing site and try to create pages in that site, you will be faced with an error regarding “Invalid Field Type”.  This is because the page layout somehow ‘forgot’ a handful of the required fields.  It would appear to be a Design Manager specific bug which no doubt Microsoft will address, but in the meantime. 

More commetary regarding the issue as well as some fixes here:

http://www.bondbyte.com/Blog/tabid/55/EntryId/24/SharePoint-2013-Design-Packages-broken.aspx

When it comes to making SharePoint 2010 “Responsive”, there are a number of hurdles to overcome, but it is possible to make both Intranet, and Public facing sites ‘mostly’ responsive.

 I say mostly because inevitably there are instances where code is generated by SharePoint which is not mobile friendly.  An example of this would be “columns” on lists/libraries.  If you have a lot of columns in your view, it’s going to give you horizontal scroll.  The cost/time to work around every instance of this would not likely be feasible for most and hence I say “mostly” responsive.

It’s a tangled web of cascading effects which resolve down to the following root issues:

  • IE8 doesn’t work well with CSS3, or HTML5 (which responsive designs usually rely on).
  • IE9 doesn’t work well with SharePoint 2010 (yes, you heard it right).  There are issues with the people picker, remembering the placement of drag/dropped web parts etc.  Because of this SharePoint forces IE8 compatibility mode, and well, see the first bullet.

Enough about that, I know you are anxious to dig into the real issues and how to work around them.

IE8 Compatibility Mode:

  • Overview
    • By default, SharePoint 2010 master pages have a Meta tag: <metahttp-equiv=”X-UA-Compatible”content=”IE=8″/> which forces IE into IE8 compatibility mode.  So, even if you are using IE9, you are forced down to IE8 compatibility mode. The problem with that of course is most responsive solutions rely on CSS3 media queries which respond to the size of the viewport and IE8 doesn’t play well with CSS3.
  • Solution
    • Many try to overcome this by changing IE=8 to IE=9 or to IE=Edge (which uses the most recent).  Unfortunately, there are issues with SP2010 and IE9 (people picker, drag/drop web parts).  Because of this I don’t recommend this approach.
    • I have had the most success by keeping the IE8 tag, and referencing “Respond.JS” in my master page.  Respond.JS is a fast and lightweight polyfill for mix/max-width CSS3 Media Queries in IE 6-8, and more…).  You can get respond.js here: https://github.com/scottjehl/Respond – simply reference it in your master page, craft your media queries as you normally would, and voila.

IE8 and HTML5

  • Overview
    •  Though there are varying reports on IE8’s supportability of HTML5, I have not seen the two play overly well together without a little help.  Important to note is that you really only need this is you want to use HTML5 tags like <article> <header> <section>
  • Solution
    • The simple solution to using HTML5 declaration and tags in IE8 and below is to use “SHIMS”.
    • The fastest and easiest way to do this is to include this in your master page.  This assumes your site can access the outside world, if you are inside a firewall you will want to download the JS and reference it in your master page.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
    • You can alternatively add some JS to your master page to create the elements for you.  I have not tried this approach personally but I’ve read about it a few times so I figured I’d include it.

<script language=”javascript”>
document.createElement(‘header’);
document.createElement(‘section’);
document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘nav’);
 document.createElement(‘footer’);
</script>

These are fairly standard issues that will pop up when making a SharePoint site responsive.  Now that you have an idea on how to work around them, you are ready to get started.  Having ported a couple of responsive/grid frameworks to 2010, I can say that it is a very cumbersome task.

Lucky for you, there is a great community offering which has ported “Bootstrap” , a well known responsive grid framework from former Twitter employees  (@fat and @mdo). 

There is a tremendous amount of effort involved to port a framework, so hats off to the gang involved.  Bootstrap has been ported for both SharePoint 2010 and SharePoint 2013 and ZURP Foundation – Bootstraps rival framework is also in the works. 

Bootstrap allows you to do “FLUID” responsive GRIDS as well as FIXED width which in my opinion makes it a great choice choice, particularly within SharePoint and Intranets which are by default, full-screen.

I’ve leveraged Bootstrap recently and highly recommend it as a starting point.   You can download Bootstrap here: http://responsivesharepoint.codeplex.com/releases/view/99472

Happy Customizing,

If you are running VM’s for SharePoint 2013 and Windows Server 8 (beta), there’s a good chance you have installed the VMware Tools.  There is also a good chance that after you did that your VM went black.  Amanda just noted this fix to the issue:

http://mytricks.in/2012/03/solved-windows-server-2012-black-screen-after-installing-vmware-tools.html - long story short, enable graphics accelleration in the VM and reboot.  Should solve the issue.

Hope it helps

As you start to build responsive SharePoint 2010 sites, you will likely run into a hurdle with dialog windows.  Most responsive websites rely on CSS media queries to style the site according to the size of the viewport.  So, when you only have a 180 pixels for example to work with, you should style your content accordingly.

The problem with this core concept in SharePoint 2010 is that the dialog windows also share the master page which also happens to be where you are likely declaring your style sheets (including your media queries).  So essentially what happens is when your dialog window pops up, the viewport of the dialog window is pretty small and the site responds, changing the styles you have set  around the 500 pixel range.  Because the original page is still behind the dialog also using the same master page, it too responds and it just looks plain ugly.

Luckily, Microsoft added a class to the HTML tag of these dialog windows:

  • In the case of a list form, class=ms-dialog is added to the HTML tag
  • In the case of an error message, the class=ms-dialog and ms-dialog-nr are added to the HTML tag

This will allow you to build your classes by following the DOM from the HTML down to your wrapper/container.

For example, if you had a container called .custom-wrapper { width:960px; } you can experient with variations of html.ms-dialog custom-wrapper {width:100%} in your style sheet.  It will take a little tweaking, but hopefully you should be able to get it.

I’ve made a number of posts on the fact that IE9 is forced into IE8 mode via a meta-tag due to the fact IE9 and SharePoint 2010 don’t seem to play so well.  If you are wondering what it all means in terms of when does the browser determine the mode to run in, take a look at this diagram.

http://web.archive.org/web/20100924025133/http://ieblog.members.winisp.net/misc/How%20IE9%20Determines%20Document%20Mode.svg