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.

8 thoughts on “Different faces of a single learning experience: Responsive Design

  1. Excellent post Mayra! I’m glad to see someone sharing these perspectives with learning community. Responsive design is great, but there are some drawbacks. As long as you’re aware of them and can plan accordingly I think they can be worked around. The biggest issue is with media queries and the fact that mobile browsers actually download all of the different versions of the images. Browsers don’t have a way of delaying the download of images until the proper size of the image in the layout can be determined. This is the bad news with responsive design…the images are not truly responsive in terms of bandwidth and it’s not an easy problem to solve (http://blog.cloudfour.com/how-do-you-pick-responsive-images-breakpoints/). I’ve been following the responsive design and progressive enhancement topics for mobile the past few years and the good news is that there is an established working group to solve the issue of responsive images: http://www.w3.org/community/respimg/

    Oh and for you techie types out there that like these modern web design approaches for mobile, I highly recommend the breaking developments conferences, http://www.bdconf.com

    • Thank you so much for your comments and the resources you have provided, Jason! Very useful, indeed. I completely agree with what you said about RWD´s drawbacks. I understand that every new technology has advantages and downsides too. For this reason, I have started an in-depth research about new possibilities, techniques and tools that can help me design effective mLearning solutions and come up with a desired (better) outcome at the end. Every idea or suggestion is more than welcome to continue in this quest for the utmost (m)learning experience across different devices.

  2. At last someone to raise the responsive design issues!

    When we are talking about learning we have to distinguish between the software and the content. If your content is running over an LMS both content and software need to be designed with responsive design in mind. Creating multiple versions of the same content or having different versions of the same software is simply not economically viable.

    In our case, we decided to use Bootstrap from twitter (http://twitter.github.com/bootstrap/) to support responsive design for our cloud LMS (http://www.talentlms.com). Bootstrap let our software and basic content adjust to big screens, medium screens, ipad or mobile devices easily.

    • Thanks for sharing your thoughts and experience with me! I really appreciate your feedback and I am looking forward to trying myself your LMS. It´s great to know that some vendors are adopting new technologies and taking learning initiatives to the next level.

  3. Pingback: Exploring GoMo for #mLearning design | "Creative Design of Learning Experiences"

  4. Very good explanation of a complex technology. Since we are on a blog dedicated to Learning Experience I am surprised that contents is still the dominant concern. Chunking the contents, structuring, prioritizing this is all fine and common to the concerns of any web designer. Say if you write a blog using WordPress, you adopt a responsive template it’s not enough. You will still have to make sure your posts are not too long.

    There is another challenge in the learning experience. Imagine you have some contents followed by some interaction. For learners on a large media questions will be presented while the course is stil visible, questions will all be visible. For the one on a small tiny media he might to scroll back and forth to review his lesson and struggle to scroll back to the exact question. I imagine the learner standing in crowded bus during a long commuting. In this case it becomes patent that there is an inequality of the experience that has to be addressed. Isn’t it that we may have to come out with a different chuncking of lessons, a different length of lessons, to accomodate a responsive learning experience on top of the responsive web design. In this last case the media queries could have to be supported by the LMS itself. To make it easy the user eventually reaches home and continue her lesson on a desktop (complementarity).

    • Exactly! Responsive designs can involve the learner doing lots of scrolling on mobile devices – 1) to find their ‘place’ in a piece of learning and 2) to access the navigation/menu. It can be very frustrating.

  5. Pingback: Prototyping the new UX design | Personal Knowledge Management with Kneaver

Please, share your thoughts!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s