Easing the Bloat! Part 1: Optimizing Your Images

Most CBTs these days include oodles of images to help make the content more visually appealing. While a lot can be said for implementing visuals, here are some tips to help keep the images from bloating your course:

Relevancy
Make sure the images you use are relevant to the information in the course, and not just being thrown in for decoration. Judicious use of images will help you keep the overall number of images in a project down…and keep the overall file size lower.

Remember, one great visual is better than four dull ones.

Image Formats
Use compressed image file formats, such as JPEGs, GIFs, and PNGs as opposed to using BMPs. While most CBT authoring software will automatically compress any attached images during publication, the native file will retain the original…and the original’s file size!

Resizing
Resize your images BEFORE importing them into your course.  Many people will import a large image file into, say, Captivate, and use Captivate’s resizing tool to make the image fit the need. While that will result in a properly sized image, you still have all the file size overhead of the original image.

It’s much better to use Photoshop (or other image editing tool) to resize an image before importing it into your authoring tool. This way, you have the image size you want, with the smaller file size footprint.

Believe me, just using this technique can reduce the overall size of your projects pretty dramatically.

Image quality:
Image editing tools, such as Photoshop, allow you to change an image’s inherent quality. This means that you can ‘downgrade’ an image’s resolution. While this may sound bad, in practice, a downgraded image can look nearly as good as the original with a drastically reduced file size.

Here is an example of a very complex JPEG image that I downgraded:

 

 

 

 

 

As you can see, there really isn’t a big difference in the quality of the image, but the image on the left is almost FIVE times as large as the image on the right.

BTW, by both RESIZING and changing the IMAGE QUALITY in Photoshop, I was able to reduce the file size of the original image (which was 1749kb) down to only 116kb!

By using these techniques together over an entire course, you will dramatically optimize it. Your course will play better, you’ll have less storage needs, and your end users will have a better experience.

Next up… Part 2: Optimizing Your Audio

That Bloated CBT Feeling

None of us likes feeling bloated.

Whether it’s after a big Thanksgiving dinner or an undisciplined evening at an all-you-can-eat Chinese buffet… that bloated feeling is our body’s way of telling us we simply ate too much…and it’s uncomfortable.

Bloating can also affect and impair your CBTs.

Now, what does a “bloated CBT” look like? It’s a course where care has not been taken to keep the file size as small as possible. Where the designer has used inefficient methods to build their course when better, more optimized, approaches could have been chosen.

Bloating affects small CBTs as well as larger courses, and there are consequences for the bloat:

1. Poor performance: eLearning courses, whether taken at work or in the home, are always going to be limited by connection speed or bandwidth (and usually both). You simply can’t force a fire-hydrant of water down a plastic sippy straw. Even in the best environment, larger courses will take longer to download than smaller courses, so keeping your courses as streamlined as possible will result in better overall performance and end-user experiences.
2. Storage needs: As online learning increasingly begins to look and act more like high-end video games, file sizes are beginning to increase astronomically. You need someplace to put all that data, and hard drives and servers can quickly fill up.

The fact is, CBT bloating is incredibly common (both for the seasoned designer and the newbie) and is easy to fix… given just *a little* discipline.

So, how do we bring relief to the CBT bloating problem? Well, that’s something we’re gonna cover in the next series of postings.

Obligatory Baby Post

Ok, everyone, since this is my blog and I can put anything I want on it, here are some pictures of the newest addition to my family…Tristan Augustine Isabella.

He was born Aug. 3^rd (a month early) weighing in at 6lbs 10oz.

This first picture was just a day or so after he was born.

 

 

 

 

 

 

 

 

 

 

 

 

 

Here are some more recent pictures:

 

 

 

 

 

 

 

 

 

 

 

And here is a picture of his older brother, Alexander:

Where Do All Your Ideas Come From?

A couple of days ago, a colleague and I were discussing online learning, and I was coaching her on a few things. One of the questions she asked me was “Where do all your ideas come from?”.

This is a question I receive quite often.

To answer it, I think it’s necessary to break online learning down to its constituent parts. What makes up a training course? What things do you have to consider? Well, there is: Content, page layout, graphic design, training exercises, gaming, consistency, and knowing when online training can solve a problem (and when alternatives are better options).

Now, how can you come up with ideas for all that?

Short Answer
Whenever you do ANYTHING, keep your eyes open, take notes, and consider how your experiences can be translated into an online learning experience.

Ok! Ok! Here’s a Longer Answer…
Let me explain what I mean. I have found that much of my inspiration has come from seeing what other people have done… even when I’m in the most unexpected places (like waiting around in the woman’s store ‘Ulta’… more on this story later).

Remember: If you have a particularly good learning experience, there’s a good chance that it’ll probably translate well into an online learning course.

Over time, if you keep notes, you’ll build a portfolio of ideas that you can use when the next CBT comes up. And it’s GOOD to be proactive here, since you won’t be fumbling around for ideas at the last moment.

So, here are some of the concrete things I do:

Use the Web!
I scour the internet for websites that I think look good ascetically and present information well. I have a ‘Favorites’ folder of these sites that I keep and go back to often to get inspiration. I also take screen prints of particular things I like (such as a neat button, or layout), and paste them into a PowerPoint file I keep for such things.

Here’s an example of a graphic element that I found online that I really liked. It’s at the Food Network’s website, and was an animated menu showing off their TV personalities…

Using the above to spark some ideas, I created my own animated menu for a Privacy Compliance course I built…

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I particularly find that websites that need to present a lot of information in an easy to digest format make for the best sites to do this with, since that’s what we’re often tasked with when building CBTs.

Some of my favorites are car manufactures and software development sites:
http://automobiles.honda.com/
http://www.adobe.com
http://www.microsoft.com

Use Experts!
In the realm of eLearning, you can’t throw a mouse without hitting a dozen people who think they are eLearning or graphic experts. Find ones you can trust! The best ones are also the ones that can turn theoretical ideas into actual courses. That’s why I’m such a fan of the “The Rapid E-Learning Blog” by Tom Kuhlmann. http://www.articulate.com/rapid-elearning/

One of my other favorites is Robin Williams (no, not that Robin Williams). This Robin Williams is a professional graphic designer, and several of her books changed the way I approach design.

My favorites are:
The Non-Designer’s Type Book:
A book all about fonts and typography…how cool is that?
The Non-Designer’s Web Book:
The book describes web design principals and gives ample examples.
Design Workshop:
The book is designed to be an all-around course on design. While it’s mainly focused on print design, I still find it very excellent. It’s filled with oodles of graphic design examples.
Web Design Workshop:
Similar to the above, but more geared to web page layouts.

So, go out and find your team of experts!

Borrow from other people’s CBTs!
Every time you take a CBT (especially ones outside your organization), consider it an opportunity to get some ideas for your own courses. Was something done particularly well? Then use a similar idea yourself. Was something done particularly poorly? Ask yourself why it didn’t work, and then avoid that mistake yourself.

Most companies that sell eLearning software usually provide examples of that software on their website.

Captivate:
http://www.adobe.com/products/captivate/?promoid=121DJGSO_P_US_FP2_CP4_MN&tt=P_US_FP2_CP4_MN(Scroll down a little to find the demos)

Presenter:
http://www.articulate.com/products/presenter-demos.php

Toolbook:
http://www.sumtotalsystems.com/resources/toolbook/learn_showcase.html?src=tbhome#22

Flash:
http://www.adobe.com/products/flashplayer/action/

Don’t Ignore Print and non-Computer Stuff
Don’t just limit your search to online content. Keep your eyes open when you watch TV, movies, or see print ads when you’re reading or out shopping. It’s not uncommon for me to use the camera in my phone to take photos of banners or posters that I think are well done when I’m out shopping (or even at Church!).

In fact, a couple of months ago, I was with my wife at her favorite store ‘Ulta’ (here’s that story I mentioned earlier). In between pestering her to go, I noticed that they had a series of posters in the store for some of their products. I thought the layout of the posters were very neat and elegant, and decided to use my camera phone to take pictures of them. I don’t know what the employees thought I was doing (one of them went out of their way to walk by me and give me a ‘hello’), but I ended up with some ideas for laying out a menu page in a forthcoming course.

I’ve also saved shows on my DVR because I liked a graphic in a TV commercial!

Now, It’s Your Turn
Ok, now that I’ve told you where I get my ideas, it’s time for you to chime in to say where you get yours. What methodology do you use to create online content? Are there any resources that you use? Any websites that you really like?

Let me know!

Mobile Learning

One of the hot topics in the eLearning world right now, is the question of how to push training and communications out to people on their cell phones. This is called “mobile learning”.

Seems like it should be a simple enough thing to do (especially with all the wiz-bang phones out there now), but mobile learning is fraught with difficulties.

Here are several of the problems, as I see them:

1.       Even though Smartphones** are starting to become very popular, they aren’t ubiquitous just yet. Most people are still using the standard free or near-free phone that their service provider gave to them. These ‘Dumbphones’ don’t make for a great platform for presenting training, with their relatively small screens, limited capabilities,  and slow processors.

2.       Few Cell Phone companies are using the same operating systems, and several (Apple and Palm, to name a few) have built their own custom operating systems… using very different technologies. Since no one manufacturer’s OS has (yet) cornered the mass-market (like Windows has for the PC), applications built for training must be rebuilt over and over to accommodate each phone OS out there.

3.       Even web-based training has its difficulties. People that have Smartphones, use them in dramatically different ways.,. and the phones themselves can be tailored that way. For example, Blackberries tend to cater to those with business needs (Secure email, file editing) while iPhones cater to multimedia. Even the web browsing environment can be radically different, with some users much more likely to use their phone’s web browser than others.

       (Here are some Mobile Web-Browsing stats from this past March.)

4.       Even the way someone interacts with their phone can be different, with track-balls, physical buttons, and touch screen devices all out on the market right now. Also, different screen sizes can mean a lot too.

Now, with all that said, there is certainly a ton of potential in Mobile Learning. I’d like to use my blog as an opportunity to talk about that potential and get some of your feedback.

To start this discussion, I’m gonna post a series of surveys and see what all of you think. Below are the first two (more to follow in the weeks ahead):

(**A Smartphone is a mobile phone offering advanced capabilities, often with PC-like functionality. – Wikipedia)

If you do have a Smartphone, please answer the next question and post in the comments what you have and your experience with it (positive/negative):

What can the Movie ‘Transformers 2′ Teach Us About eLearning?

Ok, cards on the table here. I loathed the first Transformers movie. I saw the movie for free, and I still felt like I should have gotten money back after it was over.

And, by all accounts, the sequel out now is even worse – if that’s even possible. In fact, it’s the worst reviewed movie of the summer.

Here are the most common complaints by critics I’ve heard:
1) It’s too long and a bit boring. (It runs something like 2.5 hours).
2) The premise is ridiculous.
3) The story is difficult to understand.
4) There is too much going on at the same time….sensory overload.
5) The acting is poor.
6) The script is not very much fun.

Yet, even with all those negatives and mega poor reviews, the movie was the second quickest movie ever to make 200 million dollars and it’s probably going to become one of the top grossing films ever. People not only want to see this movie, but they don’t mind paying and being inconvenienced by long lines to do so.

Now, look over those above complaints again. How many of those criticisms could be made about one of your courses? Be truthful, now…

So, I ask again, just what can “Transformers 2” teach us (other than that men would pay money to see Megan Fox in just about anything, even an airline safety video)?

Here are my thoughts:

A Spoonful of Sugar helps the Medicine Go Down.
First: The movie LOOKS really good. It’s very glossy and the special effects are (supposedly) spectacular.

Even the best of us can sometimes be very superficial. Something that is good-looking can overcome a multitude of compositional sins, and still keep people’s attention. Here’s an eLearning example:

 

 

Which of these buttons is more pleasurable to look at? Which one looks more professional? Which one is more engaging?

OK, without even seeing more of the courses that these buttons are a part of (or even knowing the topic), which one would you rather take: the course with the button on the left, or the course with the button on the right? Do you feel a strong preference? Remember, your answer is based on only knowing what a single button looks like.

I think most people would much rather take a nice-looking course, even if the content in the clunky-looking course was better.

It’s something to really consider when building your training: Presentation truly matters…almost more than the content of the training itself.

Reflection Point: How much time do you put into deciding how your course will look?

More Than Meets the Eye
Second: Although it’s a movie, and – by definition – you can’t interact with it, it still looks like a video game. In fact, “Transformers” and “Transformers 2” may be the movies most similar to a video game experience that have ever been made! And, yet, there is no interaction at all with the film… it’s all in the minds of the viewers. They felt like they had played a game even though they hadn’t…and maybe didn’t even realize it.

This point reminds me of two recent stories.

Story 1:
Two colleagues of mine, Erik and Tricia, recently built a Code of Conduct CBT. In an attempt to liven it up a bit, they did it in the style of a game, wherein the student could choose a game piece, which would move over a game board during the course.

…and that was it. There weren’t any rules. Student’s couldn’t NOT get the answers right (the questions were true/false, and the student had to keep answering until they got the answer correct). There was no competition, since everyone HAD to get 100%. In fact, other than the superficial, it wasn’t really a game at all.

I have to admit, I was a bit skeptical about this course… but feedback from students was very positive towards it. Even though it wasn’t a ‘true’ game, students felt like they had played a game.

Story 2:
I recently heard a talk by eLearning guru William Horton, where he discussed a course he built in the late nineties.

The course file sizes had to be very small, since students were downloading it over telephone modems. So, he built in some very simple text-based scenarios, and didn’t think any more about it. It wasn’t until he received feedback from several students who said that they really liked the “multimedia” in the course! William Horton made the point that the mind is the best game rendering machine out there.

Reflection Point: Even though we don’t have the resources (or time) to make big-time Flash-based games, how can we make our courses more game-like and fun, even in very small ways?

Just some thoughts….and I’d love to hear yours.

Tip: Creating Shadows and Transparencies, Part 2

In my last post, I promised to show you how to create a semi-transparent shadow effect in your Captivate, PowerPoint, or ToolBook course.

In Part 1 of this series, I explained the differences between several image file formats, and how we’ll need to use the PNG format to make this effect work.

In this post, I will explain how to create the initial shadow effect in Photoshop. In fact, there are two ways to make the shadow effect in Photoshop, the easy way and the hard way. Guess which one I usually use? If you guessed ‘easy’ then you don’t know me very well!

We’ll look at the easy way now, and the hard way (and the reason I use the hard way) in the next post.

First Things, First! The Easy Way!
To begin, you need to create the graphic in Photoshop that you want to apply a shadow to. I have created the graphic below, which will act as a pop-up window above some text in my CBT:

Now that I have my pop-up window, I want to apply a shadow to it, to give it a sense of depth and dimension. Fortunately, Photoshop has a tool that puts a shadow onto any graphic. To get to it, select the layer the shadow should appear on, go to the menu, and select the following…

Layer -> Layer Style -> Drop Show
(Shortcut method: Double click the layer you want to apply the Layer Style to.)

The Layer Style window will display:

From this window, you can create many different effects, but the one we’re focused on here is the first option, Drop Shadow. You’ll notice that once it’s selected, the Drop Shadow tool has a number of settings. The best thing you can do, is play with these settings and make sure the PREVIEW checkbox is selected (the one under the OK button) to see the results. Once you have what you want, press the OK button to commit the style. You should then see something like this:

Ok, now we have created our graphic and applied a shadow to it. The only things left to do are: 1) Crop our image, and 2) Get rid of the white background so the semi-transparent effect will display correctly in your CBT.

Extra Tip at No Extra Charge: The TRIM… Tool
Now, many people would tell you to use the CROP tool to do your cropping here (thereby getting rid of all that extra space that isn’t part of the image). But not me, I tell ya!

I prefer to use the TRIM tool (From Menu): Image -> Trim…

The Trim… tool automatically gets rid of all the extra background space that is not being used in your file. You can do the same thing with the Crop tool, but you have to guess with it and it’s very easy to crop too much when you’re working with semi-transparencies.

So, TRIM your image and come back here when you’re done……

……alright, done? Great! Now we have to remove the image’s background. To do this, go to the Background layer (on the Layers tab) and click the little eye next to it on the left hand side…

 

 

 

 

When you do this, you end up with this:

 

 

 

 

The checkerboard pattern in the background indicates that the background has been turned off.

Now, you can save your image as a PNG file and import that file into your CBT. Each CBT tool has a different way of ‘turning on’ the transparency, but we’ll get to that in a later tip.

Next up, the Hard Way of creating a shadow in Photoshop! Ok, it’s not really THAT hard…

Tip: Creating Shadows and Transparencies, Part 1

One of the more common questions I’ve been receiving recently is: How do I create the semi-transparent shadows that I use in my training files – like the one seen below:

Semi-Transparency Example

First, let me say that it’s quite easy to do, but first you need to know the difference between several image file formats: JPEG, BMP, GIF, and PNG

JPEG vs. BMP
Traditionally, designers would use JPEGs or BMPs when importing complex images (such as photos, or graphics with gradients) into Captivate, PowerPoint, or ToolBook. The difference between these two formats is image compression. BMP files are uncompressed and large, while JPEG files are highly compressed with smaller file sizes.

Here is an example of the same image, except one was saved as a BMP and the other as a JPEG:

 

 

You can really see the difference in file size. And the thing is, the more graphics you import into your CBT, the larger the overall size of the CBT becomes, and the slower it may run after export… so it’s really important to keep your CBT lean.

What’s with GIFs anyway?
Graphics can also be saved as GIF files. GIFs have the advantage of being highly compressed (meaning small) and also able to support transparencies, but have the disadvantage of only supporting a limited number of colors… so photographs, gradients and other complex graphics can’t readily be saved in this format.

PNGs to the Rescue!
So, what do you do if you need both a transparency and a complex graphic? Well, if you’re limited to JPEGs, GIFs, and BMPs there isn’t much you can do. But, PNG files road to the rescue! They have the ability to support very complex graphics (like JPEGs and BMPs do), have great compression and small file size (like JPEGs and GIFs), and can also support transparencies (like GIFs)!

It’s the utopia of the graphics (read: nerd) world!

With my next post, I’ll show you how you can use PNG files to create those nifty shadows, transparencies, and semi-transparencies that you see all over the web… in your very own PowerPoint, Captivate, and ToolBook courses!

Best Practices: File Naming Conventions

Hello, eDevelopers!

One of the most common issues I see…something almost all developers do over and over – including myself from time to time – is name their files incorrectly. Why is this such a big deal? Because an incorrectly named file can break a link and (sometimes) too long of a name may break the file itself….that’s why!

Here is a real (sorta) example of what I’m talking about (although the name of the file has been changed to protect the innocent):

October 2009 – Big Version Release & Quiz for XYZ: Version 12.tbk

So, what’s wrong with this name? What isn’t wrong with it!

1) The spaces in the file will cause the link to break when it’s emailed. This is especially problematic when the designer just wants a link to post on the intranet. I’ve also seen (rare) cases where spaces have caused problems with CBTs within the LMS.

2) The length of the name makes it more likely that someone on the eLearning team will make a mistake when creating the URL. Then we’ll have to go back, and recheck the path again, sometimes multiple times…and all the while we’ll be cursing your name. The moral of the story is: It’s easier for us to work with SHORT file names.

3) Long names + characters that AREN’T either numbers, letters or underscores can be a recipe for disaster. I recently had a Captivate file NOT work because of this very reason. Once we fixed the name, voila, it worked again!

So, what is the best practice?

1. Short names (as sort as you can get ‘em).
2. No characters other than LETTERS, NUMBERS, or UNDERSCORES.
3. Place a version number in the name to differentiate your files.

Here is how I would make the above poorly named file better:

VR_XYZ_Oct09_12.tbk

See the difference? Just making this change can be a HUGE difference in how the file operates and how easy it is for us to work with once a work request is submitted!

Hello, designers!

Welcome to my new eLearning blog!

This is my first foray into the Web 2.0 world for training and communication. My hope is that this blog will be a great asset for all eLearning designers (wherever you may be) and assist you in developing your eLearning skills.

My plan is to update this blog regularly with hints, tips, and tricks that I pick up along the way on making eLearning better. I also want to answer questions from you, the designers, about the courses you are developing. If you have a question about a particular tool you’re using, ask me, and I’ll answer it here. Likewise, if you have any questions (or comments) about learning methodology and pedagogy within eLearning, be sure to post ‘em here!

I want to hear from you!