El Responsivt design er afgørende i dag på grund af de forskellige formater som en bruger står overfor fra sin tablet, mobil og endda computer. Dette lydhøre design i e-mailmarkedsføring og destinationssider er mere end vigtigt for omnichannel-kommunikation med vores kunder.
Så du er nødt til at tage det meget seriøst at tage forskellige skabeloner med forskellige bredder for at ankomme med det bedste design muligvis disse nyhedsbreve eller den destinationsside, hvor fremtidige kunder, som vi ønsker, at de skal konvertere fra vores annoncer på Google eller Facebook, lander.
Responsivt design inden for e-mail marketing
E-mail-marketing er en af måderne til at annoncere produkttilbud eller de nye indlæg oprettet på vores blog til således indsnævres dybere med alle vores tilhængere.
At disse nyhedsbreve er lydhøre betyder det de kan ses perfekt fra en mobil, en tablet eller en computer. Så vi er nødt til at prøve at have de nødvendige værktøjer, så alle de visuelle elementer er harmoniske nok til en let læsning af nyhedsbrevet.
IKEA Nyhedsbrev
Responsiv betyder det visningen af en side på forskellige enheder er altid korrekt. Til dette har vi værktøjer til e-mail marketing der hjælper os med at teste nyhedsbrevet oprettet i forskellige formater og dermed ændre værdier som polstring eller margen, så de placeres perfekt, når vi reducerer bredden på vores browser.
I webdesign med CSS "Media Queries" anvendes at designe et websted efter formatet. Op til 360 pixel ville være for en mobiltelefon, og fra 360 pixel til 650 pixel kunne vi foretage ændringer for alle de brugere, der ser vores hjemmeside fra en tablet.
Nogle af principperne for vores e-mail marketing nyhedsbreve er:
- Et rent visuelt hierarki: en titel i H2 for at efterlade teksten i afsnitformat.
- To forskellige kilder: en til titlen og en til teksten gør vores nyhedsbrev bedre læsbart.
- El brug af farve til at differentiere titel, tekst og andre elementer: vi kan gradvist gå fra en mørk grå til en lysere.
- Un CTA (opfordring til handling) klar og skelnes: hvis vores virksomheds logo er i rødt, kan CTA i denne farve, mens resten i en komplementær farve.
Vi giver dig et klart eksempel på en stor responsivt design i et nyhedsbrev udført af Filmin og som du kan se på det medfølgende billede. Klar typografi i hvidt og teksten i en meget lysegrå, men det giver os mulighed for hurtigt at visualisere de forskellige rum, hvor vi er inviteret til at læse, hvis vi vil. CTA er ikke, at det er fra en anden verden, men det hjælper med det afspilningsikon, og det får os til at se, hvad der venter os.
Tilstrækkelige mellemrum i margenerne, hvidt som hovedfarve til tekst og der passer perfekt til logoet Af mærket; omgivet af det grå, der får det til at skille sig ud. Et iøjnefaldende billede, der sætter scenen for et nyhedsbrev, der tilslutter dig fra starten. Der er også pladser på siderne, så hele skærmens bredde ikke "spises".
I desktop version opretholder disse principper, endda efterlade mere plads i teksterne og efterlader en stor margen på hver side:
Responsivt design på en destinationsside
masse samme principper kan bruges i responsivt design på en destinationsside. Det er ekstremt vigtigt at tage hele tiden i verden til korrekt at vælge skabelonen og følge nogle regler i designet:
- Visuel enkelhed: Vi taler om at holde tomme mellemrum for at sætte fokus på CTA'er.
- Smukke og engagerende billeder til læseren uden at glemme opløsningen, og at de ser perfekte ud.
- Betydningen af farve og det understreger vi igen.
Vi er nødt til at arbejde med det responsive design af en destinationsside til en mobil, tablet og desktop. Tag den den nødvendige tid til at teste igen og igen som hver ændring Det ses i disse tre formater, da vi kan stole på os selv og glemme, at de ændringer, der er foretaget i CSS, vil se forfærdelige ud på mobilen.
Hotjar landingsside
Det kan være kedeligt arbejde, men det er vigtigt, at vi tager os tid til at teste hver ændring. Det brug af sidemargener og prøv så vidt muligt ikke at gå glip af reglerne i CTA'erne eller handlingsknapperne:
- Det afstanden i forhold til teksten og knapmargenen er progressiv i alle tre formater. Hverken den er lille eller stor, og at den er i samme højde.
- La forhold i CTA-knapstørrelse med resten af elementerne, hvor det er placeret, skal tilvejebringes.
Et klart eksempel på dette er det arbejde, Shopify udfører på din destinationsside på desktop og hvor du kan se i mobilversionen. Opmærksomhed på brugen af farver, hvide mellemrum og disse tekster med deres passende størrelse og typografi:
En række tip at have en bedre destinationsside for din virksomhed eller onlinebutik og de nyhedsbreve, der er så vigtige for at få opdateringerne og promoveringerne til dine brugere.