A few days back I was browsing my favourite website on my sister’s new smartphone. Even though I made sure I was accessing the mobile version of the site, I still wasn’t able to see content I could see when browsing the same site on my PC.

The impact on the user experience that just a small impediment like this makes is huge. Rather than try and force a square peg fit in a round hole, when something isn’t compatible, we prefer to leave.

So are you providing the right shaped space for your learners? Mashable has already declared 2013 as a responsive web design year, and rightly so: responsive web design for e-learning courses is something of a specialty at Saffron Interactive!

The basic idea is that all the hard work of designers and developers doesn’t get messed up when viewed on devices with different screen resolutions. This is becoming easier and easier because of the advent of CSS3 and its design techniques such as fluid grid layouts, media queries and flexible images. Media queries are used to figure out what resolution of device is being used by the user while flexible images and fluid grids then resize correctly to fit with the screen accordingly.

Ethan Marcotte was the person who coined the term “Responsive Web Design” in 2010 on his “A book apart” website. Since then many of the best projects have been developed using his Responsive Web Design techniques. Some of my favourite sites that use this approach include:

So how do we apply these ideas when we’re developing e-learning? Before you start designing courses or portals according to responsive web design (RWD) principles, there are a few technical things you need to consider:

  1. Most mobile devices are not compatible with CSS media queries.
  2. As RWD works on image resizing, the full image is downloaded on a user’s device and then resized to fit the screen, potentially taking time and impacting on performance.
  3. Though RWD aims to resize content for any device, there still will be few devices out there that won’t give 100% optimized user experience due to unusual resolutions.
  4. Not all browsers (i.e. Internet Explorer) support CSS3.

For those interested in exploring the topic in more depth, check out the following resources:

Share, bookmark, add Bookmark and Share

Tags: , , , , ,

This article was written on Friday, April 26th, 2013 by Sarika Rekhi

Category: Blog
RSS feed: RSS 2.0

You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply




How can we help

Click here to download a handy PDF about who we are and what we do.

Working for
Saffron

Click here to find out more about jobs at Saffron.

t: 020 7651 4960
e: info@saffroninteractive.com

Or click here to use our online form.