Bestudeer die meesters vir responsiewe ontwerp in e-posbemarking en bestemmingsbladsye

Responsiewe ontwerp

El Responsiewe ontwerp is vandag noodsaaklik vanweë die verskillende formate waarna 'n gebruiker vanaf sy tablet, mobiele en selfs rekenaar in die gesig staar. Hierdie responsiewe ontwerp in e-posbemarking en bestemmingsbladsye is meer as belangrik vir die omnichannel-kommunikasie met ons kliënte.

U moet dit dus ernstig opneem om verskillende templates mee te neem verskillende breedtes om met die beste ontwerp te kom moontlik die nuusbriewe of daardie bestemmingsblad waar toekomstige kliënte wat ons wil hê hulle moet omskakel vanaf ons advertensies op Google of Facebook, sal land.

Responsiewe ontwerp in e-posbemarking

E-posbemarking is een van die maniere om produkaanbiedings of die nuwe plasings wat op ons blog geskep is, aan te kondig dus op 'n dieper manier vernou met al ons volgelinge.

Dat hierdie nuusbriewe reageer, beteken dit dit kan perfek vanaf 'n mobiele persoon gesien word, 'n tablet of 'n rekenaar. Ons moet dus die nodige instrumente hê sodat al die visuele elemente harmonies genoeg is om die nuusbrief maklik te kan lees.

IKEA

IKEA Nuusbrief

Responsief beteken dat die vertoon van 'n bladsy op verskillende toestelle is altyd korrek. Hiervoor het ons gereedskap e-pos bemarking wat ons help om die nuusbrief wat in verskillende formate geskep is, te toets en waardes soos vulling of kantlyn te verander sodat dit perfek herposisioneer word, aangesien ons die blaaier se breedte verklein.

In die webontwerp met CSS "Media Queries" word gebruik om 'n webwerf volgens die formaat te ontwerp. Tot 360 px sou vir 'n selfoon wees, en van 360 px tot 650 px kon ons wysigings aanbring vir al die gebruikers wat ons webwerf vanaf 'n tablet sien.

Sommige van die beginsels vir ons e-posbemarkingsnuusbriewe is:

  • 'N Skoon visuele hiërargie: 'n titel in H2 om die teks in paragraafformaat te laat.
  • Twee verskillende bronne: een vir die titel en een vir die teks maak ons ​​nuusbrief beter leesbaar.
  • El gebruik van kleur om titel, teks en ander elemente te onderskei: ons kan geleidelik van donkergrys na ligter gaan.
  • Un CTA (oproep tot aksie) duidelik en onderskeibaar: as die logo van ons maatskappy in rooi is, kan die CTA in hierdie kleur wees, terwyl die res in 'n aanvullende kleur is.

Ons gee u 'n duidelike voorbeeld van 'n wonderlike responsiewe ontwerp in 'n nuusbrief wat deur Filmin uitgevoer is en wat u kan sien in die beeld wat voorsien word. Duidelike tipografie in wit en die teks baie liggrys, maar dit stel ons in staat om vinnig die verskillende ruimtes waarin ons uitgenooi word om te lees, te visualiseer as ons wil. Die CTA is nie dat dit van 'n ander wêreld kom nie, maar dit help met die speel-ikoon en dit laat ons sien wat op ons wag.

Reageer in Filmin

Voldoende spasies in die kantlyne, wit as die hoofkleur vir teks en dit pas perfek by die logo Van die handelsmerk; omring deur daardie grys wat dit laat uitstaan. 'N Opvallende beeld wat die basis bied vir 'n nuusbrief wat jou van die begin af aansluit. Ruimtes word ook aan die kante gelaat sodat die hele breedte van die skerm nie 'geëet' word nie.

In die desktop-weergawe handhaaf hierdie beginsels, laat selfs meer ruimte in die tekste en laat 'n groot kant aan elke kant:

Responsieve

Responsiewe ontwerp op 'n bestemmingsblad

Die dieselfde beginsels kan gebruik word in responsiewe ontwerp van 'n bestemmingsblad. Dit is uiters belangrik om die hele tyd in die wêreld te neem om die sjabloon behoorlik te kies en 'n paar reëls in die ontwerp te volg:

  • Visuele eenvoud: Ons praat daaroor om leë spasies te hou om die aandag op GTA's te plaas.
  • Pragtige en boeiende beelde aan die leser, sonder om die resolusie te vergeet en dat dit perfek lyk.
  • Die belangrikheid van kleur en wat ons weer beklemtoon.

Ons moet werk aan die responsiewe ontwerp van 'n bestemmingsblad vir 'n mobiele, tablet en lessenaar. Neem die tyd nodig om elke keer weer en weer te probeer Dit word gesien in die drie formate, want ons kan onsself vertrou en vergeet dat die veranderinge wat in CSS aangebring is, op die mobiele telefoon aaklig sal lyk.

Hotjar

Hotjar Landing Page

Dit is 'n werk wat vervelig kan wees, maar dit is belangrik dat ons die tyd neem om elke verandering te toets. Die gebruik van symarges en probeer sover moontlik nie die reëls in die GTA's of aksieknoppies misloop nie:

  • Wat die afstand in verhouding tot die teks en die knoppiemarge is progressief in al drie formate. Dit is nie klein nie, maar ook nie groot nie.
  • La verhouding in CTA-knoppiegrootte die res van die elemente waar dit geleë is, moet voorsien word.

'N Duidelike voorbeeld hiervan is die werk wat Shopify op u bestemmingsblad gedoen het op die lessenaar en waarin u in die mobiele weergawe kan sien. Let op die gebruik van kleure, wit spasies en die tekste met die toepaslike groottes en tipografie:

Responsief in Shopify

'N Reeks wenke om te hê 'n beter bestemmingsblad vir u besigheid of aanlynwinkel en die nuusbriewe wat so belangrik is om die opdaterings en promosies vir u gebruikers te kry.


Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.