15

I'm a SharePoint developer and also skilled in web design. My current task is to implement a responsive design along with a branding in SharePoint 2013 environment

Now I am 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 for each technology.

What do you think? Are there important aspects I'm missing? Are there other solutions which are better suited for realizing this?

1 Answer 1

12

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 end user 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
  • -- you can better point out which channel has errors and changes don't 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 don't 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 don't 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 wants 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.

5
  • Just a tiny note from UX, on your phone you should have exactly the same features as on your desktop! Always! I don't know a thing about sharepoint, but developing different html for different devices sounds awfully lot like different features for different devices. May 14, 2014 at 13:28
  • I know exactly what you mean! Those sites which wont give a smartphone full access and don't even contain a "to desktop version" link. But I would say SharePoint differs here a bit. In v.1 there will be a stripped version for smartphones, but I will also include a possibility to enter the full experience.
    – Mx.
    May 14, 2014 at 13:49
  • 3
    How much of your answer changes based on whether its a publishing site vs team site?
    – Mike2500
    May 14, 2014 at 14:14
  • 1
    Because the theming of teamsites is more complicated than on publishingsites (inheritance, etc.) it's a diffrence. Even more when you think about the collaboration purpose. I need to create a mobile version for both of them (and a lot of custom page layouts). A responsive design, that would contain all features the main page has would take years (in comparison) to develop, but when I just hide everything and then show the content the user needs to see, I can release an early v.1 and can easily add new elements if needed.
    – Mx.
    May 14, 2014 at 14:23
  • 1
    I did my website blog with sharepoint online and bootstrap, I used as a starting point the templates provided by Eric Overfield in his book. my site is here: levalencia-public.sharepoint.com, his book is: amazon.com/Eric-Overfield/e/B00BYC7L4Q May 20, 2014 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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