El Responsiv design er viktig i dag på grunn av de forskjellige formatene som en bruker møter fra nettbrettet, mobilen og til og med datamaskinen. Denne responsive designen innen e-postmarkedsføring og destinasjonssider er mer enn viktig for allkanalkommunikasjon med våre kunder.
Så du må ta det seriøst å ta forskjellige maler med forskjellige bredder for å komme med det beste designet mulig de nyhetsbrev eller den destinasjonssiden der fremtidige kunder vi ønsker at de skal konvertere fra våre annonser på Google eller Facebook, kommer til å lande.
Responsiv design innen e-postmarkedsføring
E-postmarkedsføring er en av måtene å kunngjøre produkttilbud eller de nye innleggene som er opprettet på bloggen vår dermed smalere på en dypere måte med alle våre følgere.
At disse nyhetsbrevene er responsive betyr det de kan sees perfekt fra en mobil, et nettbrett eller en datamaskin. Så vi må prøve å ha de nødvendige verktøyene slik at alle de visuelle elementene er harmoniske nok til en enkel lesing av nyhetsbrevet.
IKEA Nyhetsbrev
Responsiv betyr det visningen av en side på forskjellige enheter er alltid riktig. For dette har vi verktøy e-post markedsføring som hjelper oss med å teste nyhetsbrevet som er opprettet i forskjellige formater, og dermed endre verdier som polstring eller margen slik at de blir perfekt plassert når vi reduserer bredden på nettleseren vår.
I webdesign med CSS "Media Queries" brukes å utforme et nettsted i henhold til formatet. Opptil 360 px vil være for en mobil, og fra 360 px til 650 px kan vi gjøre endringer for alle brukerne som ser nettstedet vårt fra et nettbrett.
Noen av prinsippene for våre e-postmarkedsføringsbrev er:
- Et rent visuelt hierarki: en tittel i H2 for å la teksten være i avsnittformat.
- To forskjellige kilder: en for tittelen og en for teksten gjør vårt nyhetsbrev bedre lesbart.
- El bruk av farge for å skille tittel, tekst og andre elementer: vi kan gradvis gå fra en mørk grå til en lysere.
- Un CTA (Call to action) klar og skiller seg: hvis logoen til selskapet vårt er i rødt, kan CTA være i denne fargen mens resten i en komplementær farge.
Vi gir deg et klart eksempel på en flott responsiv design i et nyhetsbrev utført av Filmin og som du kan se på bildet du får. Tydelig typografi i hvitt, og teksten i en veldig lys grå, men som gjør at vi raskt kan visualisere de forskjellige områdene vi blir invitert til å lese hvis vi vil. CTA er ikke at det er fra en annen verden, men det hjelper med det spill-ikonet, og det får oss til å se hva som venter oss.
Tilstrekkelige mellomrom i kantene, hvitt som hovedfarge for tekst og som passer perfekt med logoen Av merkevaren; omgitt av det grå som får det til å skille seg ut. Et iøynefallende bilde som setter scenen for et nyhetsbrev som hekter deg fra starten. Det er også plass på sidene slik at hele bredden på skjermen ikke blir "spist".
I desktop-versjonen opprettholder disse prinsippene, til og med å gi mer plass i tekstene og legge igjen en stor margin på hver side:
Responsiv design på en destinasjonsside
den samme prinsipper kan brukes i responsiv design av en destinasjonsside. Det er ekstremt viktig å ta all tid i verden for å velge malen riktig og følge noen regler i designet:
- Visuell enkelhet: Vi snakker om å holde tomme mellomrom for å sette fokus på CTA.
- Pene og engasjerende bilder til leseren, uten å glemme oppløsningen og at de ser perfekte ut.
- Viktigheten av farge og som vi understreker igjen.
Vi må jobbe med den responsive utformingen av en destinasjonsside for en mobil, nettbrett og stasjonær PC. Ta tiden som trengs for å teste igjen og igjen etter hvert som endringen skjer Det sees i disse tre formatene, siden vi kan stole på oss selv og glemme at de endringene som er gjort i CSS, vil se forferdelig ut på mobilen.
Hotjar landingsside
Det er en jobb som kan være kjedelig, men det er viktig at vi tar oss tid til å teste hver endring. De bruk av sidemarger og prøv så langt det er mulig å ikke gå glipp av reglene i CTA-ene eller handlingsknappene:
- At avstanden i forhold til teksten og knappemarginen er progressiv i alle tre formatene. Verken den er liten eller stor, og at den er i samme høyde.
- La forhold i størrelse på CTA-knapp med resten av elementene der den er plassert må skaffes.
Et tydelig eksempel på dette er arbeidet utført av Shopify på destinasjonssiden din på skrivebordet og som du kan se i mobilversjonen. Oppmerksomhet på bruken av farger, hvite mellomrom og tekstene med passende størrelse og typografi:
En rekke tips å ha en bedre destinasjonsside for din bedrift eller nettbutikk og de nyhetsbrevene som er så viktige for å få oppdateringer og kampanjene til brukerne dine.