El Responzivní design je dnes díky různým formátům zásadní kterému uživatel čelí ze svého tabletu, mobilu nebo dokonce počítače. Tento responzivní design v e-mailovém marketingu a na vstupních stránkách je více než důležitý pro omnikanálovou komunikaci s našimi klienty.
Musíte tedy brát vážně, abyste si vzali různé šablony různé šířky, aby se dosáhlo nejlepšího designu možné ty zpravodaje nebo ta vstupní stránka, kde přistanou budoucí klienti, od kterých chceme, aby konvertovali z našich reklam na Google nebo Facebook.
Reagovat na design v e-mailovém marketingu
E-mailový marketing je jedním ze způsobů, jak oznamovat nabídky produktů nebo nové příspěvky vytvořené na našem blogu tedy hlouběji zúžit se všemi našimi následovníky.
To, že tyto zpravodaje reagují, to znamená lze je dokonale vidět z mobilu, tablet nebo počítač. Musíme se tedy pokusit mít potřebné nástroje, aby všechny vizuální prvky byly dostatečně harmonické pro snadné čtení zpravodaje.
Newsletter IKEA
Reagovat to znamená zobrazení stránky na různých zařízeních je vždy správné. K tomu máme nástroje e-mail marketing které nám pomáhají testovat informační bulletin vytvořený v různých formátech, a tak upravovat hodnoty, jako je výplň nebo okraj, aby byly dokonale přemístěny, protože zmenšíme šířku našeho prohlížeče.
V používá se webový design s CSS „Media Queries“ navrhnout web podle formátu. Až 360 pixelů by bylo pro mobilní zařízení a od 360 pixelů do 650 pixelů bychom mohli provádět úpravy pro všechny ty uživatele, kteří vidí náš web z tabletu.
Některé zásady pro naše zpravodaje e-mailového marketingu jsou:
- Čistá vizuální hierarchie: nadpis ve formátu H2, který ponechá text ve formátu odstavce.
- Dva různé zdroje: jeden pro nadpis a druhý pro text zajišťuje lepší čitelnost našeho zpravodaje.
- El použití barvy k odlišení názvu, textu a dalších prvků: můžeme postupně přejít z tmavě šedé na světlejší.
- Un CTA (výzva k akci) jasná a rozlišitelná: pokud je logo naší společnosti červené, může být CTA v této barvě, zatímco zbytek v doplňkové barvě.
Dáme vám jasný příklad skvělého responzivní design v zpravodaji prováděném společností Filmin a které můžete vidět na uvedeném obrázku. Jasná typografie v bílé barvě a text ve velmi světle šedé barvě, který nám umožňuje rychle vizualizovat různé prostory, ve kterých jsme vyzváni ke čtení, pokud chceme. CTA neznamená, že je z jiného světa, ale pomáhá s touto ikonou reprodukce a umožňuje nám vidět, co nás čeká.
Dostatečné mezery na okrajích, bílá jako hlavní barva pro text a který dokonale zapadá do loga Značky; obklopený šedou barvou, díky níž vyniká. Poutavý obrázek, který určuje bod pro zpravodaj, který se zapojuje od prvního okamžiku. Jejich mezery jsou také ponechány po stranách, aby nebyla „sežrána“ celá šířka obrazovky.
V desktopová verze tyto principy zachovává, dokonce ponechat více místa v textech a ponechat velkou rezervu na každé straně:
Responzivní design na vstupní stránce
L stejné principy lze použít v responzivním designu vstupní stránky. Je nesmírně důležité věnovat se po celou dobu správnému výběru šablony a dodržování některých pravidel v návrhu:
- Vizuální jednoduchost: Mluvíme o ponechání mezer pro zaměření na CTA.
- Pěkné a poutavé obrázky čtenáři, aniž by zapomněli na rozlišení a že vypadají perfektně.
- Důležitost barvy a to znovu zdůrazňujeme.
Musíme pracovat na responzivním designu vstupní stránky pro mobilní zařízení, tablety a počítače. Vezměte čas potřebný k opakovanému testování při každé změně je to vidět v těchto třech formátech, protože si můžeme důvěřovat a zapomenout, že ty změny provedené v CSS budou na mobilních zařízeních vypadat hrozně.
Úvodní stránka Hotjar
Je to práce, která může být zdlouhavá, ale je důležité, abychom si udělali čas na otestování každé změny. The použití bočních okrajů a pokud je to možné, zkuste nechat ujít pravidla v CTA nebo akčních tlačítkách:
- Že vzdálenost ve vztahu k textu a okraji tlačítka je progresivní ve všech třech formátech. Není ani malý, ani velký a že je ve stejné výšce.
- La poměr ve velikosti tlačítka CTA se zbytkem prvků, kde je umístěn, musí být zajištěno.
Jasným příkladem toho je práce, kterou Shopify provedl na vaší vstupní stránce na ploše a ve kterém můžete vidět v mobilní verzi. Pozor na použití barev, mezer a textů s odpovídajícími velikostmi a typografií:
Řada tipů lepší vstupní stránka pro vaše podnikání nebo online obchod a tyto zpravodaje tak důležité pro získání aktualizací a těchto promo akcí pro vaše uživatele.