Flite‘s new Design Studio HTML5 is an online tool for creating web ads and appears to be a direct competitor to Google’s Web Designer. I’ve reviewed Google Web Designer, so I wanted to give Design Studio
HTML5 a go as well.

Here’s how to use the tool, along with my thoughts on whether I recommend it. All screen captures in this review are from Chrome v. 31.0.1650.57 m unless otherwise noted.

Trying Design Studio HTML5

From Design Studio HTML5’s main page, click the Try It
Now button. After reading the Flite Terms of Service (TOS), check the box next to the TOS link and then create an
account by filling out the required fields of username and password, first name,
last name, and email address (Figure A).

Figure A

 

 

Click the Create Account button at
the bottom of the screen and, within seconds, you’ll be taken to the Console screen, as shown with
the Getting Started video that is visible in the partial screen capture in Figure
B. I also received a welcome email and resource links for getting to know the basics, learning about components, keyboard shortcuts, and actions, and setting up animations using Flite’s Inspector tool.

Figure B

 

 

After watching the introductory video, I poking around a bit to
see what I could find inside the Design Studio HTML5 Console. From the + Make New Item button, I selected Make New HTML5 Ad and then saw a list of preset templates.

One option is Starter Ads, which has 11 templates that range from a Carousel Ad to a Tablet Interstitial Ad (Figure C). Other options include Rising Stars (which has five templates including Filmstrip and Slider), Mobile Rising Stars (which has four templates including Mobile Filmstrip and Tablet Slider), and Your Templates (which lets you create templates from a new blank ad or import from Photoshop in PSD file format).

Figure C

 

     

Testing a preset template

I built a quick and simple ad with the starter ad Mobile Interstitial
320 x 480. Then, I clicked the Choose button
at the bottom right of the screen (Figure D).

Figure D

 

 

The Layers panel and the HTML5 Components toolbar appeared after a
few seconds of processing. The resulting Design Studio HTML5 console is
displayed in Figure E.

Figure E

 

 

Next, I added creative within the Inspector Placeholder Settings tab
by uploading an image file (under 1MB). Then I checked HiDPL (Retina) mode,
clicked the radio button for Fit Image Proportionally for Downscaling, added an Action with a Tap trigger to open a URL in a new window, and then
I added the two actions to fade in 2 seconds and fade out 2 seconds. Finally, I
added two Text components: a header title and another header title that has more body content and is set to scrollable (Figure F).

Figure F

 

 

I added the Locations HTML5 component to fill in the bottom
half of the ad and edited the location information for Falls Lake. This
component requires a valid Google API
when flighting ads utilizing the Google Maps V3 API and the Google Places API services, which must be turned On to connect your app
correctly. (Flite provides a tutorial on adding your Google API
Access — click How can I obtain an API Key for Design Studio HTML5 Locations Component?) After adding the Google API key to
the Locations component, I saved the Mobile Interstitial ad again, clicked the Publish Button So That I Can Access A Live Preview, and then clicked the Preview On Mobile Device button (Figure G).

Figure G

 

 

I scanned the QR code for mobile devices (Figure G) and previewed
the ad on my iPhone 4 (Figure H).

Figure H

 

 

The Google Map API includes a location finder, so it will automatically
pick up your phone’s physical location. Touching anywhere on the top section of
the screen opens a new window to the Falls Lake website, as shown on my iPhone
4 in Figure I.

Figure I

 

 

Since the previous setting for the placeholder image applied the trigger
action to the entire screen, I adjusted the original placeholder to the top
section, which limits the action of opening a new window to the specified URL to
the top placeholder section only. Once
I saved and published the ad again, the Form field was active, and I was able to
enter a Find Near Address into the Form field and clicked Go using Louisville as a test location. Figure J shows the results as viewed on my iPhone 4.

Figure J

 

 

Additional features

There are a number of features that sound appealing, but I haven’t tested yet. The features give you the ability to:

  • Add buttons, shapes, navigation options;
  • Integrate Facebook, RSS feeds, forms, polls, and Twitter;
  • Embed videos
    by URL or YouTube;
  • Import your own custom components; and
  • Display the console footer’s initial and subsequent file size in addition to the total file size, as well as
    a list of modern browser support for the specific ad (    Figure K).

Figure K

 

According to the Design Studio HTML5 console, this list shows the current minimum browser support for the ad I created as my test.

  • Android 2.2 or later
  • Internet Explorer 9 or later
  • Chrome (latest)
  • Safari (latest)
  • Firefox (latest) 

Assessment

I like Design Studio HTML5’s functionality and ease of use for creating ads, particularly mobile ads. It really fits the bill when it comes to creating quick ad content for device-agnostic browsers and devices.

Do you think you’ll give Design Studio HTML5 a try? If not, what tool do you use for creating web ads? Share your thoughts in the discussion.