Interactive parts assist flip static emails into participating experiences that invite recipients to take motion. Flip playing cards are a easy mechanic that reveals promotional content material straight inside the message with out sending subscribers to a touchdown web page. On this information, we present you how you can construct a Flip Card recreation that works throughout AMP, interactive HTML, and fallback variations.
How this recreation works
Let’s first think about what recipients expertise.
The sport shows a card with a entrance and a again facet. On hover, the cardboard shifts barely to point interactivity. When the recipient clicks or faucets the cardboard, it flips and divulges the again facet with a promotional message, resembling a reduction code or particular supply.
The entrance facet can include teaser textual content, resembling “Would you want a reduction?” whereas the again facet reveals the reward (for instance, “Right here’s 30% off! Code: WINTER”) together with a call-to-action button.
This recreation can be utilized to do the next:
- reveal low cost codes in an attractive manner;
- current limited-time gives or secret offers;
- introduce product launches with hidden bonuses;
- create seasonal or vacation promo reveals;
- current academic or informational content material in a compact format;
- present before-and-after comparisons for services or products;
- clarify product options by revealing particulars step-by-step;
- run fast quizzes or information checks for subscribers.
To make sure the cardboard works throughout main electronic mail purchasers, we construct three variations inside a single electronic mail. Relying on the e-mail shopper every recipient makes use of, they’ll see the model supported by their atmosphere:
- an AMP model, which works in Gmail, Yahoo, and FairEmail;
- a kinetic model constructed with HTML5 and CSS3, works in Apple Mail, Thunderbird, and Samsung Mail;
- a fallback model for electronic mail purchasers that don’t assist interactivity.
Now, let’s transfer on to the implementation course of.
AMP model
Our recreation creation begins with a one-column construction that it’s good to place in your template and make seen solely in AMP HTML.
Subsequent, insert an HTML block into this construction and paste the next base code:
At this stage, either side of the cardboard, the entrance and the again, are positioned one under the opposite. We have to alter the structure in order that the second block turns into the reverse facet of the primary.
To do that, add the next types:
.promo-wrap-amp .promo {show: desk; width: 200%; rework: rotateY(0deg)translateZ(.1em)translateX(-25%); }
.promo-wrap-amp .entrance, .promo-wrap-amp .again { show: table-cell; width: 50%;}
.promo-wrap-amp .entrance { rework: translateX(50%) translateZ(.1em); }
.promo-wrap-amp .again { rework: rotateY(180deg) translateX(50%);}
These types place the again facet behind the entrance facet and put together the cardboard for a 3D flip impact.
Subsequent, add hover and click on types. On hover, the cardboard shifts barely. On click on, it rotates and divulges the opposite facet:
.promo-wrap-amp .promo:hover { rework: rotateY(10deg)translateZ(.1em)translateX(-25%); }
.promo-wrap-amp .promo.reveal { rework: rotateY(-180deg)translateZ(-.1em)translateX(25%); }
At this level, the cardboard nonetheless doesn’t flip. For the types to work, we have to add the category reveal to the container that wraps the cardboard.
Discover the block with class=”promo” and add the next AMP attribute:
[class]="(reveal == true ? 'promo reveal' : 'promo')"
Right here’s what this attribute does:
- [class] is a particular AMP attribute used to vary the category of a component dynamically. Right here, we examine the worth of the reveal variable. If reveal equals true, the factor receives the lessons promo reveal; in any other case, it retains the category promo.
Now, replace the part with class=”entrance” with these attributes:
[aria-hidden]="(reveal == true ? true : false)" on="faucet:AMP.setState({reveal: true})" position="button" tabindex="1"
Then, replace the block with class=”again” with these attributes:
position="button" tabindex="2" [aria-hidden]="(reveal == true ? false : true)" aria-hidden="true" on="faucet:AMP.setState({reveal: false})"
Right here’s a evaluation of the important thing attributes used:
- aria-hidden=”true” tells assistive applied sciences to disregard the factor;
- [aria-hidden] is an AMP binding that adjustments the worth of aria-hidden relying on the reveal variable;
- on=”faucet:” is the clicking occasion handler in AMP;
- AMP.setState({ }) creates or updates variables; in our case, setting reveal to true;
- position=”button” signifies that the factor behaves like a button, which is required when utilizing on=”faucet:” on nonbutton parts;
- tabindex=”1″ defines the tab order and can be required when utilizing on=”faucet:” on nonbutton parts.
As soon as these attributes are in place, the cardboard flips on faucet and divulges the again facet with the promotional content material.
If you wish to change the textual content, you are able to do so right here:
To alter the hyperlink for the button:
The AMP model is now prepared. You may evaluation the total AMP code right here:
Kinetic model constructed with HTML5 and CSS3
Now, it’s time to create a kinetic model, additionally referred to as the interactive HTML model, constructed with HTML5 and CSS3. This model works in Apple Mail, Samsung Mail, and several other different electronic mail purchasers.
We’ll begin with one other empty one-column construction, positioned under the AMP model. Choose it and set it to be seen solely in HTML.
After that, insert an HTML block into this construction and paste the next code:
The HTML model makes use of an identical structure, however the flip logic is constructed in another way.
On this model, the block with class=”entrance” is changed with a label tag that makes use of the for attribute. This label is linked to an enter, and the cardboard flip is triggered via the :checked state of that enter.
Essential: The enter is positioned on the very prime of the code. Don’t transfer it. The types use the CSS selector ~, which will depend on the precise order of parts within the code. If the construction adjustments, the flip impact could cease working.
The types are nearly the identical as within the AMP model. The primary distinction is the rule that flips the cardboard when the enter is checked.
Types
Let’s evaluation the types used within the kinetic model.
The bottom types outline the cardboard container and put together it for a 3D flip impact. The wrapper makes use of transform-style: preserve-3d and perspective to create depth, whereas either side of the cardboard are positioned to allow them to rotate across the Y-axis.
The back and front sides share the identical dimensions. The again facet is rotated utilizing rework: rotateY(180deg) in order that it stays hidden till the cardboard flips.
Subsequent, let’s take a look at the flip logic. Within the kinetic model, the impact will depend on the :checked state of the enter positioned on the prime of the construction. When the enter turns into checked, the container rotates.
As talked about earlier, this selector depends on the overall sibling combinator ~, which is why the enter should stay earlier than the cardboard container within the markup.
Hover types are additionally included. On hover, the cardboard shifts barely to point interactivity. This motion is outlined with a refined rework and transition rule utilized to the cardboard wrapper.
Lastly, transitions are utilized to make the animation clean. Either side of the cardboard use transition properties in order that the rotation seems pure when switching between the back and front.
Collectively, these types deal with the next:
- the 3D perspective;
- positioning of the back and front sides;
- hover motion;
- rotation on enter state change;
- clean animation.
With these types in place, the kinetic flip card behaves as anticipated in supported electronic mail purchasers.
Fallback model
We now have come to the final a part of the information: the fallback model. A fallback is required for electronic mail purchasers that don’t assist interactive HTML or AMP (Outlook and others).
This model retains the identical message and structure thought however with out interactivity. On this instance, the fallback exhibits the again facet of the cardboard, so each recipient nonetheless sees the supply.
We proceed engaged on the interactive HTML block that we created for the kinetic model. Insert the next code between the tag and the tag:
Would you want a reduction?
This is 30% off!
Code: WINTER
Substitute the placeholder textual content, and replace the button hyperlinks with your personal.
And replace the button hyperlinks to your web site:
Now add types so that every electronic mail shopper sees solely the model it might show. Add this code on the very finish of the model tag:
/* --- */ @media display and (-webkit-min-device-pixel-ratio: 0) { enter.fallback_ctrl:checked~.container { show: block !necessary; } enter.fallback_ctrl:checked~#fallback { show: none !necessary; } } [owa] .container { show: none !necessary; } [class~="x_container"] { show: none !necessary; } [id~="x_fallback"] { show: block !necessary; } @media display and (max-width: 600px) { physique[data-outlook-cycle] #fallback { show: block !necessary; } physique[data-outlook-cycle] .container { show: none !necessary; } }What is that this?
This enter controls whether or not the fallback block is proven or hidden via CSS. It's wrapped in conditional feedback, so it stays hidden in Outlook desktop.
Additionally word this block:
It incorporates the total fallback structure. It ought to use a easy table-based construction that Outlook can render. On this instance, it's a desk with hyperlinks to the online model.
The types under management whether or not the fallback model is displayed. For those who take away or remark them out, the fallback model might be seen, and you'll alter its design as wanted, however bear in mind to revive these types earlier than sending the e-mail.
These types don't comply with a single strict rule per shopper; as a substitute, they use a set of widespread show hacks:
- types beginning with [owa] are used for Outlook;
- [class~="x_container"] is used as a backup when [owa] doesn't apply;
- physique[data-outlook-cycle] targets Outlook cell on iOS and Android;
- mso-hide:all; is used to cover parts in Outlook.com.
The total code
Right here is the total code for the kinetic HTML model plus the fallback:
Would you want a reduction?
This is 30% off!
Code: WINTER
Wrapping up
You now have an entire flip card recreation that works throughout AMP-supported purchasers, interactive HTML environments, and fallback-only electronic mail purchasers.
You may alter the back and front content material, change the animation types, or use the cardboard to disclose several types of gives. The construction stays the identical, so you may reuse it for seasonal campaigns, product launches, or limited-time promotions.
Create distinctive emails with Stripo
