Is it better to use device channels (sharepoint) or media queries (css) for large sharepoint sites? [duplicate]

Question

This question already has an answer here:

• SP2013 & Responsive Design - How to do it right? 1 answer

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

Answer 1

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