1602 1535 bas.jacobs
Blog Posts
SharePoint 2013 Responsive MPB Bootstrap

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.

sharepointresponsivecodeplex

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.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

/*resolve scroll falter iPhone/iPad*/

#s4-workspace

Overwrite overflow:auto with

overflow-y: scroll;

overflow-x: hidden;

-webkit-overflow-scrolling: touch;

[/av_notification]

Enabling scrolling on Windows Phone turned out to be somewhat more challenging.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

<meta name=”viewport” content=”width=320, initial-scale=1, maximum-scale=1, user-scalable=0″>

[/av_notification]<br /><br />

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.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

<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>

[/av_notification]

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

PageLayout

Code in the Page Layout will look something like this.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

<!–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>

[/av_notification]

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.

PageLayoutFaulty

 

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.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

<meta name=”viewport” content=”width=320, initial-scale=1, maximum-scale=1, user-scalable=0″>

[/av_notification]

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.

responsivesharepointxs

 

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.

[av_notification title=’Note’ color=’green’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=” font=’entypo-fontello’]

<script type=”text/javascript”>
$(document).ready(function() {
$(‘.mobile_search_navigation’).click(function() {
$(‘#SearchBox’).slideToggle(“fast”);
});
});
</script>

[/av_notification]

Keep up the good work responsivesharepoint.codeplex.com!
Happy SharePoint RWD’ing

Comments - 11 Responses to “SharePoint 2013 Responsive MPB Bootstrap”

  1. Philippe says:

    Hi thanks for the post. Did you merge some of your improvement into the codeplex solution ?

  2. Mark says:

    Bastiaan, can you confirm that you still need the Windows Phone fix? I believe Microsoft has already pushed an update for the devices effected by the rendering bug.

  3. Bastiaan says:

    Hi Mark, Unfortunately we still need to use the Windows Phone fix.

    See also this discussion on responsivesharepoint.codeplex.com

  4. Anita says:

    Hi Bastiaan, Can you confirm if this deployment worked for your on Team Sites in the intranet? I am not having luck with the non-publishing sites and webpart zones. Anita

  5. Bastiaan says:

    Hi Anita,

    Make sure you use the Non-publishing master:

    https://responsivesharepoint.codeplex.com/downloads/get/737723

    Good luck!

  6. Aroh says:

    I am really amazed with your tips. It is really very useful. In a project which I am assigned requires SharePoint 2013 to be responsive and it is a team site template.I am using Bootstrap 3 and enabled the publishing features. I have copied OOTB seattle master page and renamed to seattle_responsive. Later I used CSS’s media queries to make master page responsive by linking the CSS files.

    When I switch to responsive master page, the SharePoint site (Team site template) does not responsive features. But when I create a new publishing page, then it works.

    1) Does responsive for SharePoint works only with Publishing sites??
    2) This issue highlighted in the responsivesharepoint.codeplex.com https://responsivesharepoint.codeplex.com/workitem/1689
    –Aroh

  7. JoeP says:

    Does anyone know of a theme for SP 2010 Team sites to be responsive? (Not publishing sites ans 2010, not 2013.
    Thanks~

  8. Pat says:

    Thanks Baastian nice article.
    I’m also missing the search text box.Where do I add the script below

    $(document).ready(function() {
    $(‘.mobile_search_navigation’).click(function() {
    $(‘#SearchBox’).slideToggle(“fast”);
    });
    });

    Where in the masterpage. I added it to a script editor webpart but nothing happened.

    Thanks in Advance

  9. Eelco says:

    Thanks for the great work. Do you know if this sollution works also on a publishing environment.

  10. Elie says:

    Hey man,

    /*RESOLVE SCROLL FALTER IPHONE/IPAD*/ #S4-WORKSPACE OVERWRITE OVERFLOW:AUTO WITH OVERFLOW-Y: SCROLL; OVERFLOW-X: HIDDEN; -WEBKIT-OVERFLOW-SCROLLING: TOUCH;

    This isnt working for me, any ideas?

  11. Bastiaan says:

    @Elie Is #s4-workspace { -webkit-overflow-scrolling: touch; } not working? This change should make a huge difference in scrolling behaviour on iOS devices.

Leave a Reply




HTML5 Accepted Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>