Web Development

Create web ads using Flite's Design Studio HTML5

Design Studio HTML5 enables you to create ads for device-agnostic browsers and devices. See if our reviewer recommends it.

 

Flite_hero_010814.gif
 Design Studio HTML5 / Image: Flite
 

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 DesignerI'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

 

Flite_FigA_010814.gif
 

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 BI 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

 

Flite_FigB_010814.gif
 

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

 

Flite_FigC_010814.gif
     

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

 

Flite_FigD_010814.gif
 

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

 

Flite_FigE_010814.gif
 

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

 

Flite_FigF_010814.gif
 

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

 

Flite_FigG_010814.gif
 

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

Figure H

 

Flite_FigH_010814.gif
 

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

 

Flite_FigI_010814.gif
 

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

 

Flite_FigJ_010814.gif
 

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

 

Flite_FigK_010814.gif
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. 

  

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments