Getting started with responsive HTML5

Adnami’s templates make it easy to create attention grabbing high impact formats using just a few image or video assets, but there are times when a more custom solution is needed. This is where responsive HTML5 comes in - it enables full creative freedom to design and build (almost) anything you can imagine. This guide will cover useful tips, information and advice to help you get started with your responsive creative builds.

What is responsive creative?

A responsive creative is a banner that can automatically adapt to fit the width and height of its container. Unlike traditional “standard” banners which are designed for fixed dimension placements, responsive banners are flexible and can adapt to almost any size and shape. This makes responsive HTML5 a great choice for use in high impact formats, ensuring great looking creative regardless of screen size or device.

Unlike the image and video templates, responsive HTML5 creative does not have the same reliance on safe zones - each of the key elements can be positioned and scaled relative to the edges of the banner, ensuring they are always proportional and fully in view.

Adnami format tags are all device specific, so when building responsive HTML5 creative you only need to know if the format will appear on desktop (landscape) or mobile (portrait), and then design the assets accordingly.

 

Creating your design

The ultimate goal of designing responsive formats, is to support as many screen sizes and resolutions as possible. We advise always designing for the largest screen sizes to ensure the assets exported will have a sufficient quality across all screens.

Striking a balance

Asset 6Large assets dimensions can result in a heavy file weight - use compression tools like tinypng or squoosh to make sure assets are as compressed and lightweight as possible. 

Finding a starting point

Asset 6Desktop formats - design using a 2560x1440 (16:9) artboard (or 1920x1080 for video creative).

Mobile formats - a 1080x1920 (9:16) artboard is good for both image and video-based creative.Asset 6

These dimensions are a good starting point for designing and planning creative builds, but it's important to remember that the goal of responsive creatives is creating a design that can adapt and resize to fit various devices and screen sizes. Building responsive HTML is much more about defining a structure and rules for shaping assets versus creating a pixel-perfect replication of a static design.

Responsive units

Responsive units (or relative units) are the key to unlocking responsive behaviour. They are CSS units (used to style HTML) that enable the creation of adaptive layouts within a responsive banner. 

Unlike pixel units (a measurement based on the size of a single pixel on a device's screen), responsive units scale with the size of the screen, making them more useful for developing creative that looks great on all screens of all sizes.

Important terminology

The terms “parent” and “child” are commonly used when discussing element structure in HTML, and relate to how elements are nested on a page. A parent is any element that wraps or “contains” another element and a child is any element that is nested inside of another element. 

3 commonly used responsive units

Percentage %

Using percentage (%) as a unit means the value is based on the dimension of the parent container (axis specific). 

For example, setting the width of an element to 30% means its width will be equal to 30% of the width of its parent element. A height of 50% would mean 50% of the height of its parent element.

Note that the values returned are axis specific, so a height can’t be set based on the parent’s width and vice versa.

responsive html__percentage_html

Viewport width (vw)

Viewport width (vw) is a unit that represents a percentage of the total width of the banner (ie the viewport). By using vw units, the property of an element can be set based on the current viewport width. 

For example, setting an element's width to 30vw means its width will always be equal to 30% of the banner’s total width, regardless of the parent container’s size. Unlike with the % unit, vw units can be used to set the value for almost any numeric CSS property (width, height, font size etc), regardless of current axis.

responsive__viewport_height

Viewport height (vh)

Viewport height (vh) is a unit that represents a percentage of the total banner (viewport) height. Using vh units enables properties to be set relative to the height of the viewport. 

For example, setting an element's width and height to 30vh means it will appear as a square, with a side length equal to 30% of the viewport height.

Responsive units can be applied to most CSS properties, enabling the easy creation of content that scales with the width or height of the viewport. For example, using vw as a unit for font-size will automatically scale text up or down in size relative to the viewport width.

responsive__viewport_width

Position

responsive__position

In responsive builds, it's often useful to position elements from their right or bottom edges instead of just the top-left corner. This allows them to adapt to and fit different screen sizes, where the position of the element maintains a specific distance from the right or bottom edge of the banner.

Nesting child elements within a parent container can be an easy way to maintain a specific layout. For example, if a top or bottom position of child elements is set to 0 and the height of the parent container is set to 80vh, it is easily ensured that all the content will be contained within an 80% height viewport (very useful for our Midscroll formats).

Responsively scaling images and video

So far we've covered how to use responsive units to set the width and height of an element and how to position it within a given space. However, if applying these values directly to an image or video element, they will appear stretched or distorted (their aspect ratio is not maintained).

2 methods to preserve an aspect ratio

Asset 6 Set only the width or the height (but not both) and set the other value to “auto”. This will automatically scale the asset based on the value set and the original aspect ratio. E.g. width: 20vw; height: auto;

Asset 6 Set both width and height, then use the object-fit CSS property to determine how the asset should behave. This grants access to more advanced layout configurations, where an image can be constrained to both a given width and height. E.g. width: 20vh; height: 20vh; object-fit: contain;

Key values of object-fit property 

Cover and contain control how an asset is scaled.

Asset 6The cover value is typically used for background assets that need to cover the entire banner and that may get cropped at the edges.

Asset 6The contain value would be used for logos and other graphics which always need to be fully visible.

When using the object-fit property, it may also be helpful to use the object-position property, which allows the anchor point (or focal-point) of an asset to be set. This is the point or position around which any responsive scaling is anchored around.

The default value is “50% 50%” (the horizontal and vertical centre), but it can be set to any value necessary. For example if the “focal point” of an image is ¾ of the way across the image, it’s possible to use: width: 100%; height: 100%; object-fit: cover; object-position: “75% 50%”;

cover_cover content

 Pixels

Screen real estate is key for driving attention. The more screen space a format occupies, the more attention it demands. This makes larger and more responsive high impact formats ideal for capturing attention versus smaller display formats.

Creative

Videos or ads with movement tend to be more effective than static images in driving attention. Aggregated index data from our platform found that video content secures x2.7 more in-view time than still creative. Other elements such as clear and instant branding, CTA and design quality are elements that play an important role in capturing attention.

Time

Videos or ads with movement tend to be more effective than static images in driving attention. Aggregated index data from our platform found that video content secures x2.7 more in-view time than still creative. Other elements such as clear and instant branding, CTA and design quality are elements that play an important role in capturing attention.

Placement

The location of an ad format within an online environment is a crucial factor in driving attention. Ideally, ads should be placed within the content zone, preferably at the center and as high up the page as possible.

Interaction

Ads that users are actively and deliberately interacting with typically generate higher recall and awareness.

final thoughts

Testing - the final steps 

Testing locally 

It's always best practice to regularly test responsive creative, here are some simple steps to take to ensure that it is behaving as intended.

Asset 6Open the HTML file in any web browser and check that the creative looks correct. If set up correctly, the creative should fully cover the whole browser window, without any empty white gaps or space.

Asset 6Test resizing the browser. Do this by dragging one of the corners of the browser window or using the device view mode within the browser's developer tools.  

Asset 6As the window is resized, the banner should resize and adapt with it. 

Asset 6Don’t worry about supporting extreme aspect ratios, generally the aspect ratio of a creative will stay roughly the same. Meaning there is no need to be concerned with making a portrait mobile banner work in a wide desktop landscape aspect ratio, etc. 

 Asset 6Check to make sure that all of the banners elements are displaying and resizing as intended. If issues arise, try adjusting or adding additional CSS properties as necessary. 

Testing with Adnami 

Once a creative has been tested locally, we also recommend testing it in the Adnami platform.

Asset 6Upload it into the Adnami platform, and test it on a preview page. 

Asset 6Make a new creative of the desired format, set “Zip File” as the banner type, and upload the zipped up HTML banner directly into the wizard.

Asset 6Once saved to a campaign, generate a preview link and test in-situ.  

Asset 6Check that the creative still looks as expected. If changes need to be made, re-upload the zip file and re-save to update the preview.

After reading our guide we hope you have a better understanding of responsive HTML - now get creative! Check out the links below for more details and examples of our various templates.

Additional resources

HTML Introduction: https://www.w3schools.com/html/html_intro.asp
CSS Introduction: https://www.w3schools.com/css/css_intro.asp
GSAP Introduction: https://greensock.com/get-started/
HTML Template: HTML file download

Want to learn more?

Have a question or idea? Book some time with one of our friendly experts to get started!