Kortversjonen
- Et standard toppbilde til e-post er 1200 ganger 600 piksler, vist i 600 pikslers bredde for å holde seg skarpt på skjermer med høy pikseltetthet.
- Støtten for CSS-gradienter varierer mellom e-postklienter, så et toppfelt med gradient er vanligvis et bilde med en ensfarget bakgrunn som reserve.
- Noen e-postklienter blokkerer bilder som standard, så hvert toppbilde trenger beskrivende alt-tekst og en bakgrunnsfarge bak.
- Mørk modus kan endre fargene rundt toppbildet, men vanligvis ikke inni bildet, så gi toppbilder en egen bakgrunn og test i begge moduser.
- Legg viktige ord som tilbud, datoer og handlingsoppfordringer i ekte HTML-tekst under toppbildet, ikke bare inni bildet.
På denne siden
Godt design av toppbilder til e-post begynner med innboksens begrensninger. Lag toppbildet i 1200 ganger 600 piksler og vis det i 600 pikslers bredde, så det blir skarpt på skjermer med høy pikseltetthet. Fordi e-postklienter håndterer CSS-gradienter ulikt, legger du gradienten inni bildet og setter en matchende ensfarget bakgrunn bak. Legg til beskrivende alt-tekst for lesere med bilder av, sjekk i mørk modus og behold viktige ord som ekte tekst under bildet.
Denne guiden dekker størrelser, bilde eller CSS, mørk modus, filstørrelse og alt-tekst, med HTML du kan tilpasse. For den tekniske siden av gradienter i HTML-e-post, se gradienter i e-post.
Størrelse på toppbilder til e-post
De fleste e-postoppsett er rundt 600 piksler brede, en bredde som passer godt i leseruter på datamaskiner og skaleres ned på telefoner. Eksporter toppbilder i dobbelt størrelse, 1200 ganger 600, og sett visningsbredden til 600 i HTML-en. Formen 2:1 gir plass til en kort overskrift eller logo uten å skyve innholdet under første skjermbilde på telefoner.
E-posttoppbilde 1200×600
1200 × 600
E-postsignatur 600×200
600 × 200
Bloggbanner 1200×600
1200 × 600
Bilde eller CSS: bygg et e-posttoppfelt med gradient
På nett er en gradient én linje CSS. I e-post er det mindre pålitelig: noen klienter viser background-image: linear-gradient(...), andre ignorerer det. De praktiske alternativene står under.
| Tilnærming | Slik virker det | Avveining |
|---|---|---|
| Toppfelt som bilde | Gradienten og eventuell grafikk bakt inn i et bilde på 1200×600 | Ser likt ut overalt der bilder lastes; ord inni det forsvinner når bilder er av |
| CSS-gradient og ekte tekst | En tabellcelle med gradientbakgrunn og HTML-tekst oppå | Lett og tilgjengelig; faller tilbake til en ensfarget bakgrunn der gradienter ikke støttes |
| Kombinasjon | Et gradientbilde for stemning, ekte tekst for budskapet under eller på en ensfarget reservebakgrunn | Mest robust: alltid leselig, vanligvis vakkert |
<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 toppbilder til e-post for mørk modus
I mørk modus endrer mange e-postapper fargene rundt toppbildet: hvite bakgrunner kan bli mørke og mørk tekst lys. Bilder forblir vanligvis uendret. Det skaper to klassiske problemer: et toppbilde med hvit bakgrunn lyser som en lyskasse i en mørk innboks, og en gjennomsiktig logo med mørke streker forsvinner mot en bakgrunn som nå er mørk.
Unngå
- Toppbilder med helt hvit bakgrunn
- Gjennomsiktige PNG-logoer med mørke streker
- Viktige ord bare inni bildet
- Tynn, lys tekst på en blek gradient
Gjør dette
- Et toppbilde med egen mellommørk eller dyp bakgrunn
- Logoer på en ensfarget form, eller en lys og en mørk versjon
- Budskapet gjentatt som ekte tekst
- Sterk kontrast inne i selve bildet
Mellommørke til dype gradienter som disse er det tryggeste valget. De blender ikke i en mørk innboks, og hvit tekst inni dem forblir leselig i begge moduser. Design for mørk modus dekker de overordnede prinsippene.
Filstørrelse, alt-tekst og ordene som betyr noe
Hold toppbildene lette: eksporter JPEG for fotografiske eller kornete gradienter og PNG for flat grafikk med tekst, og komprimer dem. Store, jevne gradienter kan få fargebånd ved hard komprimering, og litt korn i designet hjelper dem å tåle den; se fargebånd i gradienter.
Skriv alt-tekst som sier det toppbildet sier, ikke hvordan det ser ut: Høstutgaven: nye farger for sesongen, ikke lilla banner. Sett bildets skriftegenskaper slik at alt-teksten vises i leselig størrelse og farge på reservebakgrunnen når bilder er av.
Et toppbilde til nyhetsbrev på 1200 ganger 600: navnetopp, utgavenummer og én linje.
Et kunngjøringstoppbilde: budskapet er kort nok til å gjentas som ekte tekst under.
Sjekkliste for toppbilder til e-post
- 1
Design i 1200 ganger 600
Vis i 600 pikslers bredde. Hold ordene store nok til å leses på en telefon i den størrelsen.
- 2
Gi det en egen bakgrunn
Ingen ren hvitfarge og ingen gjennomsiktighet rundt kantene, så mørk modus ikke gjør det til en lyskasse.
- 3
Sett en reservefarge
En
bgcolorpå cellen i en farge fra gradienten, slik at blokkerte bilder fortsatt følger merkevarens uttrykk. - 4
Skriv ordentlig alt-tekst
Budskapet, ikke en beskrivelse av bildet.
- 5
Gjenta budskapet som ekte tekst
Datoer, tilbud og handlingsoppfordringer som HTML-tekst under toppbildet.
- 6
Test i begge moduser
Send test-e-poster til appene leserne dine bruker, i lys og mørk modus, med bilder på og av.
I Gradiently er størrelsene Toppbilde til e-post (1200 ganger 600) og signatur (600 ganger 200) innebygd, og kopier til størrelser gjør et ferdig sosialt innlegg til et matchende toppbilde for e-posten på lanseringsdagen.
Spørsmål folk stiller
Hvilken størrelse bør et toppbilde til e-post ha?
1200 ganger 600 piksler, vist i 600 pikslers bredde i e-postens HTML. Den doble oppløsningen holder bildet skarpt på skjermer med høy pikseltetthet.
Fungerer CSS-gradienter i e-post?
I noen e-postklienter, ikke alle. Legg gradienten i et bilde eller bruk CSS med en ensfarget bgcolor som reserve, og test i appene leserne dine bruker.
Hvordan får jeg et e-posttoppbilde til å fungere i mørk modus?
Gi toppbildet en egen mellommørk eller dyp bakgrunn fremfor hvit eller gjennomsiktig, hold sterk kontrast inni bildet og gjenta viktige ord som ekte tekst.
Hva bør alt-teksten til et e-posttoppbilde si?
Det toppbildet sier, for eksempel overskriften eller tilbudet, slik at lesere med blokkerte bilder fortsatt får budskapet.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
