Studium mistrů pro responzivní design v e-mailovém marketingu a vstupních stránkách

Citlivý design

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.

IKEA

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á.

Reagovat ve Filminu

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ě:

Citlivý

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ě.

Hotjar

Ú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í:

Reagovat v Shopify

Ř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.


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

Buďte první komentář

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.