Different faces of a single learning experience: Responsive Design

In his post, “Accessibility trumps design”, Reuben Tozman made the case that, when designing for mobile, content should be “mobilized” by first making it understood by mobile devices. He argued that we need to develop the same content for desktop and mobile, but that content should be optimized by structuring it in a way that lets mobile technologies take advantage of certain pieces of that content that regular browsers ignore.

When properly designed, the same content has the ability not only to be understood but also optimized in different contexts. In Tozman´s words, “our challenge as instructional designers is to ensure that people can access what they need with the least amount of hurdles in their way, regardless of the platform they use. The priority is creating content that is malleable to the context that is being delivered in and accessible to the person needing it in the way he/she wants it.” 

So, how can we overcome constraints inherent to the different contexts where our content is being viewed in? How can our learning content optimize itself for the varied browsers and devices that access it? How can we make the most of our design to completely fulfill the learner´s expectations regardless of the learning environment?

Responsive design is the answer. Responsive design principles allow us to “create a design that can adapt to the constraints of the browser window or device that renders it, a design that almost responds to the user´s needs (Ethan Marcotte, 2011:9).”

The Basics of Responsive Design

It takes three core ingredients to create a responsive design: (i) a flexible, grid-based layout, (ii) flexible images and media, and (iii) media queries. A flexible foundation will adjust our content to devices that haven´t even been imagined yet and media queries constitute “an incredibly robust mechanism for identifying not only types of media, but for actually inspecting the physical characteristics of the devices and browser that render our content (Ethan Marcotte, 2011:74).”

These ingredients ensure that design is as portable and accessible as possible, which allow us to fully tailor our content to cater for our user´s immediate needs and information access environment as well as to “provide a high level of continuity between different contexts (Ethan Marcotte, 2011:107).” This is also in accordance with mLearning analyst RJ Jacquez ´s insightful comments about the need of “developing a multiscreen strategy that will make our content accessible anywhere, especially as learners acquire more devices and begin expecting that their ‘learning’ follows them as they shift between devices.”

Fig. 1. A flexible, grid-based layout will adapt our content to respond to different devices.
Fig. 2. Responsive design principles make our content resilient to screen resolution changes.
Fig. 3. Demo created as part of a device-independent design strategy.

This type of innovative flexibility in our design allows us to create solutions that can better respond to changes in browsers characteristics and device resolutions and therefore, they can better respond to the learner´s needs on and beyond the desktop.

Privacy Preference Center

%d bloggers like this: