Meistrite õppimine e-posti turunduse ja sihtlehtede reageeriva kujunduse jaoks

Vastuvõtlik disain

El Reageeriv disain on tänapäeval erinevate vormingute tõttu ülioluline millega kasutaja silmitsi seisab oma tahvelarvutist, mobiilist ja isegi arvutist. See reageeriv kujundus e-posti turunduses ja sihtlehtedel on enam kui oluline meie klientidega suhtlemiseks omikanalites.

Nii et peate erinevate mallide võtmist tõsiselt võtma erineva laiusega, et jõuda parima kujundusega võimalik need infolehed või see sihtleht, kuhu maanduvad tulevased kliendid, keda me tahame, et nad meie Google'i või Facebooki reklaamidest teisendaksid.

Reageeriv disain e-posti turunduses

E-posti turundus on üks viise, kuidas teatada tootepakkumistest või meie blogis loodud uutest postitustest seega kitsam sügavamal kõigi meie jälgijatega.

See, et need infolehed on reageerivad, tähendab seda neid saab mobiiltelefonilt suurepäraselt näha, tahvelarvuti või arvuti. Seega peame proovima omada vajalikke tööriistu, et kõik visuaalsed elemendid oleksid uudiskirja hõlpsaks lugemiseks piisavalt harmoonilised.

IKEA

IKEA uudiskiri

Reageeriv tähendab seda lehe kuvamine erinevates seadmetes on alati õige. Selleks on meil olemas tööriistad e-turunduse mis aitavad meil testida erinevates vormingutes loodud uudiskirja ja seeläbi muuta selliseid väärtusi nagu polsterdus või marginaal, nii et need oleksid oma brauseri laiuse vähendamisel ideaalselt ümber paigutatud.

Aastal kasutatakse veebidisaini koos CSS-iga "Media Queries" kujundada veebisait vastavalt vormingule. Kuni 360 pikslit oleks mobiiltelefoni jaoks ja 360 kuni 650 pikslit saaksime teha muudatusi kõigile neile kasutajatele, kes näevad meie veebisaiti tahvelarvutist.

Mõned meie e-posti turunduse infolehtede põhimõtted on:

  • Puhas visuaalne hierarhia: pealkiri H2-s, et jätta tekst lõikevormingusse.
  • Kaks erinevat allikat: üks pealkirja ja teine ​​teksti jaoks muudab meie uudiskirja paremini loetavaks.
  • El värvi kasutamine pealkirja, teksti ja muude elementide eristamiseks: saame järk-järgult minna tumehallist heledamaks.
  • Un CTA (üleskutse) on selge ja eristatav: kui meie ettevõtte logo on punane, võib CTA olla selle värviga, ülejäänud aga täiendava värviga.

Toome teile selge näite suurepärasest Filmini poolt läbi viidud uudiskirjas reageeriv kujundus ja mida näete lisatud pildil. Selge tüpograafia valges ja tekst väga helehallis, kuid see võimaldab meil soovi korral kiiresti visualiseerida erinevaid ruume, kus meid kutsutakse lugema. CTA ei ole nii, et see oleks pärit teisest maailmast, kuid see aitab selle mänguikooni puhul ja see paneb meid nägema, mis meid ees ootab.

Filminis reageeriv

Veeristes on piisavalt ruumi, valge teksti põhivärvina ja mis sobib ideaalselt logoga Brändist; ümbritsetud halliga, mis muudab selle silmatorkavaks. Pilkupüüdev pilt, mis paneb aluse uudiskirjale, mis haarab teid algusest peale. Külgedele jäetakse ka tühikud, et kogu ekraani laius ei oleks "söödud".

Aastal töölauaversioon säilitab need põhimõtted, jättes tekstidesse isegi rohkem ruumi ja jättes mõlemale küljele suure varu:

Tundlik

Tundlik kujundus sihtlehel

osa samu põhimõtteid saab kasutada reageerivas kujunduses sihtlehe. Malli õigeks valimiseks ja kujunduses järgimiseks on äärmiselt oluline kogu maailmas aega võtta:

  • Visuaalne lihtsus: Me räägime tühimike hoidmisest, et keskenduda CTA-dele.
  • Ilusad ja köitvad pildid lugejale, unustamata resolutsiooni ja seda, et need näevad välja täiuslikud.
  • Värvi tähtsus ja mida me veel kord rõhutame.

Peame töötama mobiiltelefoni, tahvelarvuti ja lauaarvuti sihtlehe tundliku kujunduse kallal. Võtke iga muudatusega uuesti ja uuesti katsetamiseks vajalik aeg seda nähakse nendes kolmes formaadis, kuna võime end usaldada ja unustada, et need CSS-is tehtud muudatused näevad mobiilis kohutavad välja.

Hotjar

Hotjari maandumisleht

See on töö, mis võib olla tüütu, kuid on ülioluline, et võtaksime aega iga muudatuse testimiseks. The külgservade kasutamine ja proovige nii palju kui võimalik mööda minna CTA-de või toimingunuppude reeglitest:

  • Et kaugus teksti ja nupu veerise suhtes on progressiivne kõigis kolmes formaadis. Ei see pole väike ega suur ning et see asub samal kõrgusel.
  • La suhe CTA nupu suuruses koos ülejäänud elementidega, kus see asub, tuleb esitada.

Selle selge näide on Shopify poolt teie sihtlehel tehtud töö töölaual ja milles saate näha mobiiliversiooni. Tähelepanu värvide, tühikute ja nende sobiva suuruse ning tüpograafia tekstide kasutamisele:

Shopify'is reageeriv

Rida näpunäiteid parem sihtleht teie ettevõttele või veebipoele ja need infolehed, mis on nii olulised, et saada värskendusi ja reklaame oma kasutajatele


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.