El Il design reattivo è vitale oggi a causa dei diversi formati a cui un utente si affaccia dal suo tablet, cellulare e persino computer. Questo design reattivo nell'email marketing e nelle pagine di destinazione è più che importante per la comunicazione omnicanale con i nostri clienti.
Quindi devi prenderlo molto sul serio per prendere diversi modelli con diverse larghezze per arrivare con il miglior design possibile quelle newsletter o quella pagina di destinazione in cui atterreranno i futuri clienti che vogliamo che convertano dai nostri annunci su Google o Facebook.
Design reattivo nell'email marketing
L'email marketing è uno dei modi per annunciare offerte di prodotti o nuovi post creati sul nostro blog a così stretto in un modo più profondo con tutti i nostri follower.
Il fatto che queste newsletter siano reattive significa che possono essere visti perfettamente da un cellulare, un tablet o un computer. Quindi dobbiamo cercare di avere gli strumenti necessari affinché tutti gli elementi visivi siano abbastanza armoniosi per una facile lettura della newsletter.
Newsletter IKEA
Reattivo significa questo la visualizzazione di una pagina su diversi dispositivi è sempre corretta. Per questo abbiamo strumenti di marketing via email che ci aiutano a testare la newsletter creata in diversi formati e quindi a modificare valori come padding o margin in modo che siano perfettamente riposizionati man mano che riduciamo la larghezza del nostro browser.
Nel vengono utilizzati web design con CSS "Media Queries" progettare un sito web in base al formato. Fino a 360px sarebbe per un telefono cellulare e da 360px a 650px potremmo apportare modifiche per tutti quegli utenti che visualizzano il nostro sito web da un tablet.
Alcuni dei principi per le nostre newsletter di email marketing sono:
- Una gerarchia visiva pulita: un titolo in H2 per lasciare il testo in formato paragrafo.
- Due diverse fonti: uno per il titolo e uno per il testo rendono la nostra newsletter più leggibile.
- El uso del colore per differenziare titolo, testo e altri elementi: si può passare gradualmente da un grigio scuro a uno più chiaro.
- Un CTA (Call to action) chiaro e distinguibile: se il logo della nostra azienda è in rosso, il CTA potrebbe essere di questo colore mentre il resto di un colore complementare
Ti diamo un chiaro esempio di grande responsive design in una newsletter realizzata da Filmin e che puoi vedere nell'immagine fornita. Tipografia chiara in bianco e testo in un grigio molto chiaro che consente di visualizzare rapidamente i diversi spazi in cui siamo invitati a leggere se lo vogliamo. Il CTA non è che provenga da un altro mondo, ma aiuta con quell'icona di gioco e questo ci fa vedere cosa ci aspetta.
Spazi sufficienti ai margini, bianco come colore principale per il testo e che si adatta perfettamente al logo Del marchio; circondato da quel grigio che lo fa risaltare. Un'immagine accattivante che definisce il punto per una newsletter che coinvolge fin dal primo momento. Vengono lasciati spazi anche sui lati in modo che l'intera larghezza dello schermo non venga "mangiata".
Qui alla la versione desktop mantiene questi principi, anche lasciando più spazio nei testi e lasciando un ampio margine su ogni lato:
Design reattivo su una pagina di destinazione
I gli stessi principi possono essere utilizzati nel responsive design di una pagina di destinazione. È estremamente importante prendersi tutto il tempo del mondo per scegliere correttamente il modello e seguire alcune regole nel design:
- Semplicità visiva: Stiamo parlando di mantenere spazi vuoti per concentrare l'attenzione sui CTA.
- Immagini belle e coinvolgenti al lettore, senza dimenticare la risoluzione e che sembrano perfetti.
- L'importanza del colore e che sottolineiamo di nuovo.
Dobbiamo lavorare sul responsive design di una landing page per cellulare, tablet e desktop. Prendi il tempo necessario per riprovare a ogni modifica È visto in questi tre formati, dal momento che possiamo fidarci di noi stessi e dimenticare che le modifiche apportate ai CSS appariranno orribili sui dispositivi mobili.
Pagina di destinazione Hotjar
È un lavoro che può essere noioso, ma è fondamentale che ci prendiamo il tempo per testare ogni cambiamento. Il uso dei margini laterali e cerca, per quanto possibile, di non perdere le regole nei CTA o nei pulsanti di azione:
- Che la distanza rispetto al testo e al margine del pulsante è progressiva in tutti e tre i formati. Né è piccolo né grande e che è alla stessa altezza.
- La rapporto nella dimensione del pulsante CTA con il resto degli elementi in cui si trova deve essere fornito.
Un chiaro esempio di ciò è il lavoro svolto da Shopify sulla tua pagina di destinazione sul desktop e in cui puoi vedere nella versione mobile. Attenzione all'uso dei colori, spazi bianchi e quei testi con le loro dimensioni e tipografia appropriate:
Una serie di consigli da avere una pagina di destinazione migliore per la tua attività o il tuo negozio online e quelle newsletter così importanti per ricevere gli aggiornamenti e le promozioni per i tuoi utenti.