As the premier brand advertising platform for mobile, Medialets has unmatched expertise enabling the industry’s most powerful rich media ad units for mobile and tablet ads. In this document, we have brought together some of the best practices for creating mobile and tablet rich media ads.
1. Consider animation duration and its effect on message delivery.
Publishers usually dictate the maximum duration for animations that are not user-initiated within initial rich banner creatives. Most publishers currently allow for 15 seconds of on-load animation. However there are a few exceptions, such as the New York Times tablet properties, which will allow only three seconds of animation in most of their banner placements. Fifteen seconds is usually too long to "get to the point" within an initial banner creative.
Creative fatigue, specifically with regard to animation, is definitely another factor to consider. Banners can be developed to animate or render differently for each impression. This can be a useful tactic to avoid creative fatigue because once a user has seen a creative a few times with the same animation, it may start to become an annoyance.
2. Shorter videos perform better.
Videos longer than 30 seconds tend to have much higher drop-off rates near and immediately after the 30-second mark. Shorter videos (15 seconds or less) will naturally experience higher completion rates. If video completion rates are an important part of measuring campaign success, shorter videos would provide a more successful campaign outcome.
Videos should also display their durations (in seconds) either while playing or before the user taps to view them. This better prepares the user for dedicating the necessary amount of time to watch the video. If videos are shorter and the user knows that before tapping to play them, it might increase the numbers of users who do tap to play the videos since they'll feel they aren't going to be making a significant time commitment.
3. Consider loading time & initial load file weights.
Consumers don’t like to wait for content, much less for an ad to load. Loading times for mobile and tablet advertising should be a significant consideration when conceptualizing any ad execution. The speed of desktop delivery that most digital media creative designers are used to are rarely enjoyed on mobile devices, especially on handsets/phones with a 3G data connection.
Individual publishers usually set file weight specifications, but don’t consistently test against those specifications. Effectively, this means that the sole responsibility for ad file weight - and its positive or negative impact on overall user experience - falls squarely on the shoulders of the ad designer and developer. Ad designers and developers should work closely to assure that the advertisement will perform well from a load-time perspective.
The general rules for file weights listed below apply to all assets (code and image files) necessary for an ad to display. Individual publisher properties may list and enforce different file weight specifications than what are listed below; the below specifications are simply what Medialets recommends. KB = Kilobytes.
- Handset Initial Banners (approx. 320x50):* 50 KB max recommended initial load
- Handset Fullscreen or Expanded Panels (approx. 300x300 or 320x480):* 100KB max recommended initial load
- Tablet Initial Banners (approx. 728x90 or 300x600):* 80KB max recommended initial Tablet Fullscreen or Expanded Panels (approx. 1024x768):* 250KB max recommended initial load
The file weight numbers above refer to a recommended maximum initial load. More assets can certainly be loaded into the ad execution after the initial load. The user experience of how long a given set of creative assets within an ad execution take to actually download is the main consideration.
4. Prepare advertisements for high-density (aka Retina®) displays.
More and more of the mobile screens around us are becoming higher and higher resolution. Brands always want to look their best, and are therefore asking designers to take full advantage of every pixel available on mobile screens. In order to do this, designers are doubling the sizes of their Photoshop files. In practice, this would mean that if a particular ad placement had the dimensions 300x50, the designer’s Photoshop file would be created at 600x100. Remember that the “resolution” setting in Photoshop is largely irrelevant for digital creative. The only numbers of consequence that affect asset creation are the “width” and “height” values (in pixels) of the Photoshop file. Those values should be exactly double the values of the placement’s logical size. The physical size of the advertisement when presented to end users on device can be best simulated in Photoshop by changing the document’s view to a zoom value of 50%. Since the file contains double the pixels, it will appear at approximately double its actual physical size when viewed at 100% zoom.
Once the Photoshop file for a given ad execution is completed and approved, the ad can enter the HTML5 production phase. At this time, the individual graphic assets can be “sliced” out and prepared for use in the developed ad. Ideally, the goal is to utilize high-density graphics on devices that can take advantage of them, but not force devices without high-res displays to download the high-density assets since they will be larger in file size. HTML5 developers may decide to slice/create two different sets of image assets --- one at double density, and another scaled down by 50% --- and use CSS media queries (http://bit.ly/JggxYj) to make the appropriate imagery display on each type of device screen.
Since two sets of image assets will need to be sliced out and maintained, additional costs and timelines of approximately 15% for the HTML5 development phase of production should be applied vs. production without high-density assets.
Expectations should be set early on with clients that high-density assets may not always be feasible to universally apply across an ad execution for a variety of reasons. File sizes of high-density assets can balloon very quickly since high-density images contain four times the amount of pixel information. Therefore, it won’t always be possible to create an ad with 100% retina assets that can be delivered to devices over mobile networks in an acceptable amount of time. The good news is that the application of high-density images in an ad is not an all-or-nothing exercise. Designers and Developers should use their own best judgment when determining which assets will benefit most from utilizing high-density image assets and leave the images that will benefit less at single-density. For example, a brand’s logo should generally look as sharp as possible and therefore makes a good candidate for high-density representation. On the other hand, most photographs, background images, patterns, textures, etc. will benefit less from being displayed at high-density and could be shown at single-density, even on devices that are high-density-capable. Device memory (RAM) is the other bottleneck that often forces the judicious evaluation of which image files can feasibly be applied; if an ad creative asks the device to display too many large image files at one time --- especially high-density image files --- the app or mobile web browser where the ad creative is displayed might crash.
5. Consider that mobile devices have limited memory (RAM).
Mobile devices only have a finite amount of memory (RAM) to work with. Rendering HTML5 content on mobile devices --- especially the images presented in such content --- consumes a great deal of memory. As mentioned above, if an ad creative asks the device to display too many large image files --- especially high-density image files --- at one time, the app or mobile web browser where the ad creative is displayed might crash.
Ad creatives should be designed and developed to dynamically load only the assets necessary to enable a good user experience. In larger ad executions, this could mean employing dynamic unloading of images and ad content that is not currently needed for display. For example, HTML5 developers should not expect to load an entire multi-page tablet advertisement all at once, and simply show or hide various pages as the user navigates through the advertisement. Instead, developers should load only the first couple pages that a user might see, and dynamically load additional pages only as the user navigates to (or near) them while simultaneously unloading the pages that were previously loaded for display. Managing device memory consumption is more often a concern on tablet executions than it is on handset/phone ad executions.
6. When possible, use web fonts or native device fonts instead of embedding text in images.
One of the most commonly noticeable benefits of high-density displays is the clarity at which text/copy can be rendered. Instead of “embedding” text into the pixels of bitmap image files, designers and developers should consider using custom web fonts or fonts that are natively pre-installed on the device. Placing copy within HTML5 code instead of within image files can also reduce the amount of time needed to implement copy revisions since new image assets won’t need to be created.
The only caveat to consider for when custom web fonts are used is the file size of the font file; web font files can often be larger than 100 KB alone. Developers should make sure that the size of the web font file is not actually larger than the size of high-density image assets that could be used instead.
Tip: Check http://iosfonts.com for a list of fonts that are pre-installed on iOS devices per iOS version.
7. Assure that the call to action (CTA) is prominent.
Stated simply, the more prominent a call to action (CTA) is in any context, the more consumers will act on it. To be prominent, CTA should stand out from the rest of the elements in the creative. Designers can accomplish this by using animation, or traditional design techniques such as relative size, visual contrast, etc.
The main CTA in initial banners, interstitials, and expanded banners should ideally be displayed persistently as soon as the creative is displayed, or within at least 2-3 seconds if the call to action animates into view for creative reasons.
Special care should be taken in the cases of ads such as interstitials or auto-expand units that might have auto-dismiss timers. In these cases, the CTA should be even more prominent since consumers have a limited time to respond. In some cases, visual countdown timers in the ad creative can be utilized, near (or integrated into) the call to action in order to cue consumers and promote urgency in response. Creatives and copy writers may be able to come up with a few interesting ways of communicating this to consumers in enticing ways that also compliment the brand and its overall message. For example, when an ad with an auto-dismiss timer first appears, the consumer might be presented with a stick of dynamite with a burning fuse and copy that reads, "Hurry! Put out the fuse by tapping the flame!"
Sometimes, rich media ad executions can contain multiple CTAs. In this case, special care should be taken to prioritize the single most important CTA --- or pair of CTAs if a choice is presented --- and feature it as the most visually prominent. Ad executions that present too many choices simultaneously suffer from lack of focus that can ultimately dissuade consumers from taking any action.
8. Use call to action (CTA) copy that is appropriate for mobile devices.
The current trend for touchscreen devices is to use "mobile specific" CTAs. For example, instead of "click to expand", use "tap to expand" as "tap" is a more accurate description for the interaction that the user would perform. Additionally, all the same "common sense" rules about CTA's in digital ad creatives apply. Make sure CTAs are prominent and clear.
For banners that expand, using the word "expand" within the call to action can help consumers understand that when they tap the initial banner, they will effectively be making the initial banner grow larger, and not be "removed" from their current context (such as a new browser window/tab), or exit the app that the ad is running in.
9. Use a reasonable number of images in image galleries.
A general rule for image galleries is to use four to five images at most. If it is necessary for a particular ad execution to have a greater number of images, this is usually not a problem. However all parties should note that for each image that is added, the likelihood that a consumer will view 100% of the images decreases. Additionally, when a larger number of images exist, the situation can be approached as an opportunity for creative refreshes during the course of the campaign.
10. Assure that landing pages are appropriate for mobile devices.
Landing pages should be designed for the device(s) on which they will be viewed. This may require the creation of a new, mobile-specific landing page, or the implementation of a "responsive" web site design that adapts to display appropriately on mobile devices.
It should also be noted that landing pages are not always necessary with rich media mobile ad creative. The entire user experience - all the way through to fulfillment - can exist entirely within the ad itself, making a link out to landing page an unnecessary, or at least secondary, engagement.
Keep in mind that the term "landing page" refers specifically to a click through to a brand's own website, not to an expanded panel of an expandable ad. For example, an expandable ad may consist of (1) the initial banner, (2) the expanded banner, and optionally a (3) click through to a landing page. On the other hand, banner ads and interstitial ads that do not expand may click through directly to a landing page as they do not have an expanded panel.
11. Avoid tilt and shake interactions in orientation-aware ad units.
Mobile rich media ad creatives can respond to types of user interaction such as tilting or shaking using device hardware like accelerometers and gyroscopes. Designers of orientation-aware ad units should be wary of asking end users to perform these interactions due to the fact that they can inadvertently trigger orientation changes.
12. Avoid swipe interactions within ad placements within swipe-able app pages.
Certain publisher properties offer ad placements that sit on or in between content pages that viewers swipe through in a linear fashion. When a page with one of these ad placements slides onto the screen, consumers expect that if they swipe anywhere on the page, the current page will be “dismissed” and a new page will slide into view, just as any content page in the app would be. It is therefore important for ad designers to consider swipe-able app pages when relevant. Swipe interactions within the ad creative will almost universally not be allowed by publishers that use swipe as a navigation mechanism.
13. Limit the taps/actions required to result in a conversion.
Just as with online e-commerce best practices, ad designers and developers should reduce the number of interactions required to bring the consumer through the journey from initial impression to "conversion”, however defined for the ad execution. The more steps a consumer must perform in order to get to the point of conversion, the lower the conversion rate will be. Ads that place the main conversion action a mere one or two steps away from the initial ad impression will generally perform within or above industry expectations.
14. Try to reduce the total number of unique ad formats & sizes.
Medialets works closely with industry standards committees, such as the IAB and MMA, who are actively working to define standard ad formats and sizes for mobile and tablet publications. Media planners should take into account that each Property on a plan may potentially require the production of multiple ad units. Often, those ad units can not be instantly repurposed from one Property to the next, even when the ad dimensions are identical. Medialets utilizes the world's leading creative tools and processes to soften additional production costs that can otherwise grow to an unanticipated scope when multiple publisher properties are on a single media plan. Medialets will work closely with media planners to gain a clear understanding of the overall level of effort to produce the necessary creatives for any given media plan before it is finalized, approved, and executed.
15. Create fewer, more accommodating ad designs using safe areas.
Dimensions of mobile ad placements are beginning to standardize. However, today’s larger media plans that include placements from numerous publishers and ad networks are still likely to include multiple sizes that are extremely similar to one another. For example, a single media plan might contain handset banners that are 320x50, 300x50, and 320x53. Upon seeing these three sizes, a design team’s first impulse would be to deliver three separate Photoshop files --- one for each ad size. Sometimes that may be necessary for creative reasons. However, if the same creative execution is to run in all three of the placement sizes, then applying a common safe area with margins to a single design will save time in both the design and development phases of ad production.
In this example media plan where 320x50, 300x50, and 320x53 banners must each be supplied, designers could create a single Photoshop file that is 320x53 (the largest size) and then center a 300x50 safe area (the smallest size) within it. The designer would keep all key design elements for the execution within the safe area while assuring that the margins around the safe area contained artwork that was acceptable to crop off in the smaller placement sizes.
16. Apply a “safe area” to orientation-aware ad creative.
Tablet devices have rectangular screens and are almost universally designed to be used in either portrait (tall) or landscape (wide) orientation. End users have therefore learned to expect that content on the screen of their tablets will always be “upright” no matter which direction they happen to be holding their device. Often, ad creative --- especially full-screen ad creative --- will need to be designed to dynamically rotate to match the device’s current orientation. However, since tablet devices have rectangular screens, the space where the ad creative sits will change between tall and wide aspect ratios when the user rotates the device while the ad is on-screen. In these cases, ad designers and developers have a choice as to whether to create a flexible ad layout --- essentially two different layouts --- or create a single layout that keeps the main content of the ad unit within a “safe area.” An orientation-aware ad’s safe area is calculated by taking the smallest of the two possible heights and two possible widths, and centering that both horizontally and vertically that within the space defined by the largest of the two possible widths and heights. The area within the design that falls outside the safe area can contain content (such as background images), which may be cutoff depending on the orientation of the device unless it is repositioned within the design to remain on-screen upon orientation changes. Designing within a safe area dramatically reduces production work as only one design needs to be created and developed.
17. Video tracking Best Practices.
Recommended tracking for user initiated video (whether inline or fullscreen):.
- Video Start
- Video Pause
- Video play quartiles:
- Video play reached 25% of total video duration
- Video play reached 50% of total video duration
- Video play reached 75% of total video duration
- Video play reached 100% of total video duration
Tracking auto-play video may artificially inflate video tracking metrics. Medialets recommends implementing the above tracking metrics for user initiated video only.
We hope you found these best practices helpful. To learn more about Medialets rich media, contact us at email@example.com.