3

I have been given an assignment to create a Responsive Master Page for SharePoint 2013. I've been researching for few days and found out that we can achieve it using:

  1. Media Queries
  2. Device channel panels

I am very new to designing so I need input if Responsive Design can be achieved completely using Design Channel panels or if we need to use both to achieve same.

Any reference to blog or read would be helpful.

Note: I need to target IE8 too!

2

Media Queries

If you want to be in control of what happens, you could use a custom design in your Master Page. In the masterpage you need to set different css-files based on viewport, like this:

<!-- Responsive CSS-files based on width -->
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="/css/desktop.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 1023px)" href="/css/tablet.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)" href="/css/mobile.css" />

Unfortunately the SharePoint:CssRegistration doesn't support the media attribute, why you need to use plain old link to you css-files, but it works just as fine.

Use Device Channels as Alternative

It also possible to use Device Channels to target different group of devecies. SharePoint reads the HTTP_USER_AGENT attribute to determine which device channel to use. Desktop uses the default and blank input of Device Inclusion Rules. Mobile ddevices is easy to target with the fallback of $FALLBACKMOBILEUSERAGENTS;. IPad is also ease to target, just use iPad as value of Device Incusion Rules. But Android Tablet is tough. If you type Android, you target all Android devices; tablets and phones since the HTTP_USER_AGENT of Android is similar to each other. Android phones uses Mobile in its HTTP_USER_AGENT which you need to add before Android targeting tablets. Otherwise you'll get the tablet device channel on Android phones as well.

When you test, you just add ?DeviceChannel=alias to see different views upon development. Be sure to test on real devices before deployment though.

http://sitecollection/site/pages/default.aspx
http://sitecollection/site/pages/default.aspx?DeviceChannel=ipad
http://sitecollection/site/pages/default.aspx?DeviceChannel=android
http://sitecollection/site/pages/default.aspx?DeviceChannel=mobile

enter image description here

Conclusion

Running Media Queries is easier to control and you don't have to worry that your device channels get everything in the wrong order (which have happened to me a lot of the time). And you don't need to worry about which device users have, the viewport will decide for you.

2

My personal experience is using Media Queries. In this case we don't need to re-invent anything because of the great solution that is available in CodePlex

http://responsivesharepoint.codeplex.com/

You just need to deploy the solution and follow the instructions on the package.

To read about the Advantages & Dis Advantages of Media Queries vs. Device Channel https://spmatt.wordpress.com/2014/04/28/responsive-web-design-v-device-channels-in-sharepoint-2013/

  • I can not use third party code directly. I may refer. – vikbehal Jun 29 '15 at 10:29
2

Here's a comparism I did some time ago:

To get more input i also created a question on SO.

Device Channels

Yes I'm talking about Device Channels even when they are not mentioned in the question, because they can deliver the best performance and optimizability for the enduser and the client - in my opinion :)

Pro

  • individual designed HTML/CSS and JS foreach device
  • -- no need for hiding or removing incompatible elements
  • -- faster because you just load things you really need
  • -- faster because you will likely have less CSS/JS and HTML
  • -- faster because you can use optimized code foreach device
  • -- you can better point out which channel has errors and changes dont affect the other channels

Con

  • individual designed HTML/CSS and JS foreach device
  • -- you have to append changes to each masterpage
  • -- more work to accomplish the same result (in general)
  • -- redundancy
  • bound to User Agent Strings
  • growing diversity of devices
  • -- may equals growing diversity of masterpages >> work

Bootstrap

Pro

  • mighty, easy to use framework
  • -- a lot of documentation
  • -- fast results
  • -- if you like it - all the Bootstrap styles
  • there are already projects using it so you may dont have to build it from scratch
  • -- http://responsivesharepoint.codeplex.com/

Con

  • Bootstrap is a huge framework and has 8000+ lines of code in the unminified CSS and JS files
  • -- 2 requests extra for ~ 130kb & 30kb
  • -- a lot of styles and script for your browser to handle
  • Bootstrap is not build for use in SharePoint
  • -- it's overwriting SharePoint styles which makes some features (ComposedLooks for ex.) less valuable
  • -- there are a lot of custom CSS needed to make it work seamless with SharePoint
  • SharePoint has it's own weird way to do things and that interferes with BootStrap
  • -- tons of CSS
  • -- tons of JS
  • -- tons of HTML Attributes

Media Queries

Pro

  • only necessary CSS
  • no JS if you dont wan't to
  • you can create your own layout
  • with response.js even in IE6 working
  • you can easily separate which features should be available in certain screen sizes

Con

  • several sets of CSS depending on the number of Breakpoints
  • every feature needs to be developed by yourself
  • it's not easy to write generic code that can process every SP2013 Page
  • -- it depends on the complexity of the content shown. I write about 150 lines of CSS that created a mobile view for publishing pages that contained the navigation and content, but no features like editing, etc.
  • -- if the client's want every feature on his smartphone, there is a hell lot of work and testing needed. (Plus who the hell wants to do that on their phone?)

Conclusion

I'm not sure yet (and it would be awesome to get a lot of feedback to my results), but i tend to use Media Queries. Why ? Well SharePoint has it's own way to handle desktop users and i wouldn't customize that build in functionality if not explicit ordered. On the other hand SharePoint doesn't provide a real UI for smartphones. I don't want to use BootStrap because it contains a lot of styling which will produce problems in branded environments. And I won't use Device Channels because of the downsides.

  • What approach did you finally go with? Please note that I'll have to target ie8 – vikbehal Jun 29 '15 at 10:30
  • @vikbehal I created a specialized media query solution - but I convinced the client that the use of modern browsers (IE10+) is better suited for their needings. – Mx. Jun 29 '15 at 11:11
  • In my case, plenty of applications will break if we move to IE9 or above. – vikbehal Jun 29 '15 at 12:41
  • @vikbehal well there are several polyfills for media queries maybe thats a solution for you – Mx. Jun 29 '15 at 12:42
  • @Mx: Awesome comparison, thanks for sharing! I'm also a proponent of media queries. Especially since they are supported in any modern browser, including IE9+ – Sig Weber Jul 1 '15 at 21:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.