Mastersin opiskelu reagoivasta suunnittelusta sähköpostimarkkinoinnissa ja aloitussivuilla

El Reagoiva suunnittelu on elintärkeää nykyään erilaisten muotojen vuoksi jota käyttäjä kohtaa taulutietokoneestaan, matkapuhelimestaan ​​ja jopa tietokoneestaan. Tämä reagoiva muotoilu sähköpostimarkkinoinnissa ja aloitussivuilla on enemmän kuin tärkeää omnichannel-viestinnässä asiakkaidemme kanssa.

Joten sinun on otettava vakavasti ottaa erilaisia ​​malleja eri leveyksiä saavuttaaksesi parhaan suunnittelun mahdolliset uutiskirjeet tai laskeutumissivut, joihin tulevat asiakkaat, jotka haluamme heidän muuntavan Google- tai Facebook-mainoksistamme, laskeutuvat

Reagoiva suunnittelu sähköpostimarkkinoinnissa

Sähköpostimarkkinointi on yksi tapa ilmoittaa tuotteista tai blogissamme luotuista uusista viesteistä kapea syvemmällä tavalla kaikkien seuraajien kanssa.

Se, että nämä uutiskirjeet ovat reagoivia, tarkoittaa sitä ne näkyvät täydellisesti matkapuhelimesta, tabletti tai tietokone. Joten meidän on yritettävä saada tarvittavat työkalut, jotta kaikki visuaaliset elementit ovat riittävän harmoniset uutiskirjeen helppoon lukemiseen.

Reagoiva tarkoittaa sitä sivun näyttö eri laitteilla on aina oikein. Tätä varten meillä on työkaluja email markkinointi jotka auttavat meitä testaamaan eri muodoissa luotua uutiskirjettä ja siten muuttamaan arvoja, kuten täytettä tai marginaalia, jotta ne sijoitettaisiin täydellisesti uudelleen, kun pienennämme selaimen leveyttä.

Että Web-suunnittelua CSS: llä "Media Queries" käytetään suunnitella verkkosivusto muodon mukaan. Jopa 360 pikseliä olisi matkapuhelimelle, ja 360 pikselistä 650 pikseliin voisimme tehdä muutoksia kaikille käyttäjille, jotka näkevät verkkosivustomme tabletilla.

Jotkut sähköpostimarkkinoinnin uutiskirjeidemme periaatteet ovat:

• Puhdas visuaalinen hierarkia: otsikko H2-muodossa jättääksesi tekstin kappalemuotoon.
• Kaksi eri lähdettä: yksi otsikolle ja toinen tekstille tekee uutiskirjeestämme helpommin luettavissa.
• El värin käyttö otsikon, tekstin ja muiden elementtien erottamiseksi: voimme siirtyä vähitellen tummanharmaasta vaaleammaksi.
• Un CTA (Call to action) on selkeä ja erotettavissa: Jos yrityksemme logo on punainen, CTA voi olla tällä värillä, kun taas loput täydentävällä värillä.

Annamme sinulle selkeän esimerkin upeasta reagoiva suunnittelu Filminin toteuttamassa uutiskirjeessä ja että näet sen mukana toimitetusta kuvasta. Selkeä typografia valkoisena ja teksti erittäin vaaleanharmaana, mutta sen avulla voimme nopeasti visualisoida eri tilat, joissa meitä pyydetään lukemaan, jos haluamme. CTA ei ole se, että se olisi toisesta maailmasta, mutta se auttaa tuossa kuvakkeessa ja se saa meidät näkemään, mitä meitä odottaa.

Reunoissa on riittävästi välilyöntejä, valkoinen päävärinä tekstille ja joka sopii täydellisesti logon kanssa Tuotemerkistä; ympäröi harmaa, joka tekee siitä erottuvan. Silmiinpistävä kuva, joka asettaa pisteen uutiskirjeelle, joka alkaa heti ensimmäisestä hetkestä. Niiden tilat jätetään myös sivuille, jotta näytön koko leveyttä ei "syö".

Että työpöytäversio ylläpitää näitä periaatteita, jopa jättää enemmän tilaa tekstiin ja jättää suuren marginaalin kummallekin puolelle:

Reagoiva muotoilu aloitussivulla

Los samoja periaatteita voidaan käyttää reagoivassa suunnittelussa aloitussivun. On äärimmäisen tärkeää käyttää koko aikaa maailmassa, kun haluat valita mallin oikein ja noudattaa joitain sääntöjä suunnittelussa:

• Visuaalinen yksinkertaisuusPuhumme tyhjien tilojen pitämisestä, jotta keskitytään CTA: hin.
• Kauniit ja kiehtovat kuvat lukijalle unohtamatta päätöslauselmaa ja että ne näyttävät täydellisiltä.
• Värin merkitys ja että korostamme jälleen.

Meidän on työskenneltävä reagoivalla aloitussivun suunnittelulla matkapuhelimelle, tabletille ja työpöydälle. Ota aika, joka tarvitaan testaamiseen uudestaan ​​ja uudestaan ​​jokaisen muutoksen yhteydessä se näkyy näissä kolmessa muodossa, koska voimme luottaa itseemme ja unohtaa, että CSS: ään tehdyt muutokset näyttävät kamalilta mobiililaitteilla.

Se on työtä, joka voi olla tylsää, mutta on tärkeää, että käytämme aikaa jokaisen muutoksen testaamiseen. sivumarginaalien käyttö ja yritä, mikäli mahdollista, ohittaa CTA: n tai toimintopainikkeiden säännöt:

• Että etäisyys suhteessa tekstiin ja painikkeen marginaaliin on progressiivinen kaikissa kolmessa muodossa. Se ei ole pieni eikä suuri ja että se on samalla korkeudella.
• La suhde CTA-painikkeen koossa muiden osien kanssa, joissa se sijaitsee, on toimitettava.

Selkeä esimerkki tästä on Shopifyn tekemä työ aloitussivullasi työpöydällä ja josta näet mobiiliversiossa. Huomiota värien, välilyöntien ja tekstien käyttöön sopivalla koolla ja typografialla:

Sarja vinkkejä parempi aloitussivu yrityksellesi tai verkkokaupallesi ja ne uutiskirjeet, jotka ovat niin tärkeitä, jotta päivitykset ja mainoskampanjat saadaan käyttäjille.