Implementing responsive solutions with the SharePoint Framework & the modern experience

Responsiveness

As more businesses require their web platforms to provide “responsive web design”, it remains a challenge to implement a fully responsive solution with SharePoint Online.

Responsive web design is an approach to web design allowing desktop webpages to be viewed in response to the size of the screen or web browser, so that the user experiences the same level of usability, design and performance regardless of the browser he’s viewing the application with.

A “modern Teamsite” in smartphone format

Most implementations of responsiveness are built on top of a framework, the most widely used being Bootstrap, an open source framework developed by Twitter.

SharePoint, in particular its web part technology, has always made use of web formatting that is difficult to adapt in a responsive environment.

Additionally, the Online version of SharePoint limits the options for customizations, as Microsoft recommends not to modify its master pages to avoid potential breaking changes during platform updates.

Until recently the SharePoint Online developer had only the option to implement hacks and workarounds through script injection and custom stylesheets to achieve some level of responsiveness.

Over the past months Microsoft has introduced new features in SharePoint Online that should enable a fully responsive experience in the near future.

The SharePoint Framework

Microsoft recently announced the “General Availability” release of the SharePoint Framework (SPFX), meaning that customers can start to make use of it in production environments.
SPFX allows fully customized client side apps, they consist of a package file and a set of client side components that can be deployed on any Office 365 tenant and a Content Delivery Network.

Some of its benefits:

Is responsive by nature (no iframes)
Performs well and loads fast in combination with a Content Delivery Network
Provides easy deployment
Is compatible with any client framework of choice (React, Knockout, Angular, …)

The modern experience

The SPFX framework is also used on the Office 365 tenants as building platform for the “modern experience”. One of the main features of this modern experience, next to an improved user interface, is responsiveness.

The modern experience has gradually been introduced next to the classic experience, yet Microsoft doesn’t plan to remove the classic experience for now, as many applications have customized their interfaces based on the classic experience.

But as new applications are being built for SharePoint Online, SPFX and the modern experience are now an option to take into consideration.

The current parts of the modern experience are:

Modern team sites
Modern list and library experiences
Modern site pages

Some of their features:

Provide a simplified user interface
Sit next to the classic experience
Fully responsive (menus, navigations, …)
Enabled by default, but can be disabled

A page created with the modern experience has nearly no html code, only scripts that load all content dynamically.

There are however currently numerous limitations in the modern experience, in particular in modern Team sites:

No custom master page
No custom page layouts
No publishing features (eg. editing controls)
No custom actions
No templating
No property bags (site properties)
No SharePoint Designer access
No sandboxed solutions
Limited set of standard webparts

Also it has no Ribbon or controls to edit its metadata.

For a fully responsive SharePoint Online environment, the developer can combine a Modern site experience with the SharePoint Framework, but this solution still has numerous issues due to the modern Team site limitations.

Another option is to create a classic Team site and to create all its content with the modern experience building parts (modern page, lists, …). However, this will not prevent all the limitations set by the modern experience, eg. when you change the look of your team site, this look won’t be applied on modern site pages, or enabling the publishing feature won’t enable this on modern site pages. The same applies to team site provisioning engines that are not able to apply all features to a modern team site.

The current set of standard webparts in the modern experience:

Text
Image
Document
Link
Embedded code
Highlights
Bing map
Image gallery
News list & headlines
Video
Power BI
Quick chart
Quicklinks
Site activity
Yammer

The list of webparts can be expanded with custom webparts based on the SPFX platform.

There are also galleries of open source SPFX webparts that are released, with custom solutions like list, search , charts, graph webparts, … but some of these were developed with preview, non-GA versions of SPFX and will not work with the GA release of SPFX, so you may have to wait for an update before using them in a production environment.
Also these webparts don’t come with the support of Microsoft, and are msotly released as demo solutions by the community.

As the platform is now ready for production we expect more stable and enterprise grade solutions being made available by third party developers.

However, the platform will still need some important improvements before it can be used as a responsive replacement for customized publishing sites or teamsites, notably

Custom layouts
Editing controls for page metadata
“out of the box” templatable list & search webparts

Update: list & libary webparts are being released – https://techcommunity.microsoft.com/t5/SharePoint-Blog/Introducing-SharePoint-modern-list-library-web-parts/ba-p/64581

Conclusion

The modern experience currently offers some responsive features in the SharePoint environment. Many customizations are not available yet, apart from the possibility to create custom responsive webparts with SPFX.

For quick and ad hoc team environments this is sufficient, like the modern Teamsites that are created with Office Groups.

For larger intranet portal projects, which need templating, branding, easy editing of page metadata and interface customizations, the platform still lacks important features to allow a fully customized responsive environment.