Others Talk, We Listen.

SharePoint 2010 Responsive Web Design

by Donavan Marais on Oct 15, 2013

In today's world, many customers and business users are reaching for their mobile devices to access content from public-facing sites and intranet sites. While mobile applications provide developers the ability to access many of the built-in device features, such as the camera, access to contacts, and other OS-based functionality, designing mobile-ready intranets can be a bit of a challenge. Depending on the technology used to develop these intranets, there may be some hindrances to building these CMS-based systems into a mobile app. Therefore, it would probably be a better choice to focus on making these intranets more mobile-friendly by adopting a responsive web design approach.

More and more Fortune 500 companies are recognizing the fact that while the cost of implementing a CMS is a large investment, user adoption of the intranet is vital to its success. The intranet needs to provide the information, tools, and resources to employees within these companies in a way that ensures that they find value in it. Companies are seeing their employees not just as users of their intranets, but as business users that depend on the intranet for accurate information presented in the most user-friendly way possible, all the while focusing on usability, accessibility, and overall an improved user experience.

These business users now have multiple devices that can access the intranets, from their tablets, to their laptops, and even their smartphones. The question is, how do you ensure that they can access the same content with the same user experience across these different devices in the most effective manner possible? There are many form factors to take into consideration, such as the myriad of different devices out there, each with its own unique operating system, not to mention the numerous different screen resolutions and the fact that the number of screen sizes keeps growing! How do you manage your intranet across all these different platforms? This is where responsive web design comes into play.

So just how does Responsive Web Design work?

Responsive Web Design enables a website to adapt its layout to device-specific requirements. With flexible images and fluid grids, content and layouts automatically resize to fit the screen. Images grow or shrink, copy reflows itself, and the end result is that the user will have the consistent experience intended; whether its on a smartphone, tablet, or desktop.

There are a number of benefits and potential pitfalls to responsive web design, however, this article will instead focus on its implementation, assuming that you've carefully weighed up the pro's and con's and have decided to move forward with this approach when designing or re-designing your SharePoint 2010 intranet.

Right off the bat though, some important questions to keep in the back of your mind prior to making that decision would be as follows:

  1. Does your website actually need it?
  2. Do you have the budget?
  3. Can your team handle it?
  4. Are you ok with the design limitations?
  5. Will you maximize the opportunity?

What you may not know, is that out-of-the-box, SharePoint 2010 does not provide a responsive web component. There is no configuration, feature or setting that you can activate to magically turn this functionality on. This will need to be retrofitted to your existing SharePoint 2010 implementation or custom-built into your new design project. Crucial here at the outset of the project, will be to ensure that your design takes into account the fact that functionality may be more important than the actual design. A content management system is ineffective without content, right? So is ensuring that your design can in fact work across the various screen resolutions that you choose to support. Don't fall into the same trap assuming that you will need to glean down the content for smaller resolutions or otherwise remove certain functionality for a smartphone, as you will be failing your business users who will expect to be able to complete the same tasks on their smartphones as they can do on their desktops.

So how does one go about planning a SharePoint 2010 responsive web design project? Carefully...

The benefit of responsive web design lies in the ability to design and implement the same layouts and content to different devices, thus alleviating the need to create unique master pages, page layouts, and web parts for each and every device. Can you imagine how costly that approach would be, not to mention the compounding costs of supporting such an architecture? While we're on the subject of SharePoint's architecture, in order for these templates to be responsive, they will need to conform to the latest web standards spec, that being HTML5 and CSS3. But let's not forget that while you're focusing on all the different devices your users may have at their disposal, don't overlook the fact that your organization may still be using older versions of desktop browsers that do not support these specs. While it is possible to build in support for older browsers using progressive enhancements and other tools, such as the HTML5 Shiv Javascript Library, Modernizer, and other CSS frameworks, this might be the time to examine the need to upgrade such older browsers to provide the best user experience, not to mention the addditional time required to test all these fixes in older browsers and monitors.

So let's jump right into the meat and potatoes of how to implement a SharePoint 2010 responsive web project.

When branding a SharePoint 2010 site, there a number of key concepts to take into consideration. The branding solution will consist of a presentatation and a design component. The presentation component will consist of a number of elements as I mentioned above, such as the master page, the various page layouts, individual web parts, user controls, and other functionality. The master page provides the skeleton or framework that wraps around the different page layouts or templates. Within these page layouts, depending on the availability of web part zones, or containers, content editors can add web parts and/or other content. Secondly, the design component will consist of the CSS, and Javascript files, used to support the presentation component. The presentation component can access the design component in number of ways, either by referencing CSS and Javascript files directly from the master page(s), or from the page layouts and web parts themselves. Depending on the size of your project and development team, I highly recommend that you document and communicate a design framework to all developers. Sharing design components between developers helps to standardize the branding and adherance to your corporate identity, not to mention, ensuring that your design respects and implements the most up-to-date web standards and best practices, such as usability and accessibility. In addition, this will benefit your support of this product further on down the line should the need arise to make design changes to layout and content rendering.

The objective behind responsive web design is to ensure that your presentation components are based on a fluid layout design, such that they can automatically fit into the various screen resolutions. Through the separation of concerns, you ensure that the presentatation component and design component do what they meant to do respectively: the presentation component provides the semantic markup structure to define the content, and the design component provides the mechanism to render the content to its various form factors. CSS media queries are used to structure the content dynamically based on the screen resolution of the device that requested the specific page. So instead of trying to support each and every operating system and/or device, we instead focus on the screen resolution. A simple example of such a media query might look like this:

@media screen and (max-width : 320px) {
  .navigationBar {
    float: left;
    width: 100%;
    display: block;
  }
}

This media query is targeting all screens up to a maximum width of 320px and only applying a CSS style if the screen size meets this dimension. We refer to this as a breakpoint. A style sheet can contain any number of breakpoints. Using media queries, one can apply styles to elements within a very specific set of criterion, for example, only if the screen is in between 321px and 640px wide.

In addition to using CSS, one can also use Javascript to dynamically alter the presentation components based on certain conditions, such as if the screen is resized. This is useful for situations where one is targeting desktop screens of various dimensions with older browsers that do not support media queries. Alternatively, instead of this practise, one could choose from a number of different Javascript plugins to support older browsers, thus assisting your code to render correctly. The tricky part of this whole process of applying media queries to your presentation components is ensuring that they correctly render for all the different browsers, both desktop and mobile, including all the various breakpoints (screen resolutions). Most developers use browser-based tools to attempt to emulate or simulate how the content will be rendered at the various breakpoints. The caveat here is that this is a very time-consuming process and since the developer is using a desktop browser to test, there are no guarantees that the rendering is a true representation of how it will render on a mobile browser.

Once all your presentation and design components have been created and deployed out to your site, content can be added and testing can commence. At this point, it is highly recommended to have available a set of all the various mobile devices that your company will be supporting. Of course, depending on the number of testers on the team, and ensuring that testing happen in a timely fashion, you may need duplicate devices. If any inconsistencies are identified, the testers record the issue by taking a screenshot. At CapTech Consulting, we have a number of mobile testing rigs that we use for usability and accessibility testing, and in this case are invaluable to assist testers with recording the screen interactions. When testing for usability and accessibility, our usability experts will take business users through a set of scenarios and have them complete tasks to determine whether the site meets the predetermined scenarios. Both audio and video is recorded of the participant and serves as valuable data to analyze later. In the same way, these mobile testing rigs can assist developers in determining or better yet troubleshooting a specific issue.

Realizing this is an overview of how to implement a responsive web design project for SharePoint 2010, I am sure you can grasp the amount of work that is required to successfully complete the task effectively. As I mentioned before, carefull planning is required upfront, and ongoing and thorough testing throughout the duration of the project is vital to anticipate and correct any issues found, in a timely fashion.

In future articles, I will go through an example of a SharePoint 2010 responsive web design project and demonstrate the code to achieve a mobile-ready deployment.