For over two years now, I have been exploring and deploying various tools either to create mobile-learning content from scratch or to convert legacy content to mobile-ready formats. Depending on the target audience’s characteristics, their needs, and the context of use, I have taken different approaches.
From cloud-based and desktop tools to do-it-yourself kits and mobile learning platforms, I have experienced the valuable assets as well as the caveats of each solution. However, I was unable to find a sensible answer to a persistent question: How can I optimize my content for the varied devices that access it?
Adobe Edge Animate could shed some light on this problem as it includes unique features that allow for flexibility, portability, and continuity of content regardless of the information-access environment.
Harnessing the latest web technologies
Concerned about coding experience requirements?
Figure 1: These are the files produced by Adobe Edge Animate as soon as you save your project
Figure 2: All these properties are actually CSS properties; some of them are basic CSS properties such as color and padding, but you can also play around with more advanced CSS properties such as proportional dimensions and relative positioning that are, in turn, presets for adaptive layouts
Figure 4: You can employ the buttons in the Actions Panel to insert snippets of code
Figure 5: In the Code Editor, you can write your own code or edit the code produced by Adobe Edge Animate
So far I have explained the fundamental innards of Adobe Edge Animate to help you better understand how it can assist designers to create web-based experiences. In the next sections, I will analyze the features that effectively support the creation of multi-device components.
Think about proportions instead of pixels
There are two ways to build responsive compositions and create more fluid content with Edge Animate: as a pixel-constrained composition or as a percentage-based composition. The advantage is clear. As Joseph Labrecque explains, our content is capable of adjusting itself to the medium:
“If we choose to build on a percentage-based Stage, we can mix elements with both pixel- and percentage-based units to create a more responsive design. This will enable the composition Stage to fill a certain percentage of its container element when published by the Document Object Model (DOM).”
We can scale a selected element relative to the global container, i.e. the stage, or to a specific container, i.e., its parent, and set its size to percent in order to make it more sensitive to its surroundings (Figures 6 and 7).
Moreover, Edge Animate CC includes a responsive scaling option that you can apply to scale your content up and down so it fits into any screen.
Figure 6: Scaling a selected element relative to its parent
Figure 7: Considering percentages instead of pixels
Designing for touch interfaces
Figure 8: These are the built-in touch actions in Adobe Edge Animate: touchstart, touchmove, and touchend
Figure 9: With hammer.js, we can trigger gesture events such as swipeup and swipedown
Supporting media for different contexts
Edge Animate also enables us to manage multimedia assets according to the characteristics of the devices that will render our content. It supports Scalable Vector Graphics (SVG), which offer infinite scaling possibilities. You can modify SVG images at several different sizes through the mathematical expressions they contain in order to respond to different devices’ physical dimensions and display densities.
Also, the latest update to Edge Animate gives you the ability to easily import audio files (MP3 and OGG files) and add them to your composition through a drag-and-drop action.
Simulating various screens
You can simulate various screen sizes directly within Edge Animate by resizing the Stage. Also, simultaneous cross mobile-device previewing of our content at early stages of the development process is possible with Edge Inspect (Figures 10 and 11). Both processes are streamlined ways to quickly test how the different elements in our composition react and so we can make real-time changes to our design if necessary. However, it is advisable to always test our design on the real performance environment and under the real delivery conditions. For this reason, I prefer using Edge Inspect to get better understanding of how my design will render and perform when actually deployed on different devices.
Figure 10: Using Edge Inspect CC to preview how the composition will display on the iPad
Figure 11: Using Edge Inspect CC to preview how the composition will display on an Android device
Creating richer experiences
Edge Animate’s integration with other tools can create an ecosystem of solutions that can better support multi-device development (Figure 12). It is easy to place an Adobe Edge Composition within InDesign, Muse, or Dreamweaver projects, and even in iBooks Author.
Figure 12: By importing an Edge Animate project into Adobe Dreamweaver CC, we can easily add animations and interactivity to HTML templates or we can take full advantage of PhoneGap Build to create and test a hybrid mobile app
The use of HTML5 and related technologies, the idea of thinking about percentages and proportions instead of pixels, responsive scaling, the possibility of creating touch-based interactivity, and simultaneous cross-mobile-device previewing of our content are all features that can help us develop enhanced and ubiquitous experiences.
Mobile devices are not just an ancillary gateway to content. It’s time to start considering more effective solutions for multi-device development. We cannot make decisions on behalf of our users and prescribe definite conditions. Users will access our content through different devices, and they don’t care about our preferences or the decisions behind the design, they just expect to have a seamless experience anywhere.
Labrecque, Joseph. Learning Adobe Edge Animate—Create engaging motion and rich interactivity with Adobe Edge Animate. Birmingham-Mumbai: Packt Publishing, 2012.