The argument to provide multi-device and multi-channel support for your website is compelling. Three years ago, desktops made up around 90% of the devices we used to connect to the internet. That percentage has now dropped to around 50%, solely due to the number of smartphones and tablets contented to the internet -- a trend that it’s fair to assume will continue to grow.
 

Thumbnail image for shutterstock_95694994.jpg
Anyone that is serious about their web strategy clearly needs to ensure that they can optimize the user experience for mobile users and deliver relevant content across different devices and platforms.

Responsive design is one of a number of techniques that enables content to be delivered in a mobile optimized way. It is literally a "one sized fits all" approach to delivering cross-device content and uses CSS media queries to detect the screen size of the device the content is being viewed on, and displays the content in accordance with the size of the device (whether it’s a large format plasma TV or a small screen smart phone).

Responsive Design and SharePoint

Responsive design sits really well with content management systems such as Microsoft SharePoint. With responsive design, you can achieve a cross-platform, cross-device experience without having to build additional native mobile applications or content management tools. This means that SharePoint can still be a single repository for all your media and content.

Once a responsive framework is in place, content can be managed in SharePoint without any change to the editing process or workflow. Editors can continue to manage their content in the same way they always have done. The only real content challenges come into play when you take a purist approach to responsive design. Let me explain.

Responsive design scales media assets to fit the size of the screen; this means, for example, a large image will shrink to fit a mobile device. Great I hear you say, but that image will still be the same file size, this ultimately means that the weight of the page will be the same on a desktop (where you need large media assets) as it is on a mobile (where you need smaller assets).

There are really two answers to this problem: 1) the first is to create additional mobile media assets in SharePoint and then use a mobile framework to serve those assets based on the device that’s view the site. 2) the second is to do nothing and accept that the ability for content managers to deliver content faster (by only having one set of media content to create) outweighs the need to reduce page weight and therefore load time on mobile devices.

A responsive approach

Planning and delivering a responsive website in SharePoint requires a bit of a mind shift and a change in approach if you want to be successful. There are really 3 key things you need to do to ensure successful delivery:

  1. Mobile first mind-set

    Your team needs to think mobile, mobile, mobile. Let’s face it, we’ve all been used to looking at websites on desktop devices but to be successful at mobile design you need to think mobile.

    This usually means focusing on the most important content and information that an end user will see and interact with. There isn’t any room on a small screen for unnecessary screen elements or content. Although this can be a mind shift at first, it usually results in an overall better user experiences that’s focused on the essentials.

  2. Find a suitable responsive framework

    There are a number of frameworks out there now and there is no point in reinventing the wheel. I would recommend testing out a few different frameworks and find the one that works best with your requirements and the skills of your team.
  3. An iterative project approach

    Designing and planning a site to be cross-device is challenging. For example, standard techniques like wire-framing can fall over when you’re planning to go across different devices. Having just completed my first responsive SharePoint web project, I would strongly recommend the use of an agile iterative methodology that will enable you to explore ideas and concepts across devices, test them out and then tweak and change them based on user feedback.

So Where is the Return on Investment?

The return on responsive is pretty straightforward. The more people you can communicate to on the web through different devices, the more likely your products and services are likely to be found and purchased by perspective customers.

There are also cost savings to be made when it comes to responsive design and SharePoint. For example, maintaining a single code base that can deliver an optimum experience across all internet connected devices means that additional applications don’t need to be developed and more importantly, changes can be made in a single place rather than on multiple platforms.

Responsive design also means that content managers only need to use SharePoint to manage their content, resulting in reduced training cost and time savings.

With responsive design delivering content across devices, using WCM platforms like SharePoint doesn’t need to be difficult. There will be challenges along the way but these are far outweighed by the potential benefits.

Image courtesy of tashatuvango (Shutterstock).

Editor's Note: You may also be interested in reading: