Kort fortalt
- Et standardbanner til e-mail er 1200 gange 600 pixels og vises i 600 pixels bredde, så det står skarpt på skærme med høj pixeltæthed.
- Understøttelsen af CSS-gradienter varierer mellem mailklienter, så et gradientbanner er normalt et billede med en ensfarvet baggrund som reserve.
- Nogle mailklienter blokerer billeder som standard, så alle bannere har brug for beskrivende alt-tekst og en baggrundsfarve.
- Mørk tilstand kan ændre farverne omkring et banner, men normalt ikke inde i billedet. Giv derfor banneret sin egen baggrund, og test i begge tilstande.
- Placér vigtige ord som tilbud, datoer og opfordringer til handling som rigtig HTML-tekst under banneret, ikke kun inde i billedet.
På denne side
Godt design af e-mailbanner starter med indbakkens begrænsninger. Lav bannerbilledet i 1200 gange 600 pixels, og vis det i 600 pixels bredde, så det står skarpt på skærme med høj pixeltæthed. Fordi mailklienter håndterer CSS-gradienter forskelligt, bør gradienten være i billedet med en matchende ensfarvet baggrund bagved. Tilføj beskrivende alt-tekst til læsere med billeder slået fra, tjek det i mørk tilstand, og behold vigtige ord som rigtig tekst under billedet.
Denne guide gennemgår størrelser, billede kontra CSS, mørk tilstand, filstørrelse og alt-tekst med HTML, du kan tilpasse. Se gradienter i e-mails for den tekniske side af gradienter i HTML-mail.
Størrelse på et e-mailbanner
De fleste e-maillayouts er omkring 600 pixels brede, hvilket passer godt i læseruder på computer og kan skaleres ned på telefoner. Eksportér banneret i dobbelt størrelse, 1200 gange 600, og angiv billedets visningsbredde til 600 i HTML. Formatet 2:1 giver plads til en kort overskrift eller et logo uden at skubbe indholdet under den første skærm på telefoner.
E-mailbanner 1200×600
1200 × 600
E-mailsignatur 600×200
600 × 200
Blogbanner 1200×600
1200 × 600
Billede eller CSS: byg et e-mailbanner med gradient
På nettet er en gradient en linje CSS. I e-mail er det mindre pålideligt: nogle klienter viser background-image: linear-gradient(...), andre ignorerer det. Her er de praktiske muligheder.
| Tilgang | Sådan virker den | Afvejning |
|---|---|---|
| Banner som billede | Gradient og eventuel grafik samlet i et billede på 1200×600 | Ser ens ud, hvor billeder indlæses. Ord i billedet forsvinder, når billeder er slået fra |
| CSS-gradient og HTML-tekst | En tabelcelle med gradientbaggrund og HTML-tekst ovenpå | Let og tilgængelig. Falder tilbage på en ensfarvet baggrund, hvor gradienter ikke understøttes |
| Hybrid | Et gradientbillede til stemning og rigtig tekst til budskabet nedenunder eller på en ensfarvet reservebaggrund | Mest robust: altid læsbart, som regel smukt |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Design e-mailbannere til mørk tilstand
I mørk tilstand ændrer mange mailapps farverne rundt om banneret: hvide baggrunde kan blive mørke og mørk tekst lys. Billeder bevares normalt, som de er. Det skaber to klassiske problemer: et banner med hvid baggrund lyser som en lyskasse i en mørk indbakke, og et gennemsigtigt logo med mørke streger forsvinder på en baggrund, der nu er mørk.
Undgå
- Bannere med helt hvid baggrund
- Gennemsigtige PNG-logoer med mørke streger
- Vigtige ord kun inde i billedet
- Tynd, lys tekst på en bleg gradient
Gør
- Et banner med sin egen mellemmørke eller dybe baggrund
- Logoer på en ensfarvet form eller i en lys og mørk version
- Budskabet gentaget som rigtig tekst
- Stærk kontrast inde i selve billedet
Mellemmørke til dybe gradienter som disse er det sikreste valg. De blænder ikke i en mørk indbakke, og hvid tekst inde i dem er læsbar i begge tilstande. Design til mørk tilstand gennemgår de overordnede principper.
Filstørrelse, alt-tekst og de vigtige ord
Hold bannerbilleder lette: eksportér JPEG til fotografiske eller kornede gradienter og PNG til flad grafik med tekst, og komprimér dem. Store, glatte gradienter kan få farvebånd ved hård komprimering. Lidt korn i designet hjælper dem med at holde. Se farvebånd i gradienter.
Skriv alt-tekst, der gengiver bannerets budskab frem for udseendet: Efterårsudgaven: nye farver til sæsonen, ikke lilla banner. Indstil billedets skriftegenskaber, så alt-teksten vises i en læsbar størrelse og farve på reservebaggrunden, når billeder er slået fra.
Et nyhedsbrevsbanner på 1200 gange 600: navnetræk, udgavenummer og én linje.
Et banner med en meddelelse: budskabet er kort nok til at blive gentaget som rigtig tekst nedenunder.
Tjekliste til e-mailbannere
- 1
Design i 1200 gange 600
Vis i 600 pixels bredde. Hold ordene store nok til at kunne læses på en telefon i den størrelse.
- 2
Giv det sin egen baggrund
Ingen ren hvid eller gennemsigtighed langs kanterne, så mørk tilstand ikke kan gøre det til en lyskasse.
- 3
Angiv en reservefarve
En
bgcolorpå cellen i en farve fra gradienten, så udtrykket stadig passer til brandet, når billeder er blokeret. - 4
Skriv rigtig alt-tekst
Budskabet, ikke en beskrivelse af billedet.
- 5
Gentag budskabet som tekst
Datoer, tilbud og opfordringer til handling som HTML-tekst under banneret.
- 6
Test i begge tilstande
Send testmails til de apps, dine læsere bruger, i lys og mørk tilstand med billeder slået til og fra.
I Gradiently er størrelserne E-mailbanner (1200 gange 600) og signatur (600 gange 200) indbygget, og kopiering til størrelser gør et færdigt opslag til sociale medier til et matchende banner til din e-mail på lanceringsdagen.
Spørgsmål, folk stiller
Hvor stort skal et e-mailbanner være?
1200 gange 600 pixels vist i 600 pixels bredde i e-mailens HTML. Den dobbelte opløsning holder det skarpt på skærme med høj pixeltæthed.
Virker CSS-gradienter i e-mail?
I nogle mailklienter, men ikke alle. Læg gradienten i et billede, eller brug CSS med en ensfarvet bgcolor som reserve, og test i de apps, dine læsere bruger.
Hvordan får jeg et e-mailbanner til at virke i mørk tilstand?
Giv banneret sin egen mellemmørke eller dybe baggrund frem for hvid eller gennemsigtig, hold stærk kontrast inde i billedet, og gentag vigtige ord som rigtig tekst.
Hvad skal alt-teksten til et e-mailbanner sige?
Det, banneret siger, for eksempel overskriften eller tilbuddet, så læsere med blokerede billeder stadig får budskabet.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
