megfelelő

Ebben a cikkben

A bevált gyakorlatok után itt találja az animált GIF biztonságos, mobilra optimalizált GIF-beillesztési irányelveit.

Észrevette, hogy az animált és mozgó e-mailek egyre inkább elterjednek a beérkező levelek között? Megtesszük. E-mail marketing szakemberként vagy tervezőként megpróbálhatta felhasználni őket az e-mail konverziók növelésére. De azt is észrevettük, hogy a marketingesek nem mindig építenek be Animált GIF-ek az üzenetekben a legjobb tervezési gyakorlatok felhasználásával.

Érdekesség, hogy az animált GIF-eket valójában nagyon könnyen lehet használni az e-mailben: használhatók, mint bármely más képfájlt, és tökéletesen kompatibilisek a legtöbb e-mail klienssel. Az e-mailek sok GIF-jével az a probléma, hogy az üzenetekben szereplő cselekvésre ösztönzés gyakran a GIF-en belül található, ahogy Ann Taylor e-mailje is:

A "GO" cselekvésre ösztönzés valójában nem egy gomb: a kép része. Bármely kattintás fölött, alatt vagy a "gomb" körül ugyanolyan hatást gyakorol: egy Ann Taylor webhelyén lévő céloldalra vezet, mert a link az egész animált GIF-re kiterjed. Ez megkönnyíti az olvasók számára, hogy több információt kapjanak (és esetleg vásároljanak is), egyszerűen csak megérintve vagy kattintva szinte bárhol. De ez problémás is lehet. Ha az animált GIF fájlokat egy vagy másik okból nem helyesen jelenítik meg, az üzenet minden funkcióját elveszíti. Ez megtörténhet, ha ...

  • Képméret torzulások vannak a mobil olvasó eszközön
  • A képmegjelenítés nincs aktiválva azon az ügyfélen, ahol az e-mailt olvassa.
  • Egy hirdetésblokkoló program blokkolja a GIF-et.
  • A GIF egy nagy fájl, és az olvasó nem várja meg, amíg befejezi a betöltést

Továbbá az Outlook felhasználói nagy valószínűséggel csak állóképet fognak látni, mert az animáció nem fog működni. Ezen okok és mások miatt, Mindig javasoljuk az e-mail tervezés olyan megközelítésének alkalmazását, amely optimalizálja a HTML-t, és nem csak a képekre támaszkodik. Szeretné tudni, hogyan használja fantasztikusan animált GIF-eit e-mailben, miközben biztosítja, hogy a cselekvésre ösztönzése mindig megjelenjen? Olvass tovább.

A mai műhely

Ma újra elkészítjük a következő üzenetet a Banana Republic-tól, és megmutatjuk, hogyan lehet optimalizálni az animált GIF-ek használatát egy e-mailben annak biztosítása érdekében, hogy a tartalma megjelenjen.

Itt van egy összefoglalónk egy video oktatóanyagban:

És referenciaként íme a Banán Köztársaság teljes üzenete:

A Banana Republic e-mailben a kulcsüzenet, amely tartalmazza a cselekvésre ösztönzést, egyetlen képblokkban van, mint a fent látható Ann Taylor e-mailben. Az üzenet nagy része - a fekete rész - animált GIF:

Ez azt jelenti, hogy ha a képmegjelenítés le van tiltva, vagy a GIF összeomlik vagy nem töltődik be, akkor a teljes üzenet elvész.

Javítsuk ki.

1. lépés: izolálja az animált GIF-et

Az animált GIF ebben a bejegyzésben nagyszerű. Tehát akkor is, ha megjelenik a Beérkező levelek mappában, lehet, hogy nem töltődik be, vagy nem töltődik be teljesen, így az üzenet olvasatlanná válik. E problémák elkerülése érdekében jó gyakorlat a GIF-animáció kivágása, kivágva a kép azon részeit, amelyekre nincs szükség animációra. A Banán Köztársaság üzenetben ez azt jelenti, hogy el akarjuk különíteni a kép középső részét, azt a részt, amely mozog - az alábbi rózsaszín mezőben -, a többit pedig szöveggel és HTML-lel készítjük el.

A kép gyors kivágásához az ezGIF.com webhelyet használjuk. És itt van az új animált GIF:

2. lépés: Rendezze az e-mailt tartalomblokkokkal

Ma egy alapvető, egy oszlopos sablonnal indulunk a BEE e-mail szerkesztőben.

A tartalmi blokkok előre definiált felépítése nagyon hasonlít a szükségünkre: szöveg, majd a kép, majd további szöveg, majd cselekvésre ösztönző gomb.

Nem kell változtatni a struktúrán, mivel a szükséges tartalmi blokkok már jelen vannak, ezért csak a szöveg kitöltésével kezdjük, és előrelépésünk során mindenképpen fókuszált igazítást adunk mindennek. Töröljük azokat a szövegrészeket is, amelyekre nincs szükségünk, például a feliratok helyét a tetején.

Itt az ideje, hogy húzza a kivágott animált GIF-et, és a kép helyőrzőjébe dobja, ugyanúgy, mint bármely más képet.

Most, hogy a tartalmunk a helyén van, elkezdhetjük a formázást.

3. lépés: Használjon HTML háttérszíneket

A "SWEET TREAT" tartalmi blokkból a betűtípust fehérre állítottuk, és méretét 36 pixelre növeltük. Most folytatjuk azzal, hogy a feketét állítjuk be az üzenet háttérszínének, mint a Banán Köztársaság üzenetének GIF-jében.

Ehhez egyszerűen meg kell határoznunk a háttérszíneket a jobb oldali Sor tulajdonságai menüben, átlátszóvá téve a sor hátterét, a tartalom hátterét pedig fekete színnel.

Ugyanazokat a Sor tulajdonságokat adjuk meg az összes következő tartalmi blokknak, beleértve az animált GIF mögötti háttérszínt is.

Most az üzenet töretlen színtömbként jelenik meg. A befejezéshez formázzuk a többi szöveget.

A helyes szóközök megszerzéséhez még végre kell hajtanunk néhány utolsó kitöltési beállítást, és frissítenünk kell a CTA gombot, de az üzenetünk már majdnem megegyezik a Banana Republic képével; azonban megtettük biztonságos betűtípusokkal az e-mailhez és HTML háttérszínekkel.

Üzenetünk szépnek tűnik, és jelentősen csökkentettük annak elveszítésének kockázatát, ha a GIF nem látható. Megjelennek a színek, a szöveg, és ami a legfontosabb, a cselekvésre ösztönzés gomb.

4. lépés: Tartson be egy golyóálló cselekvésre ösztönző gombot

Spoileres riasztás: nincs szükségünk egyetlen HTML-sor kódolására, és semmit sem kell tennünk annak biztosítására, hogy a "TOVÁBBI TANULÁS" cselekvésre ösztönző gombunk mindenféle eszközön és e-mail kliensen működjön. A BEE szerkesztőben az összes gomb alapértelmezés szerint golyóálló, ami azt jelenti, hogy nem képalapúak, ezért mindig megjelennek, reagálnak és remekül mutatnak.

Csak annyit kell tennünk, hogy frissítjük a stílust a jobb oldali Tartalom tulajdonságai menüben. Először a gombnak fehér háttérszínt adunk, és a betűszínt feketére változtatjuk.

Miután ez megtörtént, a gomb így néz ki:

Ezután formázzuk a szöveget, megnövelve a betű y méretét és vastagabbá téve azt. Amikor növeljük a méretet, a CTA két sorban jelenik meg:

De ismét a Tartalom tulajdonságai menüben, a szélességet 35% -ra növeltük:

Mint láthatjuk, a Banana Republic gombnak nagyon éles szöge van, ezért a mieinknek kevésbé kell kerekíteniük. A gomb alakjának megváltoztatásához csökkenünk élsugár 0-ig.

Ez az üzenetünk! Már majdnem kész.

5. lépés: Utolsó simítások: állítsa be a távolságot

A CTA gomb szövege és alja túl közel van. Hely létrehozása érdekében az egyes tartalmi struktúrák fölé és alá illesztjük a párnázást.

Egyszerűen rákattintunk egy struktúrára (gombra, szövegre, képre), megyünk a Tartalom tulajdonságai menübe, és ellenőrizzük, hogy a Spaces párnázási szakaszában további lehetőségeket látunk-e:

Ezután beállítjuk a párnázatot a gomb felett és alatt, valamint a «Solo Online» tartalom blokk felett és alatt.

Ez az utolsó e-mail:

Megjelenése a mobil előnézetében tökéletes:

Szinte pontosan hoztuk létre a Banana Republic üzenetét modern, letisztult kialakításával és animált GIF-jével, de optimalizáltuk a HTML háttérszínek és a cselekvésre ösztönző gombok használatát, így biztosak vagyunk benne, hogy mindenki számára tökéletesen látható lesz típusú eszközök és e-mail kliensek.

Reméljük, hogy élvezték ezt a workshopot a gif képek e-mailben történő felhasználásáról. Bármi kérdés? Az alábbi kérdéseket elküldheti nekünk a megjegyzésekben. És mindenképpen próbálja ki a BEE e-mail szerkesztő!

Ezt a cikket írta

Az Egyesült Államokban Philadelphiában nőttem fel, és két diplomám van, angolból és közgazdaságtanból. Szeretek elmélkedni arról, hogy az emberek hogyan élnek és hogyan működnek, hogyan fejlődnek a kreatív folyamatok és hogyan viszonyulunk egymáshoz. Az új projektekben való együttműködés a napi üzemanyagom.

Tetszett ez a cikk? Itt van még sok más az Ön számára.

Iratkozzon fel most, hogy e-mailben és SMS-ben megkapja a legjobb marketing híreket.

Sok eredeti tartalom, nulla spam. Iratkozzon fel a hírlevélre