Maintain Browser Compatibility with Adobe Edge Animate CC - dummies

Maintain Browser Compatibility with Adobe Edge Animate CC

By Michael Rohde

Adobe Edge Animate CC works in all modern browsers — including the most recent versions of Chrome, Firefox, Opera, Safari, and Internet Explorer 9. It also works on all tablets and smart phones that have modern browsers installed. For audiences that don’t use modern browsers, Edge Animate does provide a fallback option that you can use so that your animation does not appear broken.

Compatibility is important for web content; if a browser doesn’t support your code, then your animation won’t work. No wonder Adobe Edge Animate CC creates code that works in all modern browsers.

Concerns with HTML5 and older browsers

Many web developers are concerned that not all parts of HTML5 are compatible with all browsers. This is especially true with Internet Explorer. Where many features of HTML5 will work in browsers such as Chrome and Firefox, they will not always work in Internet Explorer.

This leaves many web developers questioning how widely they should start using HTML5. It isn’t in a web developer’s best interest to create web pages that don’t work in all browsers — but the future is still a bit murky, and lots of folks are content to use old browsers.

Adobe has addressed these issues with Edge Animate. You can feel safe and secure knowing that your Edge Animate web compositions will work in all modern browsers, including the current versions of Firefox, Chrome, Safari, and Internet Explorer 9.

You don’t need to know HTML5, or even HTML, to use Edge Animate. But the more you know, the better off you’ll be if you need to use the code to help implement it for viewing. The Edge Animate software creates the code for you while you build your web animation.

When you save your Edge Animate file, the software creates several different files. One of those files has the .html filename extension. The HTML5 code is within the .html file. You can view this file with any plain text editor such as Notepad. After you’re done creating your composition, you can view the animation in a web browser — either from within the software, or by double-clicking the .html file, which opens and plays your animation in your default browser.

Desktop browser compatibility

Compatibility with the Microsoft Internet Explorer web browser is an issue that web developers have to contend with when developing sites. Microsoft has been slow to update Internet Explorer to be compatible with HTML5 — and code that works perfectly fine in Chrome, Safari, and Firefox doesn’t behave well in earlier versions of Internet Explorer.

For example, if you code a border to have rounded edges, then your corners will appear rounded off in Chrome and Firefox; but view that same site in IE and suddenly your rounded edges appear square. Issues like this can ruin a website’s design.

Browsers such as Firefox, Chrome, Safari, and Opera already support many aspects of HTML5. There are no concerns with Adobe Edge Animate CC compositions working perfectly in these browsers. These browsers also have built-in automatic updates for their users. Because of that, web designers and developers can feel certain that their users are most likely using the most current version of that browser.

What to do for Internet Explorer 8 and older versions

In an ideal world, everyone would upgrade their browsers regularly. Unfortunately, not everyone can do that, for whatever reason. Even though Internet Explorer 9 has opened the door to HTML5 compatibility, which means Edge Animate works in that version of the browser, not all IE users have upgraded their browsers.

It’s still not uncommon for many IE users to use versions 7 and 8 — and (to many designers’ horror and dismay) IE 6 is still in use by many people.

Adobe Edge Animate CC compositions will not work in Internet Explorer 8 and older versions, just as HTML5 doesn’t work in IE6.

However, the good news is that more and more web users are upgrading their browsers, and usage of IE6 is slowly dwindling. With that said, though, Edge Animate works in all modern portable browsers. If your main goal is to create animated applications for use on smart phones and tablets, then you’re very much in luck.

If you’re creating web animations for an audience who still uses IE8 and older browsers, that lurking obsolescence can be a concern when you’re using Adobe Edge Animate CC. Say that you spend countless hours developing the perfect web animation and then put it online. You tested it in Firefox and IE 9, and it works perfectly.

Then you walk across the hall to show it to your boss — and to your horror, it doesn’t work because your boss is using IE 6. Well, in the real world, there’s a good chance many of your clients and customers are also using an earlier version of IE that isn’t compatible with Edge Animate.

Fortunately, Edge Animate has you covered with at least two options: You can (a) use Google Chrome Frame support or (b) use down-level browser support — a feature that enables you to create a poster (a static image), or to use static HTML, to replace the animation — which keeps your website from appearing “broken.” Your audience sees an image that looks the way it’s supposed to look, even though it’s not animated.

Google Chrome Frame support

Edge Animate has a feature that enables you to use Google Chrome Frame support for browsers that don’t support animation. As a next step to down-level browser support, you can publish Edge Animate content so that your audience can view it on IE 6, 7, or 8 using Google Chrome Frame. For the user who doesn’t already have Google Chrome Frame, you can also control the experience of installing it.

Edge Animate has down-level Stages

The down-level Stages in Edge Animate are versions of the Stage that you can use to create and publish a down-level version of your composition that will be compatible with browsers that don’t support HTML5 animation. The down-level Stages offer only minimal creation tools, but you can

  • Import graphics and create text elements.

  • Import a poster from the main composition.

Basically, the animations that you create and place online can detect the browsers your audience is using. If the code detects that someone is using a non-compatible browser for your animation, then it reverts to showing a poster image instead of the animation. This saves your website from appearing broken. Instead of seeing an animation that doesn’t work, the audience sees a poster — a still frame — that you create from the animation.

Again, you don’t have to know code for the down-level Stage support to work. Although coding for browser detection can be tricky, Edge Animate has that capability built in — and it’s an option you can choose when you’re ready to publish.

Compatibility with tablet and mobile browsers

Where Adobe Flash fails, Adobe Edge Animate CC works. It’s well known that Apple doesn’t allow Adobe Flash animation to work in its portable devices — and that includes the iPhone, iPod touch, and iPad. Steve Jobs, before his passing, stated that Flash had too many security vulnerabilities and other negative aspects for Apple to allow Flash to work with iOS.

Edge Animate, on the other hand, doesn’t suffer from those issues. Your Edge Animate compositions will work just fine on Apple products — and on Android devices — whether tablets of all types, smart phones, and other devices that use modern mobile browsers.