Friday, 15 August 2014

Responsive Design in Learning Technologies

Once upon a time web pages on your phone were rubbish.  Back in the days when phone screens were smaller than watch screens (no this has nothing to do with the new Apple watches about to hit the market) the only way to go ‘online’ would have been to use WAP pages which were text based and only a few lines long because scrolling was something that involved awkwardly clicking down the page.  Then came the iPhone and the world would never be the same again.  Scrolling became far more natural and the screen sizes grew and grew.  Then tablets came along and gave you a slightly smaller version of a desktop and things went crazy.  Significantly more people now access the internet from mobile devices than they do from desktops or laptops and we think nothing of switching from one device to another to another.  Initially we were able to accomplish this through the clever use of zooming on these mobile devices so that we could zoom into a web page and make it big enough to work with and then back out to get the overall picture, but really that meant the experience wasn’t always that great.

We then went further and produced mobile views so that you saw a totally different screen on a phone to a tablet to a computer - each optimised for the typical size of screen.  The limitations were that everything had to be done at least two or three times over - or at least contain multiple lines in HTML code to account for this.  For those of you not in the know already Responsive Design was a breath of fresh air and instead of redesigning the look and feel based upon the device it meant you design one look - but that it changes based upon the resolution of the screen (or size if you will).  That means that your web page is cleverly designed to scale to move around images to give you a great experience on all devices without the need for device detection and multiple pages for the same thing.  Look at the example below - it shows the same webpage with different resolutions to get an idea of what I mean.


Great.  But this was initially limited to websites or HTML and where does that leave us in the learning technologies world?  Well, the potential was and is immense for us, because learning, like every other facet of life these days, is becoming increasingly mobile.  The problem isn’t that responsive design can’t be achieved, it’s that not many people are actually doing it - and some don’t even know what it is let alone how to do it.  At Kineo we’re kind of lucky, we’ve been pioneering responsive design for some time and if you’re engaging with us it will come up in the discussion if you’re planning your content.  There’s more to technologies than content though, there’s also the systems they sit on and the tools we use to create content.

Those who read my ramblings regularly (you poor souls) will now that I work principally with Totara LMS and Moodle.  I love the way Totara in particular has embraced responsive design and out the box you get a responsive design theme builder for your LMS.  This is not just good news but is fantastic news for organisations who have learners (and trainers etc) who are mobile and want to access their devices on the go.  It means you can theme your sites to look great on a desktop for that corporate look but not at the expense of those users who are mobile.  It may not seem that much of a big deal to you, but remember that an LMS is a system (it’s in the acronym but you’d be amazed how many times I need to remind people) not just a web-page (or series of them).  That means making a system with numerous menus and sub-parts all responsive is no small feat, but it works and the end result is really cool - let me know if you want to see a demo in action!

The problem is not now that the LMS is responsive it’s that you still get the option to put things on it - and they’re not necessarily responsive and can ruin your look and feel.  The most likely issue is that you’ll bring in images into course or page design that aren’t designed the same way.  If you do this very quickly your responsive design will not have the effects you want with cut off images or the menus and everything else being forced into a smaller space.  The key to working with this for images is to use a little bit of html or css styling.  One of the best ways is to size your images by width or height and percentage.  I often put images at 100% width and then they take up the space required changing height as they go - again hit me up if you need some guidance on how to do this.  But the bigger problem still comes from your ‘content’.  I’ve already mentioned that speaking to your elearning provider about responsive design these days is a must, but what about the thousands of you (most who never read my blog of course!) that use rapid tools to produce your elearning?

Rapid tools are great and I’m a big fan of them for helping to unlock the potential of internal teams to produce elearning.  I’m a particular fan of the way Storyline has engaged with the concept of scenario based training.  But the issue comes that tools like Storyline and Captivate aren’t yet at the place they need to be around responsive design… and some of that is the mobile world’s fault.  That seems ironic, but back in the day when you put all your content out to Flash it was easy to resize everything because Flash player did that automatically for you so effectively it was already responsive.  Flash died (you knew that right?) when mobile devices by a certain big(gest) player weren’t able to play Flash files and movies and a new solution was sought.  Now your rapid programmes output in HTML5 which allows you to run them on tablets and mobiles regardless of the brand - but not all HTML5 is created equal and lots of the time we’re predefining screen size when we write the learning.  That’s madness because what we should have learnt from rapid design is that screen size is going to change depending upon the device or screen resolution.  The solution is in the HTML and if you have the abilities to go and tweak everything yourself you can still achieve that responsive aim.  If not, it’s a step backwards - what’s the point in a responsive system around content that doesn’t sit well in it.  The good news is the tools providers are on the case and we’re starting to get fixes on things like Storyline to stop some of the early issues with fitting content to the page on mobile devices.

And if you love the Open Source world then let's go a little further.  If you haven't already heard of Adapt then that's worth a look too!  An open source authoring tool that won't cost you a bean and produce responsive design - that's got to be the right direction! The link here will take you there and even the community page is responsive so you get a pretty good test drive of how it looks  https://community.adaptlearning.org/. 

The future is that responsive design will just be a given I hope.  In the meantime think about the benefits of a mobile world, think about your end users and what they may be using and where they may be doing their learning and make your LMS and your content fit with their world.