Responsive design development in sharepoint

A website that reacts to the screen size of a device by delivering a suitable output is thought to be a responsive design. Rather than designing several websites for different screen resolutions, responsive design will enable you to design one website that specifies how it should appear on various devices.

More people are using mobile devices to access the Internet than desktop computers, hence mobile devices accessibility has become a huge priority for web developers. There is no doubt that responsive design is now unanimously accepted as the way forward especially since World Wide Web Consortium (W3C) made CSS Media Queries a web standard.

Unfortunately, the overall responsive design adoption on SharePoint-based websites is very slow compared to other popular content management systems. This is probably due to shortage of skilled SharePoint designers, the lack of understanding what the responsive design benefits are and the slow corporate (bureaucratic) decision making. In this article we will look into new office UI fabric (grid) works.

What is page grid?

Page type in the SharePoint authoring experience can have its own rules for how it applies the Fabric responsive grid. This is to ensure that each page looks great, regardless of what device it's designed for, and that the experience is optimized for that environment. The basic grid in the SharePoint desktop experiences is a 12-column structure. The number of columns and gutter width adjust based on the screen width.

The following sections show the basic grid structure applied across different types of SharePoint pages, to help you better understand how the grid adjusts to support the experience and device needs.

Let’s look at Team Site

The content area for a team site is locked to the left. Team sites have a left navigation; therefore, the space that web parts occupy on the grid and the reflow behavior respects the space given to the navigation. The max width of the content area of a Team site is 1204 px and the minimum size is 320 px for mobile support.

Setup break points

To create a smooth flowing experience between screen sizes, the SharePoint UI should adapt layouts for the following breakpoint widths:

• 320 px
• 1024 px
• 1366 px
• 1920 px

Within these breakpoints, you should take into consideration how your content shifts when the viewport size becomes optimized for the nearest breakpoint. Note that this diagram is for illustration only and is not pixel accurate.

Please find guidelines in developing breakpoints

The responsive grid for both team sites and communication sites adjusts when going from large breakpoints to mobile breakpoints. This optimizes the site for the device and screen size. The following table describes the grid sizes at various breakpoints based on popular device sizes.

Window width

Device

Breakpoint

Columns

Gutter

Max columns per section

320

iPhone 5/SE,320x568

Small

1

N/A

1

480

6" device

Medium

1

N/A

1

640

8" device

Large

12

16

2

768

iPad portrait 768x1024

Large

12

24

2

1024

iPad landscape 1024x768

X-Large

12

24

3

1368

Surface Pro 3 1368x912

XX-Large

12

32

3

1440

Surface Pro 4 1440x960

XX-Large

12

32

3

1600

Web 1600x900

XX-Large

12

32

3

1920

Web 1920x1080

XXX-Large

12

32

3

If you are interested in developing solutions to support your SharePoint online (Office 365) environment using responsive design. Please contact Prometix – enquires@prometix.com.au

Prometix intelligently design a content built on SharePoint. Prometix believe augmenting your SharePoint investment to its optimum potential by combining our business resolution design for data