Olet ehkä huomannut, että olemme luovia animaatioiden ja interaktiivisuuden kanssa Toukokuun uutiskirje lisääntymisen toivossa sitoumus tarjoamalla yllätystä ja iloa postilaatikkoon. Ja bonus, se oli hauskaa! Hauskaa suunnitella, koodata ja leikkiä.
Tätä edistynyttä CSS-animaatiota tuetaan enimmäkseen Apple Mailissa, joten varmistamme, että tarjoamme version, joka toimii muissa sähköpostiohjelmissa, joissa tuetaan vähemmän CSS-animaatioita. Ja varaosia, joissa ei tueta CSS-animaatioita.
Joten miten teimme sen? Olen niin iloinen, että kysyit.
Animaation rakentaminen
Aloitamme rakentamalla edistyneimmän version: flip card -version. Flip-kortin rakentaminen verkkoon on suhteellisen yksinkertaista eikä vaadi edistyneitä CSS-animaatio. Mutta tietysti tämä on sähköposti, joten meidän on tehtävä vähän hauskoja muutoksia, jotta se toimisi, koska kaikkea ei tueta.
Ensin luomme säilöjä kortin etu- ja takapuolelle:
<div class="card-flip">
<div class="content">
<div class="front">
[Front content]
</div>
<div class="back">
[Back content]
</div>
</div>
</div>
Voit laittaa säilöihin mitä tahansa, mutta koska työskentelemme sähköpostitse, suosittelen kuvien käyttöä CSS:n tai tekstin sijaan. Varmista, että kuvissa on vaihtoehtoinen teksti, erityisesti jos niissä on tekstiä. Varmista kortin takapuolella, että kuva on käännetty. Koska aiomme pyörittää sitä niin, että se on oikea tapa animaation kanssa, meidän on aloitettava se päinvastoin.
<div class="card-flip">
<div class="content">
<div class="front">
<img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-card-back-min.png" width="162" height="250" >
</div>
<div class="back">
<a rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/"><img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-rev.png" width="162" height="250" alt="The Ultimate Guide to Web Fonts in Email"></a>
</div>
</div>
</div>
Sitten käärimme koko asian johonkin ehdolliseen koodiin piilottaaksemme sen Outlookista ja taulukon soluun, jonka luokka on “interaktiivinen”:
<tr>
<td class="interactive" align="center" valign="top">
<!--[if (gte mso 9)|(IE)]><!-->
<div class="card-flip">
<div class="content">
<div class="front">
<img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-card-back-min.png" width="162" height="250" >
</div>
<div class="back">
<a rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/"><img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-rev.png" width="162" height="250" alt="The Ultimate Guide to Web Fonts in Email"></a>
</div>
</div>
</div>
<!--<![endif]-->
</td>
</tr>
Nyt kun meillä on kortit, varmistetaan, että ne on asetettu oikein, eli päällekkäin kortin takapuoli piilossa.
Meidän on ilmoitettava korttien koko käyttämällä leveyttä ja korkeutta, jotta ne vastaavat kuvien kokoa. Käytämme tätä sitten uloimpaan
:iin, jotta meidän ei tarvitse huolehtia siitä, että yksikään sisäinen divs on erikokoinen. Lisäämme myös perspektiiviominaisuuden, jotta saamme animaation kolmiulotteisen vaikutelman.
.card-flip {
width: 162px;
height: 250px;
perspective: 500px;
}
Seuraavaksi lisäämme varjon (hauskoja varten) ja muunnoksen sisällön div:iin:
.content {
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
}
Ja lopuksi lisäämme sijoittelua ja näkyvyyttä varmistaaksemme, että kuvat ovat päällekkäin. Lisäämme myös leveys- ja korkeusominaisuudet varmistaaksemme, että kortit kohdistuvat oikein. Ilman niitä etukuva loppuu hieman sivuun.
.front, .back {
position: absolute;
width: 100%;
height: 100%;
}
Nyt kun kortit on muotoiltu, lisäämme animaation. Pyöritämme korttia Y-akselilla:
.card-flip:hover .content {
transform: rotateY( 180deg ) ;
transition: transform 0.5s;
}
Verkkoa varten meidän on sisällytettävä muunnostyyli: säilytä-3d; mutta sitä ei tueta sähköpostissa. Sen sijaan piilotamme takakortin antamalla sille opasiteetiksi 0 ja siirrämme sitten takakortin peittävyyden 100 %:iin, kun hiiri vedetään.
.back {
opacity: 0;
transition: opacity 0.5s;
}
.card-flip:hover .back{
opacity: 100%;
transition: opacity 0.5s;
}
Jotta siirtyminen olisi sujuvaa, teemme etukortille päinvastoin.
.front {
opacity: 100%;
transition: opacity 0.5s;
}
.card-flip:hover .front{
opacity: 0;
transition: opacity 0.5s;
}
Lopuksi käärimme koko CSS-lohkon mediakyselyyn kohdistaaksemme WebKit-asiakkaille (useimmiten Apple-asiakkaille) ja lisäämme luokkia varmistaaksemme, että se näkyy siellä, mutta piilotetaan muissa kuin WebKit-asiakkaissa. Kaiken kaikkiaan tyylilohko näyttää tältä:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.fallback { display: none; }
.interactive .card-flip { display: block; }
.card-flip {
width: 162px;
height: 250px;
perspective: 500px;
}
.content {
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
}
.card-flip:hover .content {
transform: rotateY( 180deg ) ;
transition: transform 0.5s;
}
.back {
opacity: 0;
transition: opacity 0.5s;
}
.card-flip:hover .back{
opacity: 100%;
transition: opacity 0.5s;
}
.front {
opacity: 100%;
transition: opacity 0.5s;
}
.card-flip:hover .front{
opacity: 0;
transition: opacity 0.5s;
}
}
Ja voila! Flip-kortti, joka toimii Apple Mailissa!
Varmuuksia, koska tämä on sähköposti.
Ja koska kaikkia sähköpostiohjelmia ei ole luotu tasa-arvoisiksi, meidän on luotava perääntyä versiot. Flip-kortille on hauska varavaihtoehto, joka toimii edelleen monissa sähköpostiohjelmissa – kuvan vaihto, kun hiiri siirretään. Tämä ei kuitenkaan kata kaikkia sähköpostiohjelmia, joten sähköpostiohjelmille, jotka eivät tue hiiritoimintoa (tai mobiiliasiakkaille, joissa se on tuettu, mutta käyttökokemus ei ole kovin hyvä), luomme varavaihtoehdon, joka on vain luettelo.
Hover-tuettu varavaihtoehto
Gmail, Yahoo ja AOL tukevat kaikki :hover, joten meidän ei tarvitse menettää näiden asiakkaiden interaktiivista elementtiä. Mutta koska he eivät tue kantaa: ehdoton; meidän on annettava erilainen versio.
Näissä tapauksissa käärimme -tunnisteen taustakuvalla toisen kuvan ympärille. Sitten kun viemme hiiren -tunnisteen päälle, kuva katoaa.
Ensin muotoillaan taustakuvalla.
<a rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/" style="background-image: url('https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%;"> </a>
Sitten varmistamme, että se näkyy lohkona ja annamme sille leveyden ja korkeuden, jotta taustakuva tulee näkyviin.
<a rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/" style="background-image: url('https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;”> </a>
<a class="card" rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/" style="background-image: url('https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;box-shadow: 4px 4px 3px rgba(0,0,0,0.12);">
<img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-card-back-min.png" width="162" height="250" alt="The Ultimate Guide to Web Fonts in Email">
</a>
Kuvan vaihto onnistuu helposti lisäämällä luokkaan leijuustila ja käskemällä kuvan poistumaan.
.card:hover img { display: none; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); }
Erittäin hauska bonuskoodausvinkki!
Näytön käyttö: mikään yllä oleva tekniikka ei voi olla järkyttävää. Voit tasoittaa siirtymää käyttämällä opasiteettia: 0; sen sijaan ja lisäämällä sitten siirtymä: opasiteetti 0,5 s; sekä hover-tilaan että kuvan riviin:
.card:hover img { opacity: 0; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); transition: opacity 0.5s; }
.
.
.
<a class="card" rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/" style="background-image: url('https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;box-shadow: 4px 4px 3px rgba(0,0,0,0.12);">
<img src="https://campaigns.litmus.com/_email/2022/May/2022-05-Newsletter/mod7-card-back-min.png" width="162" height="250" alt="The Ultimate Guide to Web Fonts in Email" style="transition: opacity 0.5s;">
</a>
Tätä ei tueta tällä hetkellä Gmailissa, Yahoossa tai AOL:ssa, joten se ei muuttaisi siellä mitään, mutta Applen sähköpostiohjelmille, jotka ovat halunneet pienentää liikettä, se tuo mukavan vaikutelman.
Koska tämä varaversio on edelleen interaktiivinen versio, asetamme sen taulukon soluun class=”interactive” heti animoidun version jälkeen ja lisäämme sitten tyylejä piilottaaksemme sen WebKit-asiakasohjelmissa:
.interactive .card { display: block !important; }
Ei-hover-tuettu varavaihtoehto
Hover-tehostetta ei tueta kahdessa paikassa: Outlook ja mobiilisovellukset.
Luultavasti leijuusefekti On tuettu mobiilissa. Mutta kääntökortin tai kuvanvaihdon tapauksessa tehoste on vähemmän kuin ihanteellinen, koska se on napautusliike hiiriliikkeen sijaan.
Jos linkität kuviasi, napautuksella on lisäksi se vaikutus, että linkki laukaisee tilaajan lähettämisen aloitussivulle. Valitettavasti näin tapahtuu ennen kortti kääntyy, jotta tilaajat eivät tiedä, mitä he ovat napsauttaneet. Jos aiot käyttää kortteja linkittämiseen (kuten teimme), sinun on tarjottava myös varavaihtoehto mobiililaitteille.
Näihin varavaihtoehtoihin käytimme luetteloa, mutta voit halutessasi käyttää myös kappaletta tai vain etukuvaa. Oikeasti mikä tahansa toimii suunnittelussasi. Riippumatta käyttämästäsi sisällöstä kannattaa kääriä se div- tai taulukon soluun ja antaa sille varaluokka, jotta voit kohdistaa siihen:
<tr>
<td class="fallback" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" role="list">
<tr role="listitem">
<td align="left" valign="top" style="padding: 15px 8px;">
<img src="https://campaigns.litmus.com/_email/_global/emojis/sparkle.png" alt="" width="20" height="20" style="font-size: 16px; line-height: 26px; color: #BC5920;" />
</td>
<td align="left" valign="top" style="padding: 15px 0;">
<p style="font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;"><a class="link" style="color: #0f618a; text-decoration: underline;" rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/">The Ultimate Guide to Web Fonts in Email</a></p>
</td>
</tr>
</table>
</td>
</tr>
Jos teet sekä Outlookin että mobiiliversion, sinun on luotava kaksoisversiot, yksi mobiililaitteille ja toinen Outlookille. Kääri mobiiliversio samaan ehdolliseen koodiin, jota käytit yllä piilottaaksesi sen Outlookista, ja kääri sitten Outlook-versio ehdolliseen koodiin näyttääksesi sen Outlookissa:
<tr>
<td class="fallback" align="center" valign="top">
<!--[if (gte mso 9)|(IE)]><!-->
<table border="0" cellpadding="0" cellspacing="0" role="list">
<tr role="listitem">
<td align="left" valign="top" style="padding: 15px 8px;">
<img src="https://campaigns.litmus.com/_email/_global/emojis/sparkle.png" alt="" width="20" height="20" style="font-size: 16px; line-height: 26px; color: #BC5920;" />
</td>
<td align="left" valign="top" style="padding: 15px 0;">
<p style="font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;"><a class="link" style="color: #0f618a; text-decoration: underline;" rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/">The Ultimate Guide to Web Fonts in Email</a></p>
</td>
</tr>
</table>
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" role="list">
<tr role="listitem">
<td align="left" valign="top" style="padding: 15px 8px;">
<img src="https://campaigns.litmus.com/_email/_global/emojis/sparkle.png" alt="" width="20" height="20" style="font-size: 16px; line-height: 26px; color: #BC5920;" />
</td>
<td align="left" valign="top" style="padding: 15px 0;">
<p style="font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;"><a class="link" style="color: #0f618a; text-decoration: underline;" rel="noopener" target="_blank" href="https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/">The Ultimate Guide to Web Fonts in Email</a></p>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Jos käytät vain Outlook-versiota, voit jättää mobiiliosion pois ja pitää Outlookin vain käärittynä ehdollinen koodi.
Lisää nyt luokka, jolla voit hallita, milloin kyseinen mobiilivaraversio tulee näkyviin. Varmista ensin, että varavaihtoehto ei näy ollenkaan, jotta se ei näy työpöytäohjelmissa:
.fallback { display: none; }
Koska varaosa sisältää myös Outlook-sisällön, lisää joitain ehdollisia tyylejä tuodaksesi sen takaisin sinne:
<!--[if (gte mso 9)|(IE)]>
<style>
.fallback { display: block; }
</style>
<![endif]-->
Kohdista useimpiin mobiiliasiakkaisiin lisäämällä tyylejä mediakyselyyn näytön koon perusteella (älä unohda !tärkeää ottaa huomioon .card-luokan upotetut tyylit!):
@media screen and (max-width:600px) {
.fallback { display: block; }
.interactive { display: none !important; }
}
Tämä ei kuitenkaan ota huomioon iPadeja, joilla on samat toiminnot kuin iPhoneissa ja toimii WebKitissä. Niille, joiden puoleen käännymme howtotarget.email ja huomaamme, että voimme kohdistaa iPadeihin hienon koodin:
@media (hover: none){
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .interactive { display: none !important; }
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .fallback { display: block; }
}
Ja vau, se on ollut matka, mutta siinä se! No enimmäkseen…
Älä unohda harkita…
Tumma tila
Muista ottaa huomioon tumma tila huomioita ja lisää näitä tyylejä tarjotaksesi tilaajillesi parhaan kokemuksen heidän mieltymyksistään riippumatta. Ja mieltymyksistä puheen ollen…
Vähennetyt liikeasetukset
Kääntöliike ei ole iso liike, mutta päätimme päästä eroon siitä tilaajille, jotka haluavat vähentää liikettä. Tässä tapauksessa sisällytämme edelleen interaktiivisuuden kuvanvaihtoon. Vähemmän liikettä, mutta silti paljon hauskaa:
@media (prefers-reduced-motion) {
.interactive .card { display: block !important; }
.interactive .card-flip { display: none; }
}
Gmail-leikkaus
Se on paljon koodia yhdelle kortille. Korttien lisääminen lisää koodia. Se on mahdollista pitää Gmailin leikkausrajan alapuolella (meillä oli 5 korttia ja koko loppu uutiskirje!), mutta se on ehdottomasti asia, joka sinun tulee olla tietoinen. Jos huomaat meneväsi yli, yritä minimoida koodisi. yleensä käytän SähköpostiCombmutta tiedän, että siellä on joitain koodieditoreja, joiden avulla voit minimoida rakentamisen aikana.
Näet valmiin koodin tässä.
Miten se suoriutui?
Koska versioita oli useita, pystyimme sisällyttämään UTM-koodeja eri sähköpostien linkkien toimivuuden seuraamiseen. Huomasimme, että interaktiivisen sisällön linkit muodostivat 12,2 % kaikista sähköpostin yksittäisistä napsautuksista. Ja, Vaikka emme tiedä, onko se tilastollisesti merkitsevä, havaitsimme napsautussuhteen kasvun, kun käytimme tätä interaktiivista elementtiä progressiivisena parannuksena.
|
Sähköpostitrendit: Suunnittelu ja markkinointi Lataa uusin oppaamme saadaksesi tilannekuvan viimeisimmistä suunnittelun ja markkinoinnin trendeistä, jotta sähköpostiohjelmasi pysyy tuoreena – ja tilaajat ovat kiinnostuneita. |
About the Author
