Make SharePoint responsive - Bootstrap or media query?

Question

I am trying to make my SharePoint site responsive so that it can be viewed easily in ipad, iphone, tablets, etc.

What is the best way to do it with Bootstrap or media query.

Any suggestion will be great help.

Answer 1

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

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

---

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 do you think ? Are there important aspects I'm missing ? Are there other solutions which are better suited for realizing this ?