Responsive Design

Responsive Liveclicker elements

Most Liveclicker elements are designed to be responsive. This is because they are primarily delivered as simple <img> tags, which allow for fluid resizing in a responsive email template. However, for elements that require more than just an <img> tag, responsiveness is only guaranteed if they are specifically NOT optimized for iOS. Below is an overview:

Liveclicker element	Responsive Design
LiveCalendar	Yes
LiveCoupon	Yes
LiveFeed	Yes
LiveForecast	Yes
LiveImage	Yes
LiveMap	Yes
LivePoll	Only LivePoll elements that are not iOS optimized
LiveReveal	Only LiveReveal elements that are not iOS optimized
LiveScrape	Yes
LiveSlides	Only LiveSlides elements that are not iOS optimized
LiveTimer	Yes
LiveTracker	Yes

Note: If you are using iOS optimization for LivePoll, LiveSlides and LiveReveal, please refer to the section on using media queries for responsiveness.
With LiveVideo, and iOS optimized LiveSlides, LivePoll, and LiveReveal embed codes, the element will take the whole width of its parent container since it makes use of the width: 100% CSS rule. This allows the element to be responsive, without the need for media queries.

Use the Width:100% CSS rule for auto resizing

Should you come across any issues (perhaps there are conflicting styles on the <img> tags in your email template or the image is overflowing its container), you can add a style="width: 100%; height: auto" attribute to the <img> tag to ensure proper sizing.

In doing so, the elements will resize fluidly to match the width of their container, and the height will scale automatically to keep the correct aspect ratio.

Here's an example of how adding that attribute would look:

Copy

<!-- Start RealTime Email Embed - Patents Pending -->
<a href="https://em.realtime.email/service/rte?kind=liveimage_clickthrough&id=2026390025&esp_uid=%%subid%%"><img style="display: block;" src="https://em.realtime.email/service/rte?kind=liveimage&id=2026390025&esp_uid=%%subid%%" border="0" alt=""
style="width: 100%; height: auto"
/></a>
<!-- End RealTime Email Embed - Patents Pending -->

Note: Do not place this attribute/embed code in the following places:
The <head> tag
Between the <head> and <body> tags
Between a <table> and a <tr> tag
Between a <tr> and a <td> tag
Between </td> and <td>
Between </tr> and <tr>
Between </tr> and </table>
Outside the <body> tag

Use of Media Queries for responsive design on different media

What are Media Queries?

Media queries are an alternative way to identify content. Unlike elements that are based on <img> tags, elements relying on <video> tags, or <div>'s for interaction will not resize fluidly in a responsive email template. This is because there is no concept of an 'auto' height for <div> or <video> in email clients.

Instead, a pixel height and width must be assigned in order to display the content correctly. We do this with media queries, by assigning dimensions to the wrapper (div.liveclicker-dimensions), and the <div> or <video> within will inherit the dimensions set on that wrapper.

The 'dimensions' div will have a unique ID appended after the underscore, and your media query rule will need to match the unique ID in your embed tag.

Understanding responsive email templates

Generally speaking, there are 2 types of responsive email templates.

Static templates resize and change layouts based on certain design breakpoints.
Fluid templates will adjust layouts to fill any size (using a % based design).

For static templates operating on design breakpoints, you can add new dimensions for the element that will correspond with the breakpoints in your design. For each 'view', you'll need to set new dimensions for your content.

For fluid templates, where the layout 'stretches' as it resizes, you will have a little more work to do with this option.

Since our <div> and <video> elements do not resize fluidly, we need to set fixed dimensions at the known sizes that the template will be viewed. We do this with media queries, resizing the dimensions wrapper at known device sizes.

You will have media queries and dimensions for each iOS device. You can determine the proper dimensions for each device by doing a 'render check' using browser development tools to emulate them and calculate what the dimensions of your content should be on each.

Then, since the <div> and <video> tags are only rendered in iOS and we fall back to an <img> elsewhere, you can set default styles (outside of a media query) in your template with %-width and 'auto' height that will resize fluidly. We'll show you the media queries that you will need for some of the main devices.

Media Queries for Specific Devices

Copy

Android Devices

/* ----------- Android devices ----------- */
@media only screen and (max-device-width: 480px) {
div.liveclicker-dimensions{ width:100% !important; height:auto !important; }
}

Copy

iPhone5 and 5S

/* ----------- iPhone 5 and 5S ----------- */
@media only screen and (device-width: 320px) {
div.liveclicker-dimensions {
width: ___px;
min-width: ___px;
height: ___px;
}
}

Copy

iPhone6

/* ----------- iPhone 6 ----------- */
@media only screen and (device-width: 375px) {
div.liveclicker-dimensions {
width: ___px;
min-width: ___px;
height: ___px;
}
}

Copy

iPhone6+

/* ----------- iPhone 6+ ----------- */
@media only screen and (device-width: 414px) {
div.liveclicker-dimensions {
width: ___px;
min-width: ___px;
height: ___px;
}
}

Note: For LiveVideos, instead of targeting div.liveclicker-dimensions, you can target the class div.lc-video which is present in all LiveVideo embed codes.

Handling Device Orientation in iOS Mail

If your template calls for different element sizes when the device is in portrait vs. landscape orientation, it's important to note that the (orientation: ###) media query parameter is not fully supported in iOS Mail, so the typical CSS3 media query you'd use in a browser will not work.

Because of this, we need to set device media queries for each scenario, like this:

Copy

/* ----------- iPhone 5 and 5S Portrait ----------- */
@media only screen and (width: 320px) {
div.liveclicker-dimensions {
width: ___px;
min-width: ___px;
height: ___px;
}
}
/* ----------- iPhone 5 and 5S Landscape----------- */
@media only screen and (width: 568px) {
div.liveclicker-dimensions {
width: ___px;
min-width: ___px;
height: ___px;
}
}

Instead of providing min/max device-width dimensions in a single query, we need to split the media query into two queries, one for the width of the device in portrait mode, and one for the width of the device in landscape mode.

Please Note: Liveclicker is no longer using 'device-width' in the rule, but instead are using just plain 'width'.