When we took on the task of transforming the OilSandsToday.ca site to be more mobile friendly, our ‘light-responsive’ approach was used to create a solution which would improve both engagement and the user experience while keeping risks and costs low.
The client's problem: A high bounce rate
The Canadian Association of Petroleum Producers' (CAPP) site OilSandsToday.ca, built on the SharePoint platform, worked well on a typical computer screen but had serious problems relaying information to its mobile users.
CAPP struggled to keep mobile users on the site; in fact, analytics indicated most left only 1 second after landing on the homepage. It didn't take long to discover there were two major issues affecting OilSandsToday.ca: visual design and performance.
The first user problem: visual design
As with many websites designed for large screens, OilSandsToday.ca was difficult to use on a hand-held device.
When the page loaded, it appeared in a zoomed out view. You could see the overall structure of the page but both the navigation and content were illegibly small. You had to zoom in before you could do anything useful and as you moved through the page you were forced to constantly scroll, pan and zoom in and out, resulting in a disjointed and difficult reading experience.
These are exactly the issues our light-responsive approach addresses.
After a meeting with the client to describe our approach, we moved on to the design phase and began to examine how we could transform their existing layout for mobile users.
A mock-up tackled the two most common mobile design issues: page layout and navigation.
The site page was collapsed down to a single column. This created enough space for properly sized text and easy-to-read line lengths.
Secondary content, which normally appeared on the right, was moved below the main content.
The page header was cleaned up and elements such as the utility navigation and social icons (Facebook, Twitter, YouTube, etc.) were moved to the footer while the logo remained in the top left.
Finally all our navigation elements were compressed and hidden inside a ‘menu’ button represented by an image showing a stack of items, the commonly seen ‘hamburger’ icon.
One major visual element you will notice missing on a mobile device is the banner. In desktop view, each page has a large image at the top to introduce the content. During the design phase, the client and our team agreed that for mobile devices, at least for the meantime, the banner could be removed. This would maintain the existing authoring experience and save CAPP from having to produce mobile versions of each banner.
The second user problem: performance
Aside from the layout issues, the site took a long time to load on a mobile device. In our tests, the first page could take anywhere from 7 to 30 seconds to appear. That is a far cry from the common industry target of 1 second or less. These slow load times were likely the biggest reasons why visitors left the site so quickly.
If a page doesn't load right away, it feels broken and most users will simply abandon ship. In our experience and as seen in outside research, people have very little patience for slow websites—especially when using a mobile device.
Unfortunately, performance problems are not as easy to solve as layout issues. There are many factors that can cause websites to run slowly, but after some analysis, we identified two key culprits holding back OilSandsToday.ca: oversized banner images and unneeded resources.
Banner images were not compressed properly, which meant file sizes were much bigger than they needed to be—even for a desktop view. Based on our recommendations, the client was able to fix this problem themselves, improving load times across the board.
However, as we'd decided not to show the banner at all on mobile devices we didn't simply want an improved file size; we wanted no file at all. Our new CSS hid the banner but that didn't prevent the browser from downloading it. While it may be hidden initially, as far as the browser knows, it could be slated for an appearance at any time so it is still retrieved.
Solving our performance issues
In order to solve these problems, we used a tool called MobifyJS. MobifyJS enabled us to capture and manipulate the page on-the-fly before any of our problematic extra resources were downloaded.
If you aren't familiar with the ins and outs of web development, you've probably never heard of the Document Object Model (DOM). Think of it as a table-of-contents and our web page as the book. Unfortunately, in our case the DOM lists a bunch of ‘chapters’ or resources that we don't need.
With CSS we can hide resources but this is the equivalent of whiting out the extra chapters; you can't see the words but the book is just as heavy. With MobifyJS we can rip those pages out and give the browser a much lighter volume, thereby reducing load times and bandwidth requirements.
decrease in server requests
decrease in page size
decrease in page load times
The result of all our changes is a new average load time of 1 second or less per page, a huge improvement over the 7-30 second times seen before.
If we were rebuilding the OilSandsToday.ca site from scratch, these problems could be solved with a new technical architecture. However, this project was not a rebuild and in keeping with the light-responsive approach, we only wanted to layer additions on top of what already existed. That is why MobifyJS was the perfect tool for us.
In many ways OilSandsToday.ca was a typical website in that when it was designed, there were few considerations for mobile users. With a relatively small budget and a limited timeline, we managed to significantly improve the mobile user experience.
Instead of the frustration caused by slow pages and challenging pinch‘n’zoom interactions, users are now able to quickly and easily explore all of the site's content on a much broader range of devices.