Create Responsive User Experience for Seattle and Oslo Master Pages

To create a responsive user experience for sites using default Seattle and Oslo master pages, you'll need to add add a <meta name=”viewport”> tag to the html, and use an alternate CSS to make our add-ins responsive.

The 'viewport' tag contains instructions to the browser in the matter of viewpoints and zooming, and ensures your web design is scaled properly according to your style definitions. Currently SharePoint doesn’t support it by default. You can add it directly to the master page, but on publishing sites this meta tag can be added without even editing the master page.

'Search Engine Optimization Settings' are enabled by default on a site collection level where publishing feature is activated (Publishing infrastructure in Site Collection features, Publishing in Site Features). The goal of these settings is to add additional things to the header definition of SharePoint, so it; possible to reuse the Search Engine optimization settings to add the 'viewport' meta tag. Navigate to Site Settings > Site Collection Administration > Search Engine Optimization, and add the following value to include into site pages:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

The result will be a perfectly scaled SharePoint, not yet optimized for responsiveness but it will display the content correctly according to the style definitions:
 

Now we need to add a style sheet that will make our add-ins look responsive. To do that, navigate to Site Master Page Settings (/_layouts/15/ChangeSiteMasterPage.aspx) and specify an Alternate CSS URL which will point to https://**-lms.365.systems/Frontend/modules/responsive-masterpage/seattle_responsive.css:

NOTE: https://**-lms.365.systems stands for:

  1. https://us-lms.365.systems/ for the Central US region;
  2. https://je-lms.365.systems/ for the Japan East;
  3. https://ne-lms.365.systems/ for the North Europe region.

 

The result is our add-ins optimized for responsiveness:

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    dennis khullar

    hi, it works like a charm.thankyou for your help. it hides the navigation bar. can you advice how can i solve that.

Please sign in to leave a comment.