This question already has an answer here:

I am building a large sharepoint site. Visitors will use various devices to access the site. Should i use device channels to control the display of elements or would it be more advisable to use css media queries???


marked as duplicate by wjervis, Waqas Sarwar MVP, Robert Lindgren Oct 13 '16 at 17:16

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


Hi please find the explanation as below:

source - Make SharePoint responsive - Bootstrap or media query?

I was in the situation to choose which one i would use to implement a responsive design in SP2013 and so I collected pro's and con's foreach technology.

Device Channels ##

Device Channels can deliver the best performance and optimizability for the enduser and the client - in my opinion :)


  • 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
  • -- better you can better point out which channel has errors and changes dont affect the other channels


  • 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

Media Queries


  • 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


  • 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?)

My 2 cents

I prefer the modern Responsive Web design(RWD) approach as it leads to less "headaches" in terms of dependence on UI/UX team and relatively less painful and shortened testing phase. The RWD approach i use handles the desktop, tablet and mobile devices quite well and haven't received any major complains from customers/clients.

Additional reading:

Device channels v/s Responsive web design by Prashanth BS

Responsive Web Design vs. Device Channels by Jean Paul

Responsive vs. Adaptive Web Design – What about Device Channels? by Stefan Bauer

Responsive Web Design v Device Channels in SharePoint 2013

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