Flip-kortin luominen sähköpostissa


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; }
<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; }
  }
@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.

Litmus's Trends in Email Design and Marketing -e-kirjan etukansi

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.

Katso trendit



Source link

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like these

This error message is only visible to WordPress admins

Error: No feed found.

Please go to the Instagram Feed settings page to create a feed.