Float Mobile Learning newsletter - Who moved my cheese?

Who Moved My Cheese… Again?

March 2013 Newsletter

Mobile Development, Newsletter Comments (4)

Getting Responsive In Our Multiscreen Learning Design Efforts

If you have been following the Web design community, you would likely be very familiar with a term called “responsive Web design,” sometimes abbreviated as RWD.

The term “responsive Web design” was coined in 2011 by A List Apart blogger, Ethan Marcotte, in his landmark post, Responsive Web Design (of course). This technique is both a design technique and a development tactic aimed at streamlining content production, graphic design work, and overall Web development workload.

This technique seems to have caught almost everybody in the eLearning industry off-guard. While we were largely concerned with the “When will Apple support Flash on iPad?” argument, someone moved the cheese. Surprise: it was our audience that moved it. They decided that battles over plugins weren’t anything they needed to be involved in and just started using content that worked on their devices. All of them. We gnashed our teeth and really had a hard time with it. Now that the world has seemingly moved on, it’s time for us in the learning industry to get over it and get back to creating for them.

This month’s newsletter will help show you how to get started with responsive design, but more importantly, why we should be thinking about it, and why learning the underlying technologies and standards behind any toolkit will take you far.

Diving Into Responsive Design

From Ethan’s article:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’

– John Allsopp, “A Dao of Web Design

The mechanics of it are deceptively simple. It really hinges around a CSS3 technique (commonly lumped in with HTML5), “CSS media queries.” These media queries look a bit like this (Pardon our CSS geekery here. It will be over soon, so don’t go anywhere):

@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}

Those queries were taken from here. In the query depicted, devices with a maximum screen width of 480px or less will have the styles following the declaration applied to the content in the browser viewport.

Pretty simple, really. The basic gist is that you create a “query” that, given a particular, the Web browser’s capabilities and specifications, renders the according to styling information to ensure the site looks and *hopefully* behaves properly.

Beyond the implementation of the technique, though, there are some things that you should consider as you assess what it means for us in the learning industry.

  1. It’s evidence of the fact that we need to be more cognizant of standards and specification of the broader industry – like it or not, we are Web designers, developers, and DevOps people, not just instructional designers, cognitive scientists and trainers. We may be more focused on organizational performance than we are getting people to like us on Facebook or sign up for a newsletter – but that doesn’t mean we can’t steal their tactics to help us achieve our goals.
  2. Your tools are meaningless (or at least much less meaningful than they were). Throw them away and learn what makes the Web work. Web standards aren’t a new thing, and neither is the first draft of the SCORM standard (in fact, they nearly correlate exactly in terms of acceptance), yet we have put up with tools that output substandard markup and junk for far too long in the name of a niche spec (SCORM). Moral of the story: Learn standards, not tools. If you must center around a tool, use one that outputs valid, sensible, standards-compliant markup and uses proper JavaScript and CSS in its output.
  3. If a “little” wrinkle, such as not getting a plug-in to be accepted on a new device or platform ends in a stalemate for an entire industry for more than two years, doesn’t that signal the fact that we have been more than just a bit myopic in our view of what tools offer us? I mean, the Web design world got on just fine after Flash flamed out. Why has it taken two-plus years for major vendors in this space to give us alternatives? The likely answer: limited resources for over-stressed development teams, and overdependence on a toolchain that required a proprietary plugin at all the vendors we depend on. You would have thought Authorware’s demise would have taught us all a valuable lesson, but here it is: 2013, and many of us have egg on our face yet again.
  4. Templates and starter kits are not adequate. The bottom line is that technology marches on. Get with the program and learn how technology advances, or face the consequences. Any vendor’s starter kits or templates are likely to be behind where the rest of the Web industry actually is. Learn the underlying technologies (HTML, CSS, JavaScript) and you can then use whatever tool you buy later.
  5. Making standards-compliant markup compatible with LMS and LRS is much much easier than taking learning tools output and trying to make it Web standards-friendly. We’ve been getting it backward for years.

This missive isn’t meant to be all doom and gloom. A number of people in the industry are starting to get it and do the right thing. Obviously, Float has been producing multiscreen and mobile learning from our very beginning. Our Tappestry work is a great example of that (It uses responsive design and a Web service layer to power apps and Web browsers alike). However, a few others are also contributing. Producing valuable content isn’t easy, regardless of what camp you fall in, but Kineo’s framework, Adapt, looks promising. Cammy Bean has blogged on the topic here. You can also check out some slides from them here. Additionally, Illumen Group seems to be doing some good work here, as well.

In addition to private industry taking note, it’s clear that the government is listening, as well. Significant moves have been made to ensure that Web properties are moving to responsive design. With the U.S. Departments of Defense, Energy, Education, and more being such huge consumers of training, won’t that eventually require our learning information to be responsive, as well?

Regardless of the initial uptake and response, it’s clear that something has to change. No longer can we go on creating content for a proprietary or non-scalable plugin or renderer and consider it future-proof.

Get on the standards bandwagon, or you’ll be wondering who moved your cheese again the next time.

If you need help, feel free to schedule an introductory consulting session with someone from the Float team.





Coming Up at Learning Solutions 2013: Repurposing Your eLearning Solutions for Mobile Without the Easy Button

As your learners become mobile, you’ve realized you need to provide your eLearning content in new ways. Simply porting that content over to mobile is possible. However, in our experience, that approach is almost certainly doomed to failure. “The search for the eLearning-to-mLearning-conversion easy button is a fool’s errand,” Chad says in his book, Learning Everywhere.

Chad will be in Orlando at Learning Solutions later this month to present a session on how to repurpose your eLearning solutions for mobile without the easy button. Reserve the 10:45-11:45 a.m. time slot on your schedule for Thursday, March 14, to be a part of this great session.

Follow Float
The following two tabs change content below.
Chad Udell is the Managing Partner, strategy and new product development, at Float. There he leads his design and development teams to successful outcomes and award-winning work via a strong background in both disciplines and a singular focus on quality. He has worked with industry-leading Fortune 500 companies and government agencies to design and develop experiences for 20 years. Chad is recognized as an expert in mobile design and development, and he speaks regularly at national and international events and conferences on related topics. Chad is author of Learning Everywhere: How Mobile Content Strategies Are Transforming Training and co-editor and chapter author, with Gary Woodill, of Mastering Mobile Learning: Tips and Techniques for Success. His newest book, Shock of the New, co-authored with Gary Woodill was released in April of 2019.

» Mobile Development, Newsletter » Who Moved My Cheese… Again?
On March 11, 2013
By
, , ,

4 Responses to Who Moved My Cheese… Again?

  1. amen, especially to #2 and #3.

  2. Steve says:

    Yes! One of the problems I don’t see folks point out much is the default expectation (dogma) that throws up a barrier to progress in e-learning stuff. From developers to stakeholders to “learners” (people we serve), we’ve conditioned folks to expect packaging in a single flavor. The slide-based package is the norm. I’m not saying that slides are always bad. But slides are bad if it’s the only strategy or method we ever use.

    A couple of years back, I threw together a concept for responsive topics. This version didn’t go anywhere since folks looked at it funny (“what’s that? That’s not e-learning…”) –
    http://www.xpconcept.com/AT_framework/index.html

    I’ve since started to revise it with some simplifications of markup and enhancements, testing a few available libraries. In doing so, I’ve found some pretty keen tools that can take basic, clean markup and enable a variety of (potentially personalized) views of an experience. From Bret Victor’s Tangle to Julie Bellinson’s SlickQuiz, there are lots of opportunities to build out an experience flow that provides what folks need, when they need it — all in relatively universal (IE8 or older excepted) enhanced markup.

    I’d love for the community to come together and produce some exemplars / share experiences. Philip has provided one of the components that I use often in custom assemblies. As xAPI firms up, I see no reason that a package couldn’t adapt not only to the user’s needs and preferences but to the technology used to integrate it.

  3. It’s so encouraging to hear from others who not only understand our audience “moved the cheese,” but also clearly see the web standards alternatives (like responsive design). No coincidence that I count Chad, Phillip, and Steve in that group. Keep up the good work guys.

  4. Patrick Grey says:

    Great timing! I’m currently reviewing a (well known) LCMS for a client. The development interface only works in IE! The ‘Mobile Learning Pages’ it produces include: layout using tables, styles hard coded onto tags, font sizes in px etc, etc… At least they got rid of the multiple framesets they are using for desktop modules.

    It is so reassuring to hear other learning developers talk about standards-based development. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

« »