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
Adobe developed Edge Animate from the ground up relying strongly on HTML5, CSS3, and JavaScript. Until recently, Adobe’s Flash was the most reliable and preeminent delivery method for highly interactive web experiences. However, it is a well-known fact that Apple’s devices no longer support Flash-based content. True, the Flash Player does still work on other mobile devices such as Android, Windows 8, and BlackBerry 10. Also, Adobe AIR can enable delivery of Flash content as native mobile applications. But we really need to look for more effective and future-proof solutions for the ever-changing array of devices out there.
The truth is that most of the time we are absolutely clueless about the environment where our content will be accessed. The only thing that we know is that users are no longer tethered to their desk and content-access environments can vary significantly. Under these daunting conditions, our job is (or should be) to offer rich and adaptive experiences capable of flowing across different screens and platforms. Edge Animate takes full advantage of HTML5, CSS, and JavaScript libraries including the Adobe Edge Animate Runtime in order to facilitate the ubiquitousness of our content. This means that users can access your content from different devices without the need of additional plugins.
Concerned about coding experience requirements?
Now, if you are a designer with little or no coding experience, you may be wondering if you will need to learn some code to get started with Edge Animate. The answer is not necessarily. You can create simple animations by using drawing tools and a timeline. After creating and saving a new Edge Animate project, Edge Animate produces a number of files, including an HTML file and JavaScript files (Figure 1). You can then start creating the sections of your HTML document simply by arranging elements or selections onto the Stage. Also, by assigning CSS properties to the objects from a Properties Panel, you will be able to add styles (Figure 2). In this way, you will be defining the visual design and structure of your project. All this is possible without a single line of code.
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
Having said that, in order to add interactivity and really make the most of this tool, you need to be acquainted with JavaScript, the base coding language used by Edge Animate. The good news is that Edge Animate contains some key functionalities to make coding tasks much easier (Figure 3). One of the functionalities that I find particularly useful about Edge Animate is the possibility of inserting preconfigured bits of code from an Actions Panel to handle events (Figure 4). These could add basic interactivity to your design, but as you become more confident with JavaScript, you can also use a Code Editor to write your own code (Figure 5).
Figure 3: Adobe Edge Animate also includes a number of JavaScript transitions, Eases, that you can apply onto an element
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
In Edge Animate, we can enable touch-based interactivity by integrating touch actions from the Actions panel into our compositions (Figure 8). (Touchstart: a touch has been detected; touchmove: the touchpoint has moved across an element; touchend: a previously detected touch has ended). As an alternative, we can use hammer.js, a JavaScript library for multi-touch gestures (Figure 9).
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
Conclusion
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.
References
Labrecque, Joseph. Learning Adobe Edge Animate—Create engaging motion and rich interactivity with Adobe Edge Animate. Birmingham-Mumbai: Packt Publishing, 2012.