Making a Large Website Mobile-Friendly with Responsive Design


Two years ago, 'responsive design' was just a buzzword among the world's leading web designers and developers who recognized the growing trend towards Internet usage on mobile devices and tablets. Apple's iPhone and iPad, and Google's Android OS, have since revolutionized the mobile space and mobile-friendly design is no longer a luxury, it's a must-have.

FortisBC responsive website

Generally, responsive websites are built in parallel to the desktop template, blurring the lines between various web browsing platforms and offering a user-friendly experience no matter what device a user is browsing on. That said, responsiveness can also be built into currently existing websites, creating a seamless experience across all devices without requiring a complete rebuild. This FortisBC case study is an excellent example of the process used to create a responsive experience for a well-established site with a high standard of quality.

One of British Columbia's most prominent companies, FortisBC serves the energy needs of approximately 1.1 million customers across more than 135 communities. Keeping this in mind as we developed our strategy for integrating responsive functionality, we knew that it was important to create a clean, easily-digested interface that would appeal to a variety of customer demographics, and also retain the level of quality and polish expected by FortisBC customers and stakeholders.

Step One: Analysis

The FortisBC website is built on Microsoft SharePoint, a powerful CMS (content management system) and web application platform. This feature-rich tool for collaboration and communication is used by many industry leaders to maintain content (web and internal), but can sometimes be challenging for front-end developers.

Our first step was to analyze the current FortisBC website and determine the best method for applying best-practice responsive techniques to the existing structure (front-end development languages, administrative workflow, etc.) We cataloged the strengths and challenges that existed in the current FortisBC website, and developed a strategy for moulding the current code into a flexible responsive design. It was essential that the transition between desktop and mobile devices was seamless and retained the hierarchy of content and information to avoid confusion among visitors.

During this stage, we itemized and inspected the library of existing templates, and static HTML elements. This helped us determine our strategy for development and identified any potential roadblocks before they became problematic.

Step Two: Design and Build

Our design team used our planning document to create mockups of common pages at a number of different mobile resolutions. Careful consideration was given to design principles, usability, and user experience. Not only do mobile-friendly websites need to look good on a vareity of devices, they also need to be friendly to swipe- and touch-based interfaces and consider the legibility of text on small screens.

On the development side, we established a beta version of the website on a staging server that allowed us to develop the responsive framework without disrupting the current FortisBC website. We began development by installing front-end development files to integrate responsive behaviour into the existing templates. This was the only time the SharePoint template files were altered.

Design and development of the responsive views necessitated that we determine design-specific breakpoints. These indicate when certain behaviour is triggered (such as a navigation menu moving from the sidebar to the header). Once these breakpoints were established, and the mobile designs approved, we began development to make the existing HTML markup responsive.

Step Three: Test

After development, a rigorous testing period began. Alongside FortisBC, we created an expansive User Acceptance Test (UAT) compliance document that provided a structure for the testing period. This document included testing scenarios for a variety of different user types, and covered a wide range of popular mobile devices including: iPhone, iPad, and various Android and Blackberry devices.

Testing included internal feedback from the Upanup team and FortisBC. Once the beta version of the responsive framework passed all UAT tests and displayed consistently across mobile devices, it was ready for deployment to the live environment.

Step Four: Deploy

With everything working smoothly, the final step was to move the development files from the beta stage to the live FortisBC website, enabling responsive behaviour for all FortisBC website visitors. FortisBC internally handled deployment of the delivered mobile framework files, with assistance from Upanup where necessary. 

FortisBC responsive website

A key point for this transition is that administrative workflow was not affected and no website downtime was required. This ensured that the transition was seamless for FortisBC customers and employees.

After launch we continued to run tests to ensure everything was working correctly. More feedback was gathered, and tweaks/adjustments were made in response. These post-launch ongoing activities are part of every project to ensure a polished and successful experience.

Final Thoughts

Response to the newly mobile-friendly FortisBC website has been excellent. It joins other award winning Upanup responsive designs, like The District of Oak Bay and West Fraser, at the forefront of multi-platform web development and design, and ensures that browsing is an optimal and enjoyable experience no matter what device is being used for viewing.

While this case study examines a website constructed with Microsoft SharePoint, the approach outlined is platform agonistic and a technically experienced team can apply it against any CMS. The challenge of developing on various platforms varies, but a rock-solid development strategy ensures that the outcome is the same: a high-quality responsive framework that adheres to the standards and administrative workflow of the established desktop website.

Aidan Moher
By Aidan Moher
Web Designer
August 30th, 2013
Disclaimer: Our team members contribute to this blog in their own voices. As such, opinions expressed in this post are not necessarily shared by Upanup. If you are curious or concerned, please contact us.