eLearning Templates: How To Optimize Graphics For Web-Responsiveness
eLearning assets can include anything graphical; from logos, videos, and static images to documents converted into job aids and resources. It is vital to realize, however, how important it is for you to consider the file formats and whether your project endeavor requires vector or bitmap images and logos that will impact production time development.
In certain situations during the pre-flight stage of eLearning content development, you have no idea how any of these graphic elements will be repurposed in the future, especially with all of the disparate media involved in the Internet of Things.
Luckily, there are some best practices and a production workflow you can implement, all based on the fundamentals of graphic design digital governances. "Governances in the principle of Graphic Design?", you may ask. Absolutely! Vector graphics are lossless, yet bitmap is lossy. Lossless and lossy terms deal with compression schemes. Compression means how you decide to render or export a graphic element created in a vector program such as Adobe Illustrator or a graphic element created in the bitmap or pixel-oriented program such as Adobe Photoshop. Pixel-based graphics involve dots per inch (DPI).
In print media, pixel graphics must be at least 300 DPI compared to screen or monitor pixel graphics elements that should be at least 72 DPI. Compare this to vector graphics created in Adobe Illustrator. Vector graphics, in contrast, retain properties that if you need to increase the size of the graphics, increasing the width or height will neither distort the image nor will it impact the quality of the graphic as it would in any bitmap image.
In other words, there will be no degradation in image quality; therefore, it is considered lossless compression. In contrast, were you to increase the width or height of a bitmap or pixel base image (for instance, a file format in jpeg or BMP), you would notice a substantial degradation of quality in the image or graphic element, and it will, therefore, become pixelated: this is the lossy compression.
Production Workflow
The following consists of the workflow during the first phase of the production of any online course content; or else, in this case, eLearning course content development. The challenge, of course, is that you have no idea how the determined learning object will be delivered and consumed by your learners (e.g. as a job aid, interactivity, video, etc.). Moreover, keep in mind the ways an end user is going to consume the learning content, on the iPad, desktop, and browser.
Not only should you take into consideration where the learning content will be delivered, but also what media needs to be taken into account regarding file format, compression, and optimization. Of course, connectivity and bandwidth issues must factor in.
The questions you need to consider are the following:
1. How Do You Plan And Create Your Learning Content So That It Can Be Repurposed?
You cannot forecast the environmental surroundings in which your learner will be consuming learning content. It is best to develop for remote consumption of learning objects. The question then becomes, how do you plan and create your learning content so that it can be reused on the fly to avoid an influx of emails from learners who are wondering why some graphics may be missing from their course content? In this type of development process, where you have no clue who your audience is and in what environmental surrounding they consume their learning, the challenge always becomes that you don't even know the proper way to set up your eLearning project templates.
2. If You're Developing A New Mobile App, Is It Best To Develop It In Web-Responsive Mode?
In this use case scenario, it's best to design for more graphical visual hierarchy and aesthetics, and minimal copy design. The challenge is the unknown: Start with the lowest common denominator and stick to what was tried and tested before, so it cannot only be accessible on any platform and OS but can also be scalable enough to be optimized for web responsiveness since at this initial phase, you have no clue about the exact dimensional aspect ratio of the end product. Rule of thumb: In any software design, best to adhere to design and brand consistency, yet strategic scalable design will evolve.
If you're aware of potential challenges to avoid recreation of assets and waste of time, documenting them during the first phase of the project and comparing them with the guidelines posted here, you at least have a standard workflow process to gauge efficiency in future workflows in any course development project.
