Responsive framework for SharePoint Online 2013

Question

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.

Answer 1

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.

Answer 2

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:

• https://support.office.com/en-in/article/Customize-a-master-page-to-brand-your-site-0a57b837-4c97-4af9-a088-fedf3dfd1dd5

Or with the use of Visual Studio:

• https://msdn.microsoft.com/en-us/library/ff506214.aspx

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):

• http://www.codeproject.com/Articles/399156/SharePoint-2010-Client-Object-Model-Introduction

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

• http://www.c-sharpcorner.com/UploadFile/40e97e/sharepoint-2010-sharepoint-object-model/

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:

• CSOM vs JSOM vs SSOM vs REST
• https://channel9.msdn.com/Series/Reimagine-SharePoint-Development/Understanding-the-differences-between-Server-Side-Object-Model-and-the-Client-Side-Object-Model

Take a look at these online courses:

• https://www.pluralsight.com/search?q=Sharepoint&categories=course (The courses from Andrew Connel, Sahil Malik and Ted Pattison are all recommended)