Content Development

Educational Content used to be an easy equation. Put 10 Chapters into one Text Book delivered in 1 Format. Then along came computer labs on campus, again an easy situation for content delivery when you have everybody accessing the same computer device with the same operating system and browser at one onsite location. Oh how things have changed! We now have an increased ability and/or habit, of putting our course content into online spaces. Coupled with the popularity of all things E-learning (most popular with some educators not necessarily the learners I should add), is the ever rapidly expanding variety of devices, operating systems and browsers amongst learners. So let's talk about the new challenges facing Digital Content Development because you can no longer design content for one delivery point. But no need to rush anything, I don't like the term 'Rapid E-learning'. Try thoughtful, effective, well formed, intelligent, relevant, elegant, sensible, beautiful: almost anything but the term 'Rapid' when talking about creating meaningful and effective learning experiences.

Be careful of 'easy'

First of all I've learnt to be on high alert of people using the word 'easy' when discussing E-learning development projects. As soon as someone says that something is 'easy' they have decided to simplify how a problem is analysed, understood and how we approach the challenge at hand. Content development in the digital age is complicated and should be treated with the respect that complex problems deserve. I'm not saying don't be confident in what you do, but better to approach your next content project (converting file formats, web development, creating an eBook) with a mindset that demands good research, excellent planning, realistic time frames and time for evaluation. Steve Jobs said "Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains." After working on many E-learning projects I can tell you those mountains are real and deserve much respect.

a mountain in the background of a view of the ocean

E-learning Interoperability

I never needed a different radio to listen to different radio stations but it is no longer reasonable to expect our learners to have access to every device/application or browser version that is needed to view today's digital content. Build once for many and, only if you have to, build with secondary content modes in mind. The primary goal should be content that can be accessed by as many devices as possible. Interoperability and also Device Agnostic are what I call 'Useful Buzz Words' that deserve critical consideration, possibly the biggest consideration in digital content creation. Also ask yourself if the content you're building now can be easily transferred to other spaces, systems and Authorwares in the future.

I don't like the term 'Rapid E-learning'. Try thoughtful, effective, well formed, intelligent, relevant, elegant, sensible, beautiful: almost anything but the term 'Rapid' when talking about creating meaningful and effective learning experiences.

BYOD (Bring Your Own Device) culture in both education and the workplace arrived the moment smartphones were perceived as an essential item. The old computer lab model of delivery, where your content was delivered once on the same device, platform and browser, is gone. You may have a 'portable lab' in the form of something like a fleet of iPads which is also a predictable digital environment to build in. In most cases your learners' devices are greatly varied, they are in your learners' pockets and in their homes. You can't control this, so Interoperability is the impossible ideal we should strive for.


Portability relates to the WCAG principle of Robustness, to maximize compatibility with current and future technologies. We need to build content with Portability in mind. Simply, I want to take this learning material and easily move it from where it is now to where I want it to be. Can your course material be moved from your current LMS to the one you're looking at switching to, can you take your training videos from the web to an eBook, can you easily replace a single component or section of your content or do you have to always start from scratch?

It's also about the technology that is coming out next year that will disrupt everything we are doing. Portability is not only about the ability to move digital content from one context to another but it is also about being able to upgrade your digital content to new technologies, contexts and to meet demand as well as new benchmark standards. I can tell you from my experience adapting old E-learning material to new web standards that if you build with Portability in mind you will make it much easier to transition through the next gallop of technology advancements.

I never needed a different radio to listen to different radio stations...

Build for Portability;

  • Make text only versions of your content (eg. Story Boards, Detailed Learning Guides)
  • Keep any legacy files labeled and well organized
  • Be wary of niche media formats and research trends in digital content
  • Keep applications and original files used (not just the output files)
  • Aim for strong modularity of content elements for easy adaption
  • If writing code, keep it clean and clearly documented with inline comments.
two cassett tapes

Templating for Success

Your content is not just the bits your learners read before their exam but everything from the welcome page to the user instructions, assessment questions and the notification emails you send out. Your content design needs consideration at every stage of the learning process.

Design consistency in E-learning is often about reducing the range of fonts, colors and styling tools at your disposal. I often start with just the raw information in front of me but separate it out into separate elements, eg. Text, lists, tables, images, videos, other graphics and menu items. I then ask myself: "How can I have a consistent approach to the way I design the characteristics of each elemen,t but also be consistent to how they will work together in harmony?" There is structure, then there is style and they are separate but integrated all the same. Sound like fun?

Let me walk you through a process of design typical when developing E-learning content;

  1. Let's just say I currently have a folder of content from a teacher and they say they want it turned into an eBook for iPads. First step is I analyse and organise the content to find the modular elements and structure (Topic, Chapter, Headings) and media types (Text, Images, Videos, Links).

  2. Before I touch any Authorware or write any code I use paper and pen to sketch out the positioning of elements on what will be a typical view of the learning object. You need to take note that I am not designing the layout of everything in a learning object at this stage, just starting somewhere, can be anywhere, but you have to start somewhere to tease out what will become your universal design. You can also layout the elements you are working with in a simple mockup tool (Powerpoint is great for this).

  3. I then choose one section, such as a Chapter, to be styled and changed into the new format.
  4. Start at the end point.

    • Images/Video: Layout, Positioning, Padding, Size, Borders, Colour Adjustments or Filters, Masking.
    • Text: Heading Levels, Fonts, Fonts weights, Font Colour, Line Height, Alignment, Columns, Break-out content.
    • Navigation: Titles, Visual Cues, Navigation Structure-Style and Positioning, TOC, Glossaries, Footnotes, References, External Link behavior.


What you build will most likely be 'forked' out to a variety of formats. Having both a browser based version and an offline version of your content is pretty standard these days. If you invest in your templates and a consistent strategy with your design elements then changing your content from one format to another will be 'less' hassle. Did I say beware of 'easy'?

I recommend a Design Approach that is inclusive of a cross device/browser compatible web version of your content built to a HTML5 standard with back compatibility to older browsers if and when required AND an offline option for the learner to download to their device with PDF currently being the most device agnostic file type. I'm sure you're aware that reading PDF on a Mobile device is not a fun-loving experience but it's not the file format's fault.

Tip: Take one of your best PPT presentations, convert it to a PDF, view it on a Mobile Phone. Notice something?

A four quadrant diagram showing digital formats used in offline, online, desktop and mobile scenarios.  PDF works across all situations. PDF is still one of the most universal formats between devices both online and offline.

Longevity and adaptability

You have loaded on an old floppy disk an old educational spelling game you used to love using with students but now you can't find anything that will read a floppy disk. You're not even sure how you could convert this game into a new format. Well every digital 'thing' in E-learning has a shelf life. This situation needs to be managed. First because the technologies to view/access/play the E-learning content go out of date and secondly because the tools to adapt/update/improve the content also go out of date. So when we design content we must also build for longevity and adaptability.

Many times I've had a client hand me a Learning Object and ask me to adapt it only to find out that it has been built with an unknown, mysterious or outdated tool, is wrapped, zipped and compiled into a complex mess of un-editable files and there are no separate design elements or notes to work with to even try and rebuild the project from scratch. If you want to be able to adapt your work in the future, trust me that you need a strict discipline of keeping all assets used to build your work. Some people call this Legacy files but what it looks like in practical terms is things like a separate folder for every image you use, the original Authorware files not just the exported finished products, separate text files and developer notes. It's also about keeping an eye on digital content standards and trends, and having a plan and schedule for maintaining and updating your assets so they don't get left behind. The following factors should be considered in assessing a file format's long-term stability:

  • Both backward compatibility and adopted with emerging standards
  • Is the format only 'niche' or widely used
  • Good metadata support (in open format such as XML)
  • Upgrade cycle is regular and well documented
Francis Kneebone making a coffee i his office

Mobile First

Many online activities are sliding fast to a Mobile First experience, meaning that laptops or desktops are secondary to mobile access if accessed at all. The reality of Mobile First can be seen with social media, online shopping and productivity tools. Mobile is still to this day an afterthought in many E-learning projects and I believe it should be the First thought. It is often thought that learners are not accessing course work on their phones so it is not worth investing in. Can I say that coupled with this belief that students won't access E-learning through mobile devices is the reluctance to actually provide quality mobile access to E-learning. If you build it they will come.

One conclusion I have come to is that to reach the ideal of interoperable E-learning experiences we need to design from the smaller viewport (mobile phone) context upwards. This is becoming a popular design approach with web developers. Mobile First Responsive Web Design is a term created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences.

Starting with mobile first:

  • Allows websites to reach more people (77% of the world's population has a mobile device, 85% of phones sold in 2011 equipped with browser)
  • Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?)
  • Lets designers innovate and take advantage of new technologies (geolocation, touch events and more)

The biggest benefit of the Mobile First approach to content design is that it forces us as educational content designers to get back to making clean, simple, fast-loading and gimmick-free E-learning, as you can only do so much with a small phone screen. There is a strength in limitation you could say, but it is a refining through a process of only leaving what is necessary. Over time this has made for some actual improvements to the UX of the overall experience in many web experiences. I find that the Apps or phone browser versions of Social Networking sites Twitter and Facebook were much better to use than the desktop versions. UX benefits discovered through Mobile Operating Systems and Apps have in turn influenced the function and design of their Desktop counterparts.

Mobile First is a design approach that takes into account first and foremost:

Screen Size - Design for immediate need and design in balance. eg. Navigation less than 4 items deep, Obvious Gestures (for upsize), touch/mouse

Performance - Fast-loading + Pre-loading elements for possibly slow web

Context - The place and time of mobile device use is considered eg. 1 hand/1 eye, Competing Priorities, between A and B

Design in Balance

It's Mobile First, you get that, but this does not mean Mobile Only, we are still working, learning and connecting across a multiple range of devices and so are your learners. So as well as taking a Mobile First approach to design, we need to balance this with Four key design approaches to ensure we meet the best outcome for a world of infinite viewport variety.

screenshot from a website with touch friendly buttons

A. Responsive design

Ethan Marcotte essentially coined the phrase "responsive web design" with his article by that name in "A List Apart" back in May of 2010. In his article, Ethan laid out both the problem that is facing web designers as well as a very specific method for solving it. He called this method "responsive web design," and it included three specific tools.

  • Fluid Grids
  • Flexible Images
  • Media Queries

Since the publication of Marcotte's book, there is a wider range of techniques to enhance Responsive Design, and the term itself is often being used to encompass general mobile friendly approaches to design.

Broader Definition: "Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user's display and the limitations or capabilities of the device."

B. Adaptive design

Taking existing web design and adapting it for different device rendering. Rather than one Responsive piece of content, Adaptive Design goes a step further by specifically designing content uniquely for categories of devices eg. Feature/SmartPhone/Tablet/Desktop. Even the practice of making Responsive Grids can incorporate also having mobile specific templates/functionality to enhance the user experience by considering the unique context, hardware and UI of a mobile learner.

C. Progressive enhancement

Fundamentally this is about starting from the simplest form and working your way out. It is the opposite of 'graceful degradation' which has been a common approach of leaving mobile design as an afterthought to desktop design. By designing content for mobile first we can develop a rich and meaningful mobile learning experience and also enhance the same content for larger screen experiences. Mobile first approaches are also valuable in simplifying the often overloaded layouts of many learning objects and sites.

D. Progressive disclosure

Revealing only what is necessary at the point of need. Many mobile styles for blogs, for example, only show a list of article headings which, when clicked, open up to a full article view. Progressive disclosure is used in broader web design but is particularly useful in making better mobile learning experiences while also getting the most out of larger screen real-estate.

(A-D from the 2012 M-learning Teacher and Trainer Guide NVELS)

6 Quick Tips for Developing Content

  1. Always focus on the learning objectives
  2. Chunk: the content down into small bites
  3. Tell a story: to engage the learners
  4. Use visuals to engage and convey your message
  5. Let them known "What's in it for me?"
  6. Use a variety of media to cater for different learning styles.
- from Matthew Mason, iDesign Training

Break things, invite criticism and start again

The Facebook Head Quarters famously has the words "Move fast and break things" written on its walls to remind employees that the best innovation comes from trying new things, taking risks and not being afraid to create a playful mess in the process. The 'move fast' is about not holding back your creative flow in the process of design, the 'break things' is about not being precious about our work, more than that it's about smashing the design molds of old to see what can be reimagined.

two men looking at phones at a coffee shop

Another framework that relates to this is the concept of PretoTyping (sounds like Proto-Typing) developed by Alberto Savoia in 2009 while he was working at Google as Engineering Director. The idea is closely related to Rapid Proto-Typing within a continuous and as-immediate -as-possible feedback and improvement cycle. An example of this is in the phone application design process. If you're looking for how people will experience your navigation design you can simply and quickly mockup your user interface on paper phone cutouts and let people play with that before you move to the next stage. With E-learning content you don't have to wait until the finished product to start testing. Make mockups, templates, small chunks of your design to immediately test with people and use that feedback to improve your design again and again.

Copyright and MYO Digital Content

My current thinking is that with all the problems and risk associated with digital content copyright, I am getting back into the habit of making my own content. Before you become a Creative Commons expert, which you should, see my five recommended and sequential approaches to copyright;

  1. Don't Assume
  2. Check Licensing
  3. Ask Permission
  4. Build local Stock
  5. Make your own

Why not MYO images for your next project? Most of us know what copyright implies, (sort of); basically you don't use it if you don't have permissions to use it. You can't just grab some image from Google Images and use it as you please. Really? Yes. Really. The biggest culprits of copyright infringement are people like me, that is educators, who in an attempt to get a quick image or video for a presentation or a digital resource just grab what they can find.

a young toddler on a tricycle and his sister with a toy camera

'If it's in the public domain then I can use it', 'As long as I put their name on it I can use it', 'As long as I only use 10% of it', 'As long as I don't sell it'.

These are all false assumptions and popular misinformation. For an excellent detailed summary of attribution see fair use copyright and introduction to using images, but here is what people aren't telling you: It is very difficult to ascertain the original source and owner of any digital asset. Even images purchased online from stock art websites can't be trusted anymore as I can tell you many stories of individuals receiving nasty legal letters for using images they thought were ok at time of purchase. One teacher said a picture of her baby daughter is ranking high on Google images as it was at some point entered into a baby photo competition. As more people reuse this image the harder it will be for her to get this image taken down from the internet. Images like this can even be sold online as at some stage tracing the original source becomes too hard.

It takes more time, it means getting creative, but building a local stock of your team's own creations can also be the unique edge you've been looking for.

Go and...

  1. Collect Data through analytics or surveys on how your learners are accessing your current content. How they receive the content is the basis for making decisions on how you design your content.

  2. Start keeping all your design elements in separate folders. You will thank yourself later when you need to adapt your content. Also keep design notes, even snippets of code and links to reference material. Keep legacy files labeled and organized and design notes to a level of detail that someone two years from now will understand how to adapt your content. That person two years from now will probably be you.

  3. Pretotype! Next time you design something for your learners don't wait until the finished product to test the elements of the product. Move fast and break things. Sketch designs on paper before you go digital, send colleagues unfinished work inviting feedback, be brave and embrace what you can learn by making very important mistakes.

  4. Get in the habit of checking copyright of anything you use. It's a good habit to have. Then get in an even better habit of making your own content. Also create a shared folder(s) somewhere and start a collection of original or approved stock images and other assets for you and your team to use. No more trawling Google Images ok ;)

Next Chapter

Back to Top