# Design af e-mailbanner med gradienter [Canonical HTML page](https://gradiently.design/da/guide/email-header-design) Et e-mailbanner er det første, nogen ser efter emnelinjen, i en indbakke du ikke styrer. Godt design kræver, at du planlægger for blokerede billeder, mørk tilstand og små skærme fra starten. ## The short version - 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. 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](https://gradiently.design/da/guide/gradients-in-email) 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 Formater til e-mailbanner og signatur. Banneret har samme størrelse som et blogbanner, så ét design kan bruges begge steder. > **Lavere er ofte bedre** På en telefon kan et højt banner fylde hele den første skærm. Hvis banneret mest skaber stemning, så overvej en lavere beskæring, så e-mailens første linje kan ses uden at scrolle. ## 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 | De fleste brands bruger en hybrid: billedet bærer udtrykket, HTML bærer ordene. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Et hybridbanner. Cellen har en ensfarvet baggrund og en gradient bag billedet, så blokerede billeder stadig viser brandfarve og formateret alt-tekst. Budskabet gentages som rigtig tekst nedenunder. ## 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 - Dyb violet: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Dyb blågrøn: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Bærfarvet til koral: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Nat til blå: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Bannergradienter, der passer til både lyse og mørke indbakker: dybe nok til ikke at blænde om natten og mættede nok til at virke lyse om dagen. 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](https://gradiently.design/da/guide/dark-mode-design) 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](https://gradiently.design/da/guide/gradient-banding). 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 bredt e-mailbanner med nyhedsbrevets titel og udgavenummer på en dyb gradient Et nyhedsbrevsbanner på 1200 gange 600: navnetræk, udgavenummer og én linje. Et bredt e-mailbanner, der annoncerer søndagsåbent på en varm gradient 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 `bgcolor` på 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](https://gradiently.design/da/guide/launch-day-graphics). ## FAQ ### 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.