Barry McGee, one of the developers working on our site, explains how and why the team is building the FutureLearn site using Mobile First, Responsive Web Design.
Mobile device usage is exploding. Industry stats suggest that mobile usage is roughly 25%, and this figure is significantly larger in developing countries. The BBC News website recently reported that they had more mobile users in a single day than desktop users, which is a significant milestone.
We have to accept that we can no longer predict where our learners will use our product or indeed on what device, so we need to build it in such a way that it can cater for a wide variety of users, in a wide variety of contexts.
At FutureLearn, we readily accept this challenge and have built the website using Mobile First, Responsive Web Design. This sounds very wordy I know, but it simply means that FutureLearn will be optimised for whatever web-enabled device you choose to use it on, starting with the least capable devices and scaling upwards.
There are several key tenets to this approach and the benefits are myriad;
Ease of use
Our users browsing on mobile phones will obviously have less screen real estate available to them than those sitting at home on their desktop computer.
Our website can detect your screen width and will adapt the layout to best fit the screen space available.
The pages will also detect and adapt to other variables, such as if the user is using a touch-enabled device. If so, we can make the link areas larger as fingers are typically not as accurate as mouse pointers.
A consistent experience
Not so long ago, it was the norm to create two different website – a mobile website and a desktop website.
Typically, the user experience between these two sites differed vastly as a web developer tried to second-guess what a user wanted to see. Wild assumptions were made; if you were on a mobile device you were also running for a bus, right?
As user research then confirmed, web developers should not make such assumptions. Users were just as likely to be browsing on their mobile from their couch as they were to be sitting in a cafe on their laptop with a flaky WiFi connection, therefore you may well have a better internet connection when using your phone than when using a laptop.
Building using Responsive Web Design means you experience the same website, regardless of your device. It may look and act a little different to make the most of your device features, but you should have a consistent user experience using your phone, tablet or desktop.
By building our product Mobile First, we start by making sure core content is available across all devices and to all users. We then build on this firm foundation, and layer functionality and interactivity to those devices that can support it.
This means that less capable devices only get the experience they can handle within appropriate performance thresholds. We know from our research that our users want the platform to be fast, and fast everywhere.
Users won’t accept anything less and who can blame them? It’s no fun waiting around for the internet to load.
As the Open University has long supported less able users, we at FutureLearn are also committed to making our product as accessible as possible. This includes those using screen readers and other assistive technologies, such as cognitive aids.
We achieve this by writing standards compliant HTML markup and maintaining a clean separation of concerns between structure, style and interactivity so that screen readers and other such aids can easily consume our content to help our less able users.
We can’t make our product future proof as who knows what the most popular mobile browsing device will be in two years’ time. But what we can do is build our web pages in such a way that they will scale and grow to fit whatever comes along.
The techniques and best practices of Responsive Web Design are still evolving, but in using an Agile development process, we are building the FutureLearn platform to ensure it is a delightful environment in which to learn, regardless of where you are or what you’re using.