El Vďaka rôznym formátom je dnes responzívny dizajn nevyhnutný ktorému používateľ čelí zo svojho tabletu, mobilného telefónu a dokonca aj počítača. Tento responzívny dizajn v e-mailovom marketingu a vstupných stránkach je viac ako dôležitý pre komunikáciu cez všetky kanály s našimi klientmi.
Takže musíte brať vážne, aby ste si vzali rôzne šablóny rôznych šírok, aby ste došli s najlepším dizajnom možné tie informačné vestníky alebo vstupná stránka, na ktorú pristanú budúci klienti, od ktorých chceme, aby konvertovali z našich reklám na stránkach Google alebo Facebook.
Responzívny dizajn v e-mailovom marketingu
E-mailový marketing je jedným zo spôsobov, ako oznamovať ponuky produktov alebo nové príspevky vytvorené na našom blogu teda hlbšie zúžiť so všetkými našimi nasledovníkmi.
To, že tieto informačné vestníky reagujú, to znamená dajú sa perfektne vidieť z mobilu, tablet alebo počítač. Musíme sa teda pokúsiť disponovať potrebnými nástrojmi, aby boli všetky vizuálne prvky dostatočne harmonické na ľahké čítanie bulletinu.
Newsletter IKEA
Reagovať znamená, že zobrazenie stránky na rôznych zariadeniach je vždy správne. Na to máme nástroje e-mail marketing ktoré nám pomáhajú otestovať bulletin vytvorený v rôznych formátoch, a tak upraviť hodnoty, ako sú výplne alebo okraje, aby boli dokonale zmenené, pretože zmenšujeme šírku nášho prehliadača.
V používa sa webdizajn s CSS „Media Queries“ navrhnúť webovú stránku podľa formátu. Až 360 pixlov by bolo pre mobil a od 360 pixelov do 650 pixelov by sme mohli vykonať úpravy pre všetkých používateľov, ktorí vidia náš web z tabletu.
Niektoré zo zásad pre naše bulletiny e-mailového marketingu sú:
- Čistá vizuálna hierarchia: nadpis v H2, aby text zostal vo formáte odseku.
- Dva rôzne zdroje: jeden pre nadpis a druhý pre text umožňuje lepšie čítanie nášho bulletinu.
- El použitie farieb na odlíšenie názvu, textu a ďalších prvkov: môžeme postupne prejsť z tmavošedej na svetlejšiu.
- Un Výzva na akciu (CTA) je jasná a odlíšiteľná: ak je logo našej spoločnosti červené, môže byť CTA v tejto farbe a zvyšok v doplnkovej farbe.
Dáme vám jasný príklad skvelého responzívny dizajn v bulletine, ktorý uskutočnil Filmin a ktoré môžete vidieť na poskytnutom obrázku. Jasná biela typografia a text vo veľmi svetlošedej farbe, čo nám umožňuje rýchlo vizualizovať rôzne priestory, v ktorých sme podľa potreby pozvaní na čítanie. CTA nie je to, že je z iného sveta, ale pomáha s touto ikonou hry a umožňuje nám vidieť, čo nás čaká.
Dostatok medzier na okrajoch, biela ako hlavná farba pre text a ktorý dokonale zapadá do loga Značky; obklopený sivou farbou, vďaka ktorej vynikne. Pútavý obrázok, ktorý pripravuje pôdu pre bulletin, ktorý vás zaujme od začiatku. Po stranách sú tiež ponechané medzery, aby sa „nezjedla“ celá šírka obrazovky.
V desktopová verzia tieto princípy zachováva, dokonca ponecháva viac priestoru v textoch a ponecháva veľkú rezervu na každej strane:
Responzívny dizajn na cieľovej stránke
undefined rovnaké princípy sa dajú použiť v responzívnom dizajne vstupnej stránky. Je nesmierne dôležité, aby ste si na celom svete vždy vybrali správne šablónu a dodržali niektoré pravidlá v dizajne:
- Vizuálna jednoduchosť: Hovoríme o ponechaní prázdnych miest na zameranie na CTA.
- Krásne a pútavé obrázky čitateľovi bez toho, aby zabudli na rozlíšenie a na to, že vyzerajú perfektne.
- Dôležitosť farby a že opäť zdôrazňujeme.
Musíme popracovať na responzívnom dizajne cieľovej stránky pre mobil, tablet a počítač. Vezmite čas potrebný na opakované skúšanie pri každej zmene je to vidieť na týchto troch formátoch, pretože si môžeme dôverovať a zabúdať, že tie zmeny, ktoré urobíme v CSS, budú na mobilných zariadeniach vyzerať hrozne.
Vstupná stránka Hotjar
Je to práca, ktorá môže byť zdĺhavá, ale je nevyhnutné, aby sme si našli čas a otestovali každú zmenu. The použitie bočných okrajov a pokúste sa, pokiaľ je to možné, nevynechať pravidlá v CTA alebo akčných tlačidlách:
- Že vzdialenosť vo vzťahu k textu a okraju tlačidla je progresívna vo všetkých troch formátoch. Nie je ani malý, ani veľký a je v rovnakej výške.
- La pomer vo veľkosti tlačidla CTA so zvyškom prvkov, kde sa nachádza, musí byť zabezpečený.
Jasným príkladom toho je prácu vykonanú Shopify na vašej vstupnej stránke na počítači a v ktorých vidíte v mobilnej verzii. Pozor na použitie farieb, medzier a textov s ich príslušnou veľkosťou a typografiou:
Séria rád lepšia vstupná stránka pre vaše podnikanie alebo online obchod a tieto informačné vestníky tak dôležité, aby ste používateľom dostávali aktualizácie a tieto propagačné akcie.