These days, I have to target designs for screen sizes as small as smartphones, and as large as touch screen TV monitors. The days of designing for a limited range of desktop monitors seems to be a thing of the past, as people now use a wide range of devices to view Internet content. Adobe Edge tools provide a range of options for creating flexible content designed to be viewed on many types of screens.
Responsive web design has become an increasingly important topic as websites are viewed across many screen sizes. In my article about web typography, I touched on the topic of creating responsive text animations in Edge Animate CC. This article dives deeper into the topic, showing how to build an animated banner that responds to screen size.
For this project, I created a tutorial that walks through the steps of building a responsive, animated banner (see Figure 1). This article provides an overview of key concepts, along with video screencasts demonstrating the workflow. The supplied files include the completed tutorial and all the assets you’ll need to produce the banner yourself.
If you’d like to deconstruct the project, or follow along in the tutorial, be sure to download the supplied files, and install the related Adobe tools:
I used Edge Animate CC to create the animated banner and brought it in to Edge Reflow CC to make it responsive so it would respond to changes in screen size (see Figure 2). I also used Edge Code CC to facilitate the workflow between Edge Animate CC and Edge Reflow CC.
You can make your Edge Animate composition scalable, and then embed it in an Edge Reflow page. Edge Reflow enables you to design responsive web pages that lay out content based on media query regions. Media queries are a CSS feature used by modern browsers to switch CSS settings based on the size of the screen displaying the content. By using media queries, you can create a web page design that intelligently displays content for desktop, tablet, and smartphone screen sizes.
Use the following overview of steps and screencast videos to familiarize yourself with the key concepts in the tutorial. Look for the tutorial section callouts (in blue), to follow along in your own version.
In this section, you can complete steps 1 and 2 of the tutorial (see Video 1).
Video 1. Demonstration of tutorial steps 1 and 2
Use the responsive_banner folder from the supplied files as your project folder. It contains a link to the vector image I used to create the Illustrator and SVG files referenced throughout this project.
After you’ve downloaded the responsive_banner file, take a minute to explore its contents so you’ll know where to look in the following steps.
Create the bulk of the composition using imported SVG assets. The workflow starts by publishing the SVG files from the design file in Adobe Illustrator CC. Illustrator enables you to create vector graphics that work with typography and illustrations.
You can build Edge Animate compositions using bitmap images (PNG, JPEG, GIF), or vector images in SVG format. This tutorial uses SVG graphics because they scale as the screen size changes. Vector graphics are a good fit for this project, but note that SVG files can show some odd behavior in some browsers. Edge Animate warns you that SVG graphics need to be supported by the server, and that SVG graphics that are wider than 1024 pixels may cause unpredictable results.
In Illustrator CC, I use layers to separate the graphics I want to save as SVG files (see Figure 3). I divide the graphics based on the layers I want to end up with in Edge Animate. From there, I simply copy and paste the graphics from each layer into a new Illustrator CC file, and save the file in SVG format. The great part is that the SVG files are still editable in Illustrator, even after they are imported into Edge Animate CC.
Note: Published SVG files are in the source folder. You can skip forward to step 3, if you prefer to jump right into Edge Animate CC.
Adobe Edge Animate CC provides a timeline-based design metaphor for creating animations using web standard content. I use Edge Animate CC to create animated and interactive banners and to quickly bring my design to life.
In this section, you can complete steps 3, 4, and 5 of the tutorial (see Video 2).
Video 2. Demonstration of tutorial steps 3, 4, and 5
Import the SVG graphics into an Edge Animate composition and then place them in the correct stacking order in the Elements panel. This project is divided into layers along the composition’s Stage timeline. Each layer is either a static graphic, or an instance of a symbol containing an animation (see Figure 4).
Working across the timeline in Edge Animate can be broken down into some general concepts. The key to building animations is understanding how to create keyframes and use the Toggle Pin tool (see Figure 5). Keyframes are markers along a span of the timeline that save changes in an element’s properties. To create a transition effect, for example, you could change a graphic’s position and opacity property between keyframes at 0 seconds and 1.75 seconds.
After importing graphics and building symbols and animations as needed, the next step is to make the composition scalable. The most recent update to Edge Animate CC introduces the Responsive Scaling feature. Responsive scaling changes the width and height of the Stage, whenever its containing element resizes. The feature intelligently changes the scale of all elements in the composition by width, height, or both properties.
Using the Responsive Scaling feature is easy to do. Simply select the stage, and turn on the Responsive Scaling option with its field set to Width, Height, or Both. You can also select the Center Stage option to control how the composition is centered within its container (see Figure 6).
At this point, you are ready to prepare the file for publishing in Edge Reflow CC.
In this section, you can complete step 6 and 7 of the tutorial (see Video 3).
Video 3. Demonstration of tutorial steps 6 and 7
At this point you have a fully functional banner in Edge Animate CC, and are ready to bring it into the Edge Reflow project by updating the composition’s Publish Settings target directory to the Edge Reflow assets folder (see Figure 7).
Most likely you want to make changes to your banner composition even after it’s embedded in the Edge Reflow page template. If your Publish Settings are configured correctly, you can easily make edits in Edge Animate, and publish the changes to the Edge Reflow assets folder. You’ll automatically see the updates in the Edge Reflow page from there.
Adobe Edge Reflow CC implements media queries using breakpoints along a grid (see Figure 8). You can define breakpoints at the width of each screen size for devices you’re targeting, and then lay out the columns and rows of your page based on the space available for each size.
Now, you can add the Edge Animate banner to an Edge Reflow page. First, create a rectangular container for the banner on the page. Then, copy a few lines of code from the Edge Animate HTML page and paste it into the Reflow HTML page. You can use Adobe Edge Code CC to facilitate copying and pasting between the files (see Figure 9).
You can combine Edge Animate CC and Edge Reflow CC to create unique banners and page layouts that can be seen across devices. The final result of the tutorial provides a template you can use as a starting point for future creations (see Figure 10).
Creating banners that are responsive to the screens they are viewed on is straightforward with a little forethought and the right tools. The workflow in this article provides what you need to make it happen. Take some time to experiment with different types of banner content, and perhaps make some content scalable, while other content remains fixed.
For another approach, take a look at the Edge Commons Adaptive Layout extension for Edge Animate. Edge Commons includes a handful of extensions that you may find useful. Watch Flexible layouts using Adobe Edge Animate and the Edge Commons Library (Adobe TV) for more details.
Dan Carr is lead developer of Dan Carr Design in San Francisco. With 15 years’ experience collaborating with Adobe and Macromedia, Dan has produced training materials, technical articles, and features available in Flash, Flex, and more. Dan’s most recent work specializes in gaming and video for Flash, HTML5, and iOS.