Vi ser at forbrugerne ikke gider læse en mail, hvis indholdet ikke er relevant. Hvis indholdet glimrer ved ikke at være tilpasset det medie vi læser den på, falder interessen og afmeldingsprocen stiger. Så én ting er sikkert: Det er vigtigt at tilpasse indholdet og have fokus på formatet, så det rammer forbrugeren der hvor budskabet modtages. Og, når op mod 50% af kunderne læser mails på mobilen (og tallet vil kun stige!), dur det ikke at deres finger flyver i pendulfart frem og tilbage og zoomer langt ind for at læse dit gnidrede budskab – det ‘liker’ du heller ikke selv…
Et af succeskriterierne er at sørge for, at dine budskaber er lette at læse. Det er hér, det responsive design spiller en afgørende rolle, fordi teksten bliver stor, billederne skaleret efter bredden osv. Med de rigtige værktøjer ved hånden, kan du let tilpasse dine mails med det, der hedder et responsivt design. Læs med her:
Sådan gør du
Når et responsivt design skal opbygges, er der en masse ting der skal tages med i overvejelserne.
Der er som udgangspunkt ikke noget der ikke kan lade sig gøre – der er bare nogle ting der bestemt ikke ser godt ud når de vises på mobilen (se længere nede). Her skal man tænke design og opstilling på en lidt anden måde end normalt.
Elementerne i en responsiv mail (en mail i en responsiv template med indhold der er opbygget efter responsive principper) flytter sig rundt – eller bliver ‘stacket’ som “man” siger – når man ser mailen på en telefon. Det er det geniale ved det hele.
IKKE-responsivt VS responsivt design på mobilen
Den skarpe læser ser straks at der er forskel på de to ellers ens mails. Den ikke-reponsive mail – sort telefon – krymper simpelthen bare indholdet, så det passer til mobil-skærmen. Det resulterer i at tekst bliver meget svært at læse.
Det kan måske gå på mobilen, hvis man har et billede, en call-2-action knap og en simpel bund med logo + adresse. Men det kan se lidt mærkeligt ud, hvis modtageren åbner mailen på en pc…
På den hvide telefon til højre har elementerne flyttet sig rundt – på den gode måde! Menuen i toppen, brødteksten, det grønne afsnit med call-2-actionknappen og i footeren (se hele mailen i fuld længde længere nede).
Se det er smart! Men det sætter jo altså også nogle krav til indholdet. Der kan ikke slices på samme måde som hvis det var til en ikke responsiv mail. Tænker du ikke over hvordan indholdet i mailen er bygget op, så ender du med en mail der ser helt tosset ud.
Når du slicer…
Så tænk derfor over, hvordan du slicer dine billeder og hvordan outputtet skal være.
Er billedet ikke så detaljeret, kan du evt. undlade at slice det så det blot bliver skaleret ned.
Eksempel
Et simpelt billede i toppen – uden for meget eller for lidt tekst på (for meget/småt gør at det ikke kan læses på mobilen, for lidt/stort gør at det ser underligt ud på PC)
Den første tekst er centreret og der er stadig padding om, da teksten ellers vil fylde HELT ud til kanten på mobilen.
Det grønne afsnit er et fint eksempel på, hvad du kan gøre for at det ser OK ud i responsivt design:
Afsnittet er delt op i 2 blokke med hhv. tekst og billede og med baggrundsfarve – når mailen så åbnes på en mobil, smutter call-2-action-knappen under teksten og wupti – det ser helt fint ud. OG der er fin plads omkring call-2-actionkappen til at man kan trykke på den.
Hvordan kommer du i gang?
Vi har udviklet loyalitetsværktøjet Heyloyalty, der giver en lang række muligheder (ud over kommunikation på baggrund af historik og adfærd). Med Heyloyalty laver du hurtigt de rette valg. Og husk, du er altid meget velkommen til at ta´ en demo.
