Študij mojstrov za odziven dizajn pri e-poštnem trženju in ciljnih straneh

Odziven dizajn

El Danes je odziven dizajn ključnega pomena zaradi različnih formatov s katerimi se sooča uporabnik s tabličnega računalnika, mobilnega telefona in celo računalnika. Ta odziven dizajn pri e-poštnem trženju in ciljnih straneh je več kot pomemben za večkanalno komunikacijo z našimi strankami.

Torej se morate resno lotiti jemanja različnih predlog različne širine, da dobite najboljši dizajn možna tista glasila ali ciljna stran, kamor bodo pristale bodoče stranke, za katere želimo, da jih pretvorijo iz naših oglasov v Googlu ali Facebooku.

Odziven dizajn pri e-poštnem trženju

E-poštno trženje je eden od načinov za objavo ponudb izdelkov ali novih objav v našem spletnem dnevniku tako se globlje zožijo z vsemi našimi sledilci.

Da so ta glasila odzivna, to pomeni popolnoma jih je mogoče videti z mobilnega telefona, tablični računalnik ali računalnik. Zato moramo poskusiti imeti potrebna orodja, da so vsi vizualni elementi dovolj harmonični za enostavno branje glasila.

IKEA

Glasilo IKEA

Odziven to pomeni prikaz strani na različnih napravah je vedno pravilen. Za to imamo orodja email marketing ki nam pomagajo preizkusiti glasilo, ustvarjeno v različnih oblikah, in tako spremeniti vrednosti, kot so oblazinjenje ali rob, tako da se popolnoma prerazporedijo, ko zmanjšamo širino našega brskalnika.

V uporablja se spletno oblikovanje s CSS "Media Queries" oblikovati spletno stran glede na obliko. Do 360 slikovnih pik bi bilo za mobilne naprave, od 360 do 650 slikovnih pik pa bi lahko naredili spremembe za vse tiste uporabnike, ki naše spletno mesto vidijo iz tabličnega računalnika.

Nekatera načela za naše glasila o trženju po e-pošti so:

  • Čista vizualna hierarhija: naslov v H2, da besedilo ostane v obliki odstavkov.
  • Dva različna vira: ena za naslov in ena za besedilo naredi naše glasilo bolje berljivo.
  • El uporaba barve za razlikovanje naslova, besedila in drugih elementov: postopoma lahko preidemo iz temno sive v svetlejšo.
  • Un CTA (poziv k dejanju) je jasen in razločen: če je logotip našega podjetja v rdeči barvi, je CTA lahko v tej barvi, ostali pa v dopolnilni barvi.

Navajamo vam jasen primer odličnega odziven dizajn v biltenu, ki ga je izdal Filmin in to lahko vidite na priloženi sliki. Jasna tipografija v beli barvi, besedilo pa v zelo svetlo sivi barvi, vendar nam to omogoča hitro predstavitev različnih prostorov, v katerih smo povabljeni k branju, če želimo. CTA ni, da je iz drugega sveta, ampak pomaga pri tej ikoni predvajanja in zaradi tega vidimo, kaj nas čaka.

Odziven v Filminu

Zadostni prostori na robovih, bela kot glavna barva besedila in ki se popolnoma prilega logotipu Blagovne znamke; obdan s tisto sivino, zaradi katere izstopa. Privlačna slika, ki določa bistvo glasila, ki se zaskoči od prvega trenutka. Na straneh ostanejo tudi presledki, da se celotna širina zaslona ne "poje".

V namizna različica ohranja ta načela, celo pustite več prostora v besedilih in pustite velik rob na vsaki strani:

Odzivno

Odziven dizajn na ciljni strani

P ista načela lahko uporabimo tudi pri odzivnem oblikovanju ciljne strani. Izjemno pomembno je, da si ves čas sveta vzamete za pravilno izbiro predloge in upoštevanje nekaterih pravil pri oblikovanju:

  • Vizualna preprostost: Govorimo o ohranjanju praznih prostorov, da bi se osredotočili na CTA.
  • Lepe in privlačne slike bralcu, ne da bi pozabili na ločljivost in da izgledajo popolno.
  • Pomen barve in to ponovno poudarjamo.

Delati moramo na odzivnem oblikovanju ciljne strani za mobilne naprave, tablice in namizja. Vzemi čas, potreben za testiranje znova in znova ob vsaki spremembi je razvidno iz teh treh formatov, saj si lahko zaupamo in pozabimo, da bodo spremembe, narejene v CSS, videti grozljive v mobilnih napravah.

Hotjar

Ciljna stran Hotjar

Delo je lahko dolgočasno, ključnega pomena pa je, da si vzamemo čas in preizkusimo vsako spremembo. The uporaba stranskih robov in poskušajte, kolikor je mogoče, ne spregledati pravil v CTA-jih ali akcijskih gumbih:

  • To razdalja do besedila in roba gumba je postopna v vseh treh oblikah. Niti je majhen niti velik in je na isti višini.
  • La razmerje v velikosti gumba CTA z ostalimi elementi, kjer se nahaja, je treba zagotoviti.

Jasen primer tega je delo, ki ga je opravil Shopify na vaši ciljni strani na namizju in v katerem lahko vidite v mobilni različici. Pozornost na uporabo barv, presledkov in besedil z ustreznimi velikostmi in tipografijo:

Odziven v Shopify

Niz nasvetov, ki jih morate imeti boljša ciljna stran za vaše podjetje ali spletno trgovino in tista glasila, ki so tako pomembna, da svojim uporabnikom posredujete posodobitve in promocije.


Pustite svoj komentar

Vaš e-naslov ne bo objavljen. Obvezna polja so označena z *

*

*

  1. Za podatke odgovoren: Miguel Ángel Gatón
  2. Namen podatkov: Nadzor neželene pošte, upravljanje komentarjev.
  3. Legitimacija: Vaše soglasje
  4. Sporočanje podatkov: Podatki se ne bodo posredovali tretjim osebam, razen po zakonski obveznosti.
  5. Shranjevanje podatkov: Zbirka podatkov, ki jo gosti Occentus Networks (EU)
  6. Pravice: Kadar koli lahko omejite, obnovite in izbrišete svoje podatke.