A short guide to responsive web design for L&D people
Mobile web usage now accounts for 60% of time spent online. In the past, mobile devices were seen as having potential only for just-in-time performance support. Mobile learning was seen as complex. Google searches now show mobile optimised results first, literally boosting the results of mobile-optimised content. As the use of the mobile web is increasing in our personal life it’s now expected that all our learning experiences will work on mobile devices.
There are two approaches to developing content that is optimised for mobiles and tablets.
-
Developing different mobile versions. With most websites this is often possible because the site is managed from a content management system. The mobile-optimised version literally just pulls content out of the database and then displays it in a different format for mobiles. But this database-driven approach is not a common way to develop digital learning. Developing a mobile-optimised version of a digital learning experience usually means you need to develop both a version for mobiles and another for use on a desktop. This can be time consuming.
-
Using a responsive web design approach. With responsive web design the content is the same for desktop, tablets and mobiles, but the styles that are shown are different. Responsive web design for learning is the focus of the rest of this blog.
Great digital learning is not like the rest of the web, which is just text and images and some media. Great digital learning is a lot more interactive. It is more like a web application such as Facebook than a news site. This makes responsive design for digital learning rather difficult. It needs to be planned from the very first stages of the project. It's both a technical and an interface problem. You need to be clear about the requirements for a responsive design approach and design and test with mobile devices.
Responsive design is all about breakpoints
Responsive design doesn’t mean that a learning resource will work at all screen sizes. As the width of a web browser changes so the design changes. With responsive design the styles applied are optimised for different viewpoints. These widths are often called breakpoints.
|
Mobile |
Tablet |
Desktop |
|
|
Breakpoint |
480px |
768px |
992px |
|
Show icon/graphic of a mobile |
Show icon/graphic of a table |
Show icon/graphic of a desktop computer |
|
|
Often, learning experiences that are designed to work on desktop will also work on tablets. |
|
If a webpage has been set up to be responsive you can simulate what it might look like on a mobile phone by resizing the browser to be thinner (e.g. less than 480px). As an example, you should be able to resize this blog page and see how the menu changes.
What happens is that the content remains the same but different visual styles are being displayed. To be more precise, different Cascading Style Sheet (CSS) styles are being applied depending on the width of the window.
If your organisation is using particular mobile or tablet devices it might be worth making sure the breakpoints that are being used for your digital learning project align with the screen sizes your employees are using.
A simple example of responsive design
A more complex example of responsive design
This is a graphical hotspot interface about time management that is built around a calendar interface. It won’t work well on a mobile phone. A mobile just doesn’t have enough screen real estate. The content in both versions is exactly the same. On the desktop version it's a list of images that are shown at exact places over the top of an image, while on a mobile it's the same list but the background image and images on each list item are hidden. Also, the styles that control the exact placement of the hotspots have been removed.
Responsive design is a different way of designing and thinking
Instead of thinking about an element’s need to be placed exactly at a set x and y position, you need to decide whether, for example, the element could be shown on the left, or instead fit under the previous element. It means thinking about your visual designs as a system, and not worrying about the exact placement of elements.
What responsive design doesn't mean
Responsive design is about focusing on optimising for breakpoints. This doesn't mean that it will work perfectly on all browser widths. Some people confuse responsive design with fluid design, but fluid design is where elements resize when the browser width changes. Responsive designs don’t have to be fluid – but the approaches are commonly used together.
The mobile version still needs to be planned
Responsive design doesn’t mean that it will automatically work on mobile devices. The mobile version still needs to planned and tested. At Sprout Labs, when we work on projects that need a responsive design approach we have often found that we need to author one activity for desktop and an alternative one for mobile. This is especially the case for content such as infographics or activities such as drag and drops; many of these need more screen space than is available on a mobile.
Scrolling pages are the natural interface for mobile devices
Some slide-based authoring environments have attempted responsive design approaches. With Rise, Articulate built it from the ground up based on approaches that are more like web design than PowerPoint. Rise is based around scrolling pages. The natural interface on touch devices is to scroll. Most of the time we interact on the web we scroll content, we do not click forward and next buttons.
Sprout Labs’ own cloud-based authoring system Glasshouse is built around scrolling pages. We often have organisations come to us that are new to digital learning and expect a slide-based approach but they also want the same resource to work on mobile devices. It’s faster and easier to just using a scrolling page approach for both desktop and mobile devices. Yes, it looks different to most elearning you might have seen in the past, but that elearning might have other issues – for example, is it really just a PowerPoint with a quiz at the end? It is likely content focused, not skills focused.
Authoring digital learning is becoming more like web design
With the move to responsive design approaches, authoring digital learning is becoming more like web design and web development. The next stage of responsive design that the web design community is talking about is responsive experiences, in which the actual content changes depending on the device or the location, or even the time of day the user accesses the site. It will be interesting to see how these approaches can be applied to learning experiences.
If you’d like to learn more about Glasshouse and how Sprout Labs can help you with your mobile learning projects, please get in touch.
