Written by Saffron Interactive developer Sarika Rekhi.
A few days back I was browsing my favourite website on my sister’s new smartphone. Even though I made sure that 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 difference that just a small impediment like this makes to the overall user experience is huge. Rather than try and force a square peg into 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 this when we are 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; and
- Not all browsers (i.e. IE) support CSS3.
For those interested in exploring the topic in more depth, check out the following resources:
One Response
Reponasive web design
Really responsive web design are really very helpful to improve website ranking and traffic. If you want to get more and more traffic to website than make your website design responsive so user can easily come to your website.
______________________________________
Get Web design services in UK