El disseny responsive és vital a dia d'avui pels diferents formats als quals s'enfronta un usuari des del seu tablet, mòbil i fins i tot ordinador. Aquest disseny responsive en les despeses màrqueting i les landing pages és més que important per a una comunicació omnicanal amb els nostres clients.
Així que cal prendre-s'ho bé de debò per prendre diferents plantilles amb diferents amples per fer arribar amb el millor disseny possible aquestes newsletters o aquesta landing page on aterraran futurs clients que vulguem que converteixin des dels nostres anuncis a Google oa Facebook.
Disseny responsive a email màrqueting
L'email màrqueting és una de les vies amb les que anunciar ofertes en productes o aquests nous posts creats al nostre blog per així estrènyer d'una manera més profunda amb tots els nostres seguidors.
Que aquestes newsletters siguin responsive vol dir que es podran veure perfectament des d'un mòbil, Una tablet o un ordinador. Així que hem de procurar de tenir les eines necessàries perquè tots els elements visuals siguin prou harmoniosos per a una lectura fàcil de la newsletter.
Newsletter d'IKEA
Responsive vol dir que sempre sigui correcta la visualització d'una pàgina en diferents dispositius. Per a això tenim eines de màrqueting per correu electrònic que ens ajuden a provar la newsletter creada en diferents formats i així anar modificant valors com el padding o el marge per així es vagin recol·locant perfectament segons anem reduint l'ample del nostre navegador.
En el disseny web amb CSS s'usen les «Mitjana Queries» per dissenyar un lloc web segons el format. Fins 360px seria per a un mòbil, i des de les 360px fins als 650px podríem fer modificacions per a tots aquells usuaris que veuen la nostra web des d'una tablet.
Alguns dels principis per a les nostres newsletters a email màrqueting són:
- Una jerarquia visual neta: Un títol en H2 per deixar el text en format paràgraf.
- Dues fonts diferents: Una per al títol i una altra per al text aconsegueix que es pugui llegir millor la nostra newsletter.
- El ús del color per diferenciar títol, text i altres elements: Gradualment podem passar d'un gris fosc a un més clar.
- Un CTA (Call to action) clar i que es distingeixi: Si el logotip de la nostra empresa és en vermell, el CTA podria en aquest color mentre la resta en un color complementari.
Us posem un clar exemple d'un gran disseny responsive en una newsletter dut a terme per Filmin i que podeu veure a la imatge aportada. Tipografia clara en color blanc, i el text en un gris molt clar però que permet visualitzar ràpidament els diferents espais en què se'ns convida a llegir si així ho volem. El CTA no és que sigui d'un altre món, però ajuda amb aquesta icona de reproducció i que ens fa veure el que ens espera.
Els espais suficients en els marges, el blanc com el color principal per al text i que es compagina perfectament amb el de l'logo de la marca; envoltat d'aquest gris que ho fa ressaltar. Una imatge cridanera i que posa el punt a una newsletter que enganxa des del primer moment. També es deixen els seus espais en els laterals perquè no es «coma» tot l'ample de la pantalla.
En la versió d'escriptori es mantenen aquests principis, Fins i tot deixant un major espai en els textos i deixant un gran marge a cada lateral:
El disseny responsive en una landing page
Els mateixos principis poden ser usats en el disseny responsive d'una landing page. És summament important prendre tot el temps de món en triar adequadament la plantilla i seguir algunes regles en el disseny:
- Simplicitat en el visual: Parlem de mantenir espais en blanc per posar el focus sobre els CTA.
- Imatges boniques i que enganxin a al lector, sense oblidar-nos de la resolució i que es vegin perfectes.
- La importància del color i que tornem a recalcar.
Hem de treballar el disseny responsive d'una landing page per a un mòbil, tablet i escriptori. prendre'ns el temps necessari per provar una vegada i una altra com cada canvi es veu en aquests tres formats, ja que podem confiar-nos i oblidar-nos que aquests canvis fets a CSS es veuran de forma horrible en un mòbil.
Landing Page de Hotjar
És una feina que pot ser tediós, però és vital que ens prenguem el temps necessari per provar cada canvi. el ús dels marges laterals i intentar, en la mesura del possible, de no faltar-les regles en els CTA o botons d'acció:
- Que la distància en relació amb el text i el marge de el botó sigui progressiva en els tres formats. Ni quedi petit ni gran i que estigui en la mateixa altura.
- La relació a la mida de botó CTA amb la resta dels elements on estigui ubicat ha de ser proporcionada.
Un clar exemple d'això és la feina feta per Shopify en la seva landing page en escriptori i en la que podeu veure a la versió mòbil. Atenció a l'ús dels colors, els espais en blanc i aquests textos amb els seus apropiats mides i tipografia:
Una sèrie de consells per tenir una millor landing page per al vostre negoci o botiga en línia i aquestes newsletter tan importants per fer arribar les actualitzacions i aquestes promos als vostres usuaris.