Last couple of weeks I worked on building a large intranet solution at a big supermarket chain in the Netherlands. One challenging client requirement, EVERYTHING HAS TO BE RESPONSIVE!
After some research and testing I found this CodePlex project: https://responsivesharepoint.codeplex.com
This is an awesome project with several active team members dedicated to make SharePoint better accessible on mobile devices! After installing the CodePlex solution SharePoint seemed to react responsive and our challenge became slightly less challenging.
In this post I will describe both the positive experiences as well as the obstacles I encountered while implementing SharePoint Responsive Design. This is the solution for SharePoint 2013 on small screens with some extra styling and small changes to the Master Page.
Image may be NSFW.
Clik here to view.
Mobile Devices Scrolling issues
One of the most annoying issues I encountered was the lack of smooth scrolling on iPhone and iPad. Secondary there was no scrolling possible on the Windows Phone. After some research I found the #s4-workspace caused the scrolling issue on the iPhone and iPad. Simply adding some extra styling resulted in a much better scrolling experience.
/*resolve scroll falter iPhone/iPad*/
#s4-workspace
Overwrite overflow:auto with
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
Enabling scrolling on Windows Phone turned out to be somewhat more challenging.
The following blog post describes the problem in detail: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
Adding the following script did the trick.
<script type=”text/javascript”>
(function() {
if (“-ms-user-select” in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement(“style”);
msViewportStyle.appendChild(
document.createTextNode(“@-ms-viewport{width:auto!important}”)
);
document.getElementsByTagName(“head”)[0].appendChild(msViewportStyle);
}
})();
</script>
Implementation
Page Layout (.col-xs-#, .col-sm-#, .col-md-#, .col-lg-#)
The Bootstrap Framework lets Web Part Zones act responsively depending on screen size using the 12 column grid system (see image).
Read more on: http://getbootstrap.com/css/#grid
- col-lg-4, large screen size +/- 33% width
- col-md-6, medium screen size +/- 50% width
- col-xs-12, extra small screen size +/- 100% width
Image may be NSFW.
Clik here to view.
Code in the Page Layout will look something like this.
<!–Web Part Zone–>
<div class=”col-lg-4″>
<webpartpages:webpartzone runat=”server” allowpersonalization=”false” id=”Row1Column1″ title=”First Row Column 1″ frametype=”None” orientation=”Vertical”>
<ZoneTemplate></ZoneTemplate>
</webpartpages:webpartzone>
</div>
SharePoint margin/padding vs Bootstrap margin/padding
SharePoint applies padding and margin on several elements in the framework. This will conflict with the abundance of styling added while including bootstrap CSS. And because of that you get unwanted results when trying to make your layout responsive. Based on percentages the grid system will act differently when an element is somewhat wider than it is supposed to be according to the defined class percentages. This will result in content pushed down too soon or even overlapping content.
Image may be NSFW.
Clik here to view.
Disable zoom functionality on Mobile devices
Zoom functionality is annoying because standard actions will result in unwanted behaviour. For example clicking input boxes will zoom in on the element and will cause the user to see only one particular section of the page.
The following meta data makes sure the user is not confronted with this unwanted behaviour.
<meta name=”viewport” content=”width=320, initial-scale=1, maximum-scale=1, user-scalable=0″>
Hide the Ribbon already!
The ribbon is causing trouble especially on extra small screens where it takes up too much space and not many people will use it anyway. Adding a little extra code will positively increase the user experience. Target users with specific links that are useful for users on small mobile devices (e.g. no one will go, or should not want to go to Site Settings > Term Store Management).
Where did the Search box go?
Apparently the decision was made to hide the Search box in the responsive CSS. This search functionality is one major feature that clients want to have so we had to add some extra code to make this more dynamic and accessible.
Image may be NSFW.
Clik here to view.
In this case I decided to retrieve a list with useful links managed by the content administrators and gave the users the option for search when they touch the Search Icon.
Just add some jQuery to toggle the targeted content.
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.mobile_search_navigation’).click(function() {
$(‘#SearchBox’).slideToggle(“fast”);
});
});
</script>
Keep up the good work responsivesharepoint.codeplex.com!
Happy SharePoint RWD’ing