E-mails i ClickDimensions’ New Drag & Drop editor

Generelt set er ClickDimensions’ New Drag & Drop Editor ret simpel at arbejde med, da den er bygget op i ”elementer”, som man trækker ind i sit e-mail design.  En e-mail er altid 600 px bred, og en template bliver bygget op af både sektioner og blokke. En sektion er en samling af blokke, og vil altid være 600 px i bredden, mens blokkene er indhold, der tilpasser sig bredden på sektionen. 

Lidt generelt om blokke og sektioner

Padding og spacing

Når det kommer til styling og spacing, er der mulighed for at arbejde med padding på både sektioner og blokke, som giver lidt luft omkring elementerne.  På sektioner kan man tilføje op til 20 px i top, bund, højre og venstre side. For blokke gælder det samme, men der kan tilføjes helt op til 40 px.     

Social links

Social links sættes op ved at åbne Social Links indstillingerne, hvor det er muligt at tilføje links direkte til sine sociale medier. Man kan desuden vælge rækkefølgen på ikonerne, samt hvordan de skal vises. Der er nogle prædefinerede indstillinger, hvor man kan ændre på bl.a. farve og form. 

Sektioner – mere konkret

Gemte sektioner

Alle sektioner man sætter op, kan gemmes under ”gemte sektioner”. Det er fx smart, hvis man har en bestemt opsætning eller noget konkret indhold, som man gerne vil bruge igen og igen. På den måde kan man spare tid, da man ikke skal sætte det op hver gang. En anden fordel er, at man sikrer, at layoutet altid er helt ens. 

Låste sektioner

En anden smart funktion, når man arbejder med sektioner, er, at man kan låse dem, sådan at det kun er bestemte medarbejdere, som kan redigere i dem.  Det kan være en fordel, hvis man arbejder i en større virksomhed, som har flere afdelinger, der alle skal sende mails. På den måde kan man sikre at header og footer er ens for alle afdelinger, for at nævne et eksempel. På den måde undgår man at de enkelte afdelinger hver især ændrer i detaljer eller informationer. 

Kolonner 

Når man arbejder med sektioner, kan disse inddeles i kolonner, hvis det er ønsket. Som udgangspunkt er de altid kun i en enkelt kolonne, men under sektion- indstillingerne er det muligt at indstille, om man vil have 1, 2, 3 eller 4 kolonner. Arbejder man med 2 eller 3 kolonner er det desuden muligt at indstille, hvordan de 600 px skal fordeles på kolonnerne. 

Styling af e-mail

Styling af e-mails i ClickDimensions’ New Drag & Drop Editor er relativt begrænset, men der er dog nogle simple muligheder, som sagtens kan bruges til at style en e-mail.  Man kan arbejde med baggrunds- og tekstfarve samt forskellige fonte. Global styling er desuden med til at præge det generelle indtryk af en e-mail. Derfor anbefaler vi også, at denne bliver taget med i jeres overvejelser. 

Custom fonts

I ClickDimensions’ New Drag & Drop Editor er der mulighed for at importere sine egne fonte. Det er dog vigtigt at være klar over, at dette kun gælder import af Google Fonts. Det vil altså sige, at det ikke er muligt at importere custom made fonte, som er designet specifikt for jeres brand.  Desuden er det ikke noget ClickDimensions selv anbefaler at bruge, da mange af dem, der modtager mailen vil se fall-back fonten alligevel. 

ClickDimensions knapper

ClickDimensions knapper kan ikke styles vildt meget. Det er kun baggrundsfarve, stregfarve (hvis man fx vil have en ”ghost button”), tekstfarve, og om knappen skal være helt firkantet eller med afrundede hjørner. De fleste outlook-indbakker viser dog en firkantet fall- back version af runde knapper. Vil I undgå dette, skal knapperne indsættes som billeder. 

Global styling

Basisindstillinger der sørger for et ens udtryk på tværs af e-mails

Global styling er et sæt overordnede indstillinger, som er med til at sørge for et ensartet udtryk på tværs af e-mails og templates. Hvis vi skal sætte et helt nyt design op for jer, eller hvis I er ved at gennemgå et re-design af jeres e-mail layout, vil det derfor give mening at overveje følgende:  – Baggrundsfarven som kommer til at ligge bagved selve mailen.  – Farven på links (hvis denne skal være anderledes end den blå standard-farve).  – Font og størrelse til brødtekst og overskrift 1 (evt. også overskrift 2, 3 og 4, hvis I bruger flere).  – Farve til brødtekst og forskellige overskrifter.  – Linjeafstand (dette vil blive det samme for alle skrifttyper og overskrifter).  – Skal teksten være venstrestillet eller centreret?  – Skal I have uploadet custom fonts som ikke allerede ligger i systemet? (Vær dog opmærksom på, at specialdesignede fonts som udgangspunkt ikke kan uploades).   

Responsivt design – er det muligt?

E-mails i ClickDimensions er automatisk opsat til at tilpasse sig den skærm de vises på. Det betyder, at indhold selv tilpasser sig alt efter, om den vises på computer eller mobil. Man kan på billeder desuden styre, om disse skal vises i fuld bredde på mobilvisning, eller om de skal blive tilsvarende mindre, når e-mailen tilpasser sig den mindre skærm. 

Kolonner på mobilvisning

Som nævnt tidligere, kan man i e-mail editoren arbejde med kolonner i sektionerne, hvilket fungerer rigtig godt på computervisning, da mailen vil fremgå stort set ligesom i editoren, inden den bliver sendt ud.  Hvis I benytter flere kolonner i jeres e-mail opsætning skal I dog være opmærksomme på, hvordan disse vises på henholdsvis computer og mobil. Helt konkret sker der det, at kolonne-inddelte sektioner vil stakke blokkene ovenpå hinanden, når de vises på små skærme.   FORSKELLIGE SCENARIER Vi har nedenfor prøvet at illustrere to forskellige scenarier, så I kan få en bedre forståelse for, hvad der sker, når blokkene bliver stakket. Der er nemlig meget stor forskel på, om man arbejder med kolonner i flere sektioner eller om man arbejder med flere blokke i samme kolonne.    To sektioner To sektioner med to kolonner i hver. En blok pr. kolonne i hver sektion.   En sektion En sektion med to kolonner i hver. To blokke pr. kolonne.  

Skal vi sætte jeres e-mails op i ClickDimensions?

Det her skal vi bruge:

– Billeder der skal bruges i mailen.  – Logoer og ikoner.  – Navn på font/typografier (og gerne størrelse).  – Design-manual / Brand Guide.  – Farvekoder med tilhørende farveprofiler (gerne en profil til både CMYK og RGB).  – Links til sociale medier (hvis de skal inkluderes). – Andre links, der skal være med. – Tekstindhold til alle mails. – E-mail layout (kan evt. være en PDF).  – Subject og Preheader til alle mails. Afsendernavn og -e-mailadresse.   

Vi tilbyder også e-mail design

I kan sagtens lave et design selv eller arbejde med et eksternt bureau, men er det ikke noget, I ønsker, tilbyder vi også e-mail design som en del af For A Facts servicepakke.  Det kan være en fordel for jer, fordi vi har kendskab til ClickDimensions og funktionerne i e-mail editoren. Det vil kort sagt sige, at vi har mulighed for at arbejde udenom eventuelle typiske faldgruber og tage højde for pain points, når det kommer til layout og responsivitet. 

Dos and don’ts

Med konkrete eksempler

Såfremt I selv ønsker at designe e-mails, som efterfølgende skal sættes op i ClickDimensions, så er der her samlet nogle konkrete eksempler på, hvad der kan lade sig gøre, og hvad der slet ikke er muligt i ClickDimensions’ e-mail editor.     

---