Ad Framework Guide
If you’re designing your own GumGum ads, this guide will help you better understand how our ad framework works. Whether you’re using our Photoshop templates or starting from scratch, we know questions can come up—especially around responsive design and ad specifications. This page offers a deep dive into the anatomy of a responsive GumGum ad, giving you the clarity and confidence to build creative that looks great across every environment.
You’ll learn more about:
Main Content Area – the primary space for your messaging and visuals
Responsive Tiling – how your design dynamically adapts across different screen sizes
Side Ornamentation – creative elements that add unique visual flair to cross-platform formats and help your ad stand out among other placements on the page
💡 Note: This guide only applies to responsive ad formats with the exception of Desktop and Mobile Skins. Other unit types such as In-Screen Frame, In-Screen Expandable Corner and Hang Time are NOT built using the responsive framework covered here.
Main Content Area
Consider the main content area as a container for the most important elements of the ad, e.g. the logo, product shots, headlines, subtext, CTA, etc. The specs for the main content area are subject to change based on the unit type.
Content
Background
If possible, do not include important elements or text along the very bottom of the main content, area highlighted in red.
One or two visual elements such as a logo or product image can exceed beyond the max height of the main content area.
Be mindful with the placement of your designed elements, particularly in the top right corner of the main content area where the info/close buttons are usually located.
The main content is always placed on a background, which can be any shape or color but it should never be translucent as the content needs a solid background in order to maintain legibility.
To increase the overall footprint of the ad, the background can exceed the width of the main content area as long as the content itself remains within spec, as seen in the example above.
Responsive Tiling
Surrounding the main content area is the responsive tiling, which is the part that expands to the entire width of the screen or viewport. It's also clickable which helps boost CTR immensely. In regards to specs, it should be a minimum height of 60px (or 120px in Photoshop) but on expandable formats, the tiling can grow taller, as seen in the example below.
Tiling can be made with a solid color, a pattern or seamless texture. Regardless of the fill, we highly recommend not going less than 50% or 60% opacity for the tiling.
Side Ornamentation
When it comes to responsive ad formats, including side ornamentation is highly recommended given that it’s a great way to increase the overall footprint as well as visual impact of an ad on wider viewports. With that in mind, designers can include elements on either side of the main content area as long as they remain below the max height.
Sizing
Unit Type | Max Height | Max Width |
In-Screen/In-Image (legacy) | 90px | Up to 180px |
In-Screen Expandable (collapsed) | 80px | Up to 180px |
In-Screen Expandable (expanded) | 150px | Up to 180px |
In-Screen Velocity (collapsed) | 80px | Up to 180px |
In-Screen Velocity (expanded) | 150px | Up to 180px |
Please note: Same specs apply to In-Screen Expandable Video and In-Screen Velocity Video. We recommend, all artwork is designed in Photoshop at 2x scale for retina displays.