Home Blog GoMo Learning: responsive design

GoMo Learning: responsive design

Posted on 24 September 2012, by
GoMo Learning: responsive design

When Epic first decided to invest in mobile learning, it was because we really wanted to make a splash – bringing innovation forward to help our clients deliver learning in the way increasingly expected by their learners. Early on, it was clear to us that we needed to take a different design approach than for traditional e-learning. Not only did this mean deciding which commonly used e-learning interactions (such as different question assets) were suitable for mobile devices, but also how to ensure content could be adapted with minimal effort for existing and yet-to-be-released devices and operating systems.

To tackle this challenge, we called together the Epic design team (those with the most experience analysing client needs and devising the best solution for their requirements) to brainstorm ideas.

Together, the team identified which e-learning functionality would be best suited to learners on the move. It was important that we retained flexibility for individual instructional designers, letting them design screens in different ways for different clients. But it was also crucial that GoMo was smart enough to offer built-in design best practice, allowing a single course to work well across variable devices with minimal effort from designers using the tool (and of course, our clients).

Our solution was to create an intuitive tool that allows authors to lay out courses for a tablet or PC, while automatically reworking large-screen content to work on devices with a smaller screen e.g. smartphones.

When people talk about the challenges of mobile development, one of the key areas of concern is exactly this: the difficulty of designing for a mix of different devices. As an authoring tool, GoMo has many advantages such as flexibility, ease of use and rapid innovation. Version 1.6 has just been released and development is well under way for version 1.7, due for release later this year. But perhaps GoMo’s greatest benefit to our clients is responsive design functionality.

Simply put, responsive design means that content automatically adjusts to fit different screen sizes. While the immediate advantages of this are obvious, the real benefit of responsive design is the long-term one – because GoMo delivers to different screen resolutions, content is future-proofed to work on any range of devices and operating systems – even those which have yet to be released.

While many authoring tools have the ability to output to different devices, these are usually optimised for a particular platform, such as the PC, with output to mobile just ‘tagged on’ as an afterthought due to the market demand for multiple device output. Outputting content to different devices is one thing; outputting content to different devices effectively is another matter altogether.

With new platforms emerging, you will need your content to look great on smartphones, tablets and PCs, all of which have radically different screens. The reason GoMo stands out from the rest is because of this inbuilt responsive design function. Even if a new operating system comes along (such as the upcoming Firefox Mobile OS), you can quickly output GoMo content to work on this new platform, regardless of screen size, shape and orientation. It allows authors to design for several screen-sizes in one go, meaning content looks great and works differently on different devices. But how does it do this?

GoMo’s responsive design works by dividing the potential display area into columns. Authors specify how many columns they wish to work to (generally this will be two, if designing for a tablet or PC). They then place content where they want it to appear in each column. As authors add their content to GoMo, the authoring environment lets them specify where they want particular assets to appear.

For example, for a series of hot images with display text, authors can specify where the display text should appear in relation to the images.

Take this example of a course developed for a tablet device:

Tablet mobile learning

When the hot graphic is selected on the right-hand column, supporting information slides in on the left-hand column.

This tablet looks fairly similar to a PC screen so you can imagine content would appear almost identical as on a PC, but what happens when you view the same content on a device with a smaller screen?

GoMo’s responsive design function automatically detects the screen resolution and re-arranges content to the optimum layout for the smartphone. Below you can see what happens when you view the same content on a smartphone:

Mobile learning on the smartphone

This shows the same course as above, only this time it is displayed in one column on a smartphone. When users select the hot graphic on the smartphone version of the course, supporting information pops up over the text instead of sliding in on the second column.

Obviously, on the device with a smaller screen, users will need to scroll down to access all the content. Most importantly, the layout and the way in which users explore the screen is automatically adapted to work on the display device.

This is just one example of how GoMo uses responsive design across mobile devices. With GoMo’s library of assets always increasing, the opportunity to optimise the same asset across a number of devices and platforms means GoMo is helping us achieve exactly what we set out to do – great learning design across multiple platforms, with minimal effort.

If you’d like to find out more about responsive design or any of GoMo’s other features, email contactus@epiclearninggroup.com or call one of our solutions consultants on +44(0)1273 728686.

 

 

Tags: , , ,

One Comment on “GoMo Learning: responsive design”

Leave a comment

  • (will not be published)

*

LinkedIn logo Twitter logo YouTube logo

© 2014 Epic Performance Improvement Limited

ISO logos

Part of the Learning Technologies Group plc LTG logo