2

I am about to start a project in SharePoint Online 2013. I have a plan to create responsive design in it.

Researching on various blogs and posts I have come across many different frameworks like Bootstrap, Zurb Foundation and SASS but I am unable to decide that which of them would be the most appropriate for SharePoint Online.

Please suggest.

Improve this question
5
  • As far as Zurb is concerned, I have faced a lot of issues with it since it overrides the default behavior and structure of SharePoint
    – Yash Saraiya
    Dec 9, 2015 at 13:51
  • I found some overrides in Bootstrap.
    – Atish Dipongkor - MVP
    Dec 9, 2015 at 13:52
  • 4
    Responsive Design doesn't require any framework. It just requires CSS. The overweight impact of frameworks is way to enormous and SharePoint doesn't understand that framework code anyway. I set up some SASS / CSS boilerplate template to getting started making SharePoint responsive. github.com/StfBauer/ResponsiveSharePoint
    – Stefan Bauer
    Dec 9, 2015 at 14:46
  • 4
    Agree with @StefanBauer. It just requires a little knowledge of CSS to make SP responsive. Also, I'd highly recommend looking at Heather's solution for making SP responsive here : blog.sharepointexperience.com/2015/03/…
    – Akhoy
    Dec 9, 2015 at 14:55
  • @Akhoy the source you mention is really good too.
    – Stefan Bauer
    Dec 9, 2015 at 17:42

2 Answers 2

Reset to default
6

Making a SharePoint site fully responsive while keeping all the collaboration functionality is very hard (if not impossible).

To overhaul the standard HTML you need to modify the master page and create custom page layouts. Even when doing a complete overhaul you will still have limited control over the HTML that the SharePoint webparts generate.

To make things worst Microsoft lately recommends not to adjust the master pages and leave them as is.

When I need to make a SharePoint site responsive, I use a 'publish - consumer' approach.

The 'content editors' use the standard SharePoint out of the box functionality for creating all the needed content. We generally call this the 'back-end'. Users in this (bank-end) site have access to all the SharePoint functionality (workflows, versioning, content approval, content types, lists, etc...) The master page is not modified.

A second website is created called 'front-end'. This site is the fully responsive site that most users will visit. This site can be a new SharePoint site collection or just a plain .NET website solution (MVC or aspx forms). This front-end 'consumes' the content coming from the back-end. When using SharePoint this is generally done by using the search and creating custom display templates. When using MVC as front-end you can fetch information by using the SharePoint web services or using CSOM.

I used this approach in several projects and have a preference for using an MVC application as front-end because it gives you 100% control over the generated HTML. In most cases creating an MVC site was faster than overhauling SharePoint.

Improve this answer
2
  • This explanation is really useful. Could you please provide some reference links so that I can have an in depth insight on the implementation that can be done. This would be very helpful and much appreciated.
    – Mancy Desaee
    Dec 11, 2015 at 5:30
  • See additional answer
    – Wout
    Dec 11, 2015 at 7:37
0

In reply to a question in the comments: (do not mark as answer)

First make sure what version you will be using SharePoint 2010, SharePoint 2013 or SharePoint Online (office 365). SharePoint Online tends to get a bit more complex due to security constraints and limited flexibility with deployment.

Master pages: How to customize a master page:

Or with the use of Visual Studio:

Tip: do not modify existing master pages! Create a copy and modify the copy!

Development

To connect to SharePoint with C# (console app, website, MVC, windows service, WCF, ...) you can use CSOM or SSOM. (there is also JSOM and REST). CSOM can be used for on-premise installations and in Office 365. SSOM can only be used in on-premise installations but has full support for SharePoint 2010 as well.

Connecting to SharePoint using the Client Site Object Model (CSOM):

Connecting to SharePoint using the Server Site Object Model (SSOM):

Note: personally I find CSOM only useful from SharePoint 2013 Service Pack 1 and newer. Before the service pack the functionality of SSOM was limited.

Good articles

Compare CSOM, SSOM, JSOM and REST:

Take a look at these online courses:

Improve this answer
1
  • Hi thanks for your answer, it fits right in with what I'm trying to achieve! The problem I'm having (and perhaps you have a solution) is I can use some libraries to make the CAML queries but there seems to be very little in the mapping aspect like EntityFramework does. Do you have any ideas. This seems to be the best option github.com/kappy/SpMapper - see my question sharepoint.stackexchange.com/questions/199460/…
    – Richard Housham
    Nov 15, 2016 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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