Building Responsive Ads

* [Overview](#overview) * [Video Tutorial](#video-tutorial) * [FAQs](#faqs) [block:api-header] { "type": "basic", "title": "Overview" } [/block] Flite’s responsive ads feature allows you to implement flexible breakpoints on each stage. Once these breakpoints are implemented via *Max. Width* settings, Flite will detect the width of the parent container and serve the appropriate stage which provides the end user with a responsive experience. Breakpoints are also flexible and can scale appropriately to the container allowing for a complete edge to edge experience. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/uoU0AwBKSTi9VZwrhqQ0", "Screen+Shot+2015-10-30+at+11.32.21+AM.png", "292", "442", "#142f43", "" ] } ] } [/block] ## Responsive Selector On the Stages panel, click the plus button to create a new stage. The new stage will now have a responsive option. Click the responsive option to expose the responsive settings within the inspector panel. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/8IrletmRV6MBmd6CnhkM", "responsive_add_stage.gif", "564", "649", "#415c73", "" ] } ] } [/block] ## Orientation The orientation setting will default to *Any*. However, landscape and portrait options are also available to accommodate any specific use case that may require the ad to load in a specific orientation [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/CuuDCQB7RhOVD6dxAc5q", "Screen+Shot+2014-11-11+at+11.59.09+AM.png", "291", "147", "#4477f1", "" ] } ] } [/block] ## Maximum Width *(Breakpoints)* Set your maximum width settings here to determine when a specific responsive stage should load. There are four presets available as well as a custom option. These options are as follows: * X-Large - Desktop * Large - Laptop * Medium - Tablet * Small - Mobile * Custom - Any Custom Breakpoint [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Yv5OjoXGSNueVJNyFohW", "presets.gif", "297", "477", "#153145", "" ] } ] } [/block] [block:callout] { "type": "info", "title": "NOTE", "body": "When setting breakpoints, each maximum width setting should be minus 1px of the next largest stage. For example, if you are targeting a viewport of 1920px, then your breakpoint should be 1919px. This will ensure that anything below 1920px will be served the appropriate stage." } [/block] ## Maximum Width Presets Each stage preset will populate commonly used maximum width settings. Use the presets to set up your responsive stages or choose Custom to define your own. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Mfp8gGdSGPaD4jb2VDQw", "Screen+Shot+2014-09-30+at+5.09.23+PM.png", "256", "26", "#4e88bf", "" ] } ] } [/block] ## Fluid Ads *(Auto-Scale to Fit Container)* The fluid feature seamlessly fills the gap between breakpoints. Breakpoints gives you the ability to create one ad for Desktop, Mobile, and Tablet. Enable fluid and this same ad can support multiple mobile devices, think iPhone 5, iPhone 6 to iPhone 6+. Breakpoints can get your pretty far but fluid takes you the rest of the way. To use Fluid Ads, simply check the box labelled *Auto-Scale* in the breakpoint settings for any responsive ad. This checkbox is activated by default for all new responsive ads. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/elHWTaDGQpuazGZmDuS5", "Screen+Shot+2015-10-30+at+11.04.27+AM.png", "287", "101", "#2971c3", "" ] } ] } [/block] ## Responsive Stage Indicator A responsive stage includes an indicator in the Stages panel as well as displaying the maximum width associated with the selected stage when hovering over the indicator. You can reference the Stage indicator for a quick overview of the maximum width settings for each stage. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/goLkLoJRSJuQM5SENyTC", "Screen+Shot+2014-09-30+at+3.31.51+PM.png", "326", "105", "#305d85", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Video Tutorial" } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F109077323&url=https%3A%2F%2Fvimeo.com%2F109077323&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F492941690_1280.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=vimeo\" width=\"1280\" height=\"720\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://vimeo.com/109077323", "title": "Flite Ad Design- Responsive", "favicon": "https://f.vimeocdn.com/images_v6/favicon.ico", "image": "http://i.vimeocdn.com/video/492941690_1280.jpg" } [/block] [block:api-header] { "type": "basic", "title": "FAQs" } [/block] ## Will I have to manually recreate every stage that has a breakpoint? You can duplicate the stage using the duplicate stage option in the stages panel. Additionally, if you have multiple stages targeting specific devices, for example iPhone6 and iPhone6+, turn on auto scaling and it will allow the breakpoint to fill between stages that are targeting the same class of device. In this example, this would save you from creating a stage and breakpoint specifically for iPhone6 and 6+. ## Will I need to create and traffic multiple tags? A: No, the concept of stages allows for responsive functionality to happen all within a single tag. ## What stage will be loaded if none of the responsive maximum widths are satisfied? Two events are triggered to detect the viewport. The first event occurs on load of the ad unit. The second event occurs if the browser is resized. During both events, Flite will attempt to serve the appropriate stage in the event that the maximum width settings are not satisfied which in some cases, may be the default stage.

Flite Help Center

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio