5 Replies Latest reply on Apr 21, 2016 1:01 PM by coriman80

    Suggestions / Guide for HTML5 Web Ad Workflow

    Blaskotron Level 1

      Google has begun to phase out flash ads in Chrome starting in September and right now Edge is one of the best tools available to build HTML5 ads. These are my suggestions for Adobe to improve ad workflow in Edge as well as a mini guide for newbs like myself who have to regularly create web ads and will have to learn this new program coming from Flash. Used Edge 2015 on PC in this guide.


      Meta Ad Tag

      Ad servers require you add a matching meta ad size tag to your html file with correct size that matches the canvas size. Looks like this.

      <meta name="ad.size" content="width=160,height=600" />

      When you create a new size you have to manually add/edit this tag with the correct size with a text editor.

      This may seem small but if you forget to do it you will have to edit the source html in notepad to add the tag, refresh in Edge, republish the ad, save published files as a zip, and reupload to google. Fortunately it is not overwritten every time you save the HTML file, but still potentially a major workflow hassle.

      Suggestion: This could easily be a checkbox option in publish settings that is automatically updated when you change canvas size.


      Publishing Structure

      Because you often make multiple sizes of one campaign you want all the source files of the various sizes in one folder so they can easily share image and javascript libraries.

      The final uploaded files to google/mediaplex must be zips of the published files - one zip per ad size. Right now you must manually change the publish directory for each size to have a distinct subfolder in order to easily zip into individual sizes. (publish/300x250, publish/160x600, etc)

      Suggestion: Would be extremely nice if you could export direct to zip file which google / mediaplex require as well as have option to automatically create a published subfolder based off file name. i.e. for zip (publish/filename.zip) for Subfolder (publish/%filename%/files)


      Unused Published Images

      Images that are in the source library(images folder) but not actually used in the html file are still included in the published images folder. This should not happen as publishing should be the cleanest / leanest end product and there are still file size restrictions for HTML5 ads. 150KB for google adwords.

      Suggestion: If this was intentional, there should definitely be a publishing option to not include those.



      Edge creates at least five source files per project, four are unique to each file size. You really only need to edit the HTML file and can ignore the .js files and .an files. With multiple ad sizes this can be overwhelming from an organizational point of view and possibly intimidating for new users.

      Suggestion: the edge.js, edgeActions.js, html, and .an files be merged into a single .an file OR move them out of the root folder to another subfolder. When you preview in browser you should be viewing the published html version just like flash.


      SVG Gradients

      Google adwords doesn't accept the "linear gradient" tag for svgs with gradients created in illustrator, only gradients created from scratch in Edge.

      Suggestion: Would be nice if this could automatically converted by edge when you paste a vector image or you're given the option to convert. This took me quite a while to figure out what was happening, and I had to recreate the gradients in Edge.


      Blurry Text

      Text becomes blurry when using transform tool to scale text and then viewing preview in chrome, but not always immediately. You must use the font size property instead of the transform property if you want to scale text. Using font size is slower and requires you to reshape the text box manually.

      Suggestion: I think you could have a checkbox for the transform tool to switch between changing font size vs. transform scaling with percentages so you can still have the speed of the transform tool without the blur rendering issue.


      Google Fonts

      You can use google fonts by adding a new font and entering the code from google

      fonts such as:

      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      Also must fill in the font fallback list like this should your font fail to load. i.e. Roboto, sans-serif.

      Suggestion: Edge fonts are great but making it integrated with the free and popular google fonts should be a little more obvious what to do. You could have a list of their fonts and just check a box to enable.



      Thanks for listening. This is a very promising program. Suggestions for my suggestions are welcome.