Responsive Web Design: Creating Content for Better User Experience

According to the leading news and information resource site Mashable 2013 is the year of Responsive Web Design (RWD). In technology, ‘Responsive’ means a program, application or website that works on multiple devices and delivers the same viewing experience across all devices without any added effort from the user.

In simple terms, with RWD, the on-screen content automatically changes layout depending on the screen size and resolution it is being displayed on. RWD brings a huge advantage – we can create content that is not only accessible across multiple devices but also appropriately altered for a better viewing experience. Popular websites have been employing this technology to ensure that their viewers get the same clarity when accessing content from smaller devices.

The RWD technology comes in the wake of an overwhelming shift in how we access information. For the first time in almost a decade, PC sales are projected to be on a decline. On the other hand, the popularity of mobile devices, including tablets and smartphones, is skyrocketing. The shift from desktop to mobile is thus perceivable. But with varying devices with different screen resolutions, it becomes increasingly difficult for web developers to make the content compatible with every device and, at the same time, provide a uniform user experience. This is where RWD fills the gap.

How it is done

At the heart of RWD are three key technical features:

• Media queries and media query listeners: Media queries allow the web page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
• A flexible grid-based layout: The fluid grid concept calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels or points.
• Flexible images and media: Through dynamic resizing or CSS, flexible images are sized in relative units – up to 100% – to prevent them from displaying outside their containing element. A full image is downloaded on a user’s device and then resized to fit the screen.

RWD and e-Learning

The advent and popularity of mobile devices has affected the e-Learning industry as well. Mobile learning was just a concept till a few years ago but is now being embraced by all. For developers though, mobile learning has always posed the problem of creating mobile content that is compatible across all user devices. In addition to PCs, tablets and mobile phones, developers had to create different versions of the content for Windows, Android and the Apple systems!

With HTML, mobile content can be created and displayed across all devices – PCs, tablets and mobile phones – and is compatible with different OSs as well. HTML supports responsive design features to create e-content that can be accessed across multiple devices, with equal ease and equally effective visual impact.

The benefits of RWD in e-Learning are many

• There is no longer the need to maintain multiple versions of content. One version caters to all devices, browsers, resolutions and layouts, including PCs, Macintosh computers, tablets, e-book readers, and mobile devices.

• Any program or application update can be done simply by changing the base code, and it will be automatically updated for all devices. Not only does this save precious time and moneys but it also gives room to update the program or application as per the changing needs of the client.
• RWD shuffles content, application layout, images, and font size to adjust according to the screen size of the users’ device. The user can navigate conveniently, without the need to scroll or pan-in or pan-out unnecessarily. User experience is thus smooth and easy – across all viewing devices.

We at G-Cube believe that RWD will bring the change that new-age learners want to see in mobile content. Prominently used to develop websites, we have utilized this technology to develop a variety of mobile-enabled learning solutions.

Recently, we created a mobile-enabled learning course for a leading training organization. The course was created to deliver just-in-time learning for learners in the Travel and Tourism industry. Keeping in mind that the learners are mostly away from their desks and may need to access the courses across a variety of devices – PCs, laptops, tablets and mobile phones – we developed the course in HTML with RWD. The content was rich in design, with images and a lot of audio-visual elements that aligned very well with the new technology employed to develop the course. The user response has been phenomenal, as learners are experiencing the same visual impact they experience on their favorite news or social websites. Navigating the content is smooth and the quality does not reduce as the screen size gets smaller.

With the success of this course, we are looking forward to employing RWD for developing other mobile solutions as well, to cater to the growing number of mobile-learners. To know more about RWD and how to utilize it to create a learner-centric mobile learning solution, write to in**@gc**********.net