1

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

Thanks!!

2

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

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

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

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

| improve this answer | |

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