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!!
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this communityI 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!!
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
andJS
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
andJS
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 ofBreakpoints
- 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