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:
- Most mobile devices are not compatible with CSS media queries.
- 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.
- 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.
- Not all browsers (i.e. Internet Explorer) support CSS3.
For those interested in exploring the topic in more depth, check out the following resources:
