# Design av mejlhuvud med gradienter [Canonical HTML page](https://gradiently.design/sv/guide/email-header-design) Ett mejlhuvud är det första någon ser efter ämnesraden, i en inkorg du inte råder över. Att designa det bra innebär att planera för avstängda bilder, mörkt läge och små skärmar från början. ## The short version - En vanlig mejlhuvudsbild är 1200 gånger 600 pixlar, visad i 600 pixlars bredd så att den förblir skarp på skärmar med hög täthet. - Stödet för CSS-gradienter varierar mellan mejlklienter, så ett gradienthuvud är oftast en bild, med en enfärgad bakgrund som reserv. - Vissa mejlklienter blockerar bilder som standard, så varje huvud behöver en beskrivande alt-text och en bakgrundsfärg bakom sig. - Mörkt läge kan ändra färgerna runt ett huvud men oftast inte inuti bilden, så designa huvuden med egen bakgrund och testa i båda lägena. - Lägg viktiga ord som erbjudanden, datum och uppmaningar i levande HTML-text under huvudet, inte bara inuti bilden. Bra **design av mejlhuvud** börjar med inkorgens begränsningar. Gör huvudbilden 1200 gånger 600 pixlar och visa den i 600 pixlars bredd, så att den blir skarp på skärmar med hög täthet. Eftersom mejlklienter hanterar CSS-gradienter ojämnt lägger du gradienten inuti bilden och sätter en matchande enfärgad bakgrundsfärg bakom den. Lägg till beskrivande alt-text för läsare som har bilder avstängda, kontrollera i mörkt läge och behåll viktiga ord som levande text under bilden. Den här guiden tar upp storlekar, bild eller CSS, mörkt läge, vikt och alt-text, med HTML du kan anpassa. För den tekniska sidan av gradienter i HTML-mejl, se [gradienter i mejl](https://gradiently.design/sv/guide/gradients-in-email). ## Storlek på mejlhuvud De flesta mejllayouter är omkring 600 pixlar breda, en bredd som ryms bekvämt i läsrutor på datorer och skalas ner på telefoner. Exportera huvuden i dubbla den storleken, 1200 gånger 600, och sätt bildens visningsbredd till 600 i HTML. Formen 2:1 lämnar plats för en kort rubrik eller logotyp utan att trycka ner innehållet under första skärmen på telefoner. - Mejlhuvud 1200×600: 1200 × 600 - Mejlsignatur 600×200: 600 × 200 - Bloggbanner 1200×600: 1200 × 600 Former för mejlhuvud och signatur. Huvudet delar storlek med en bloggbanner, så en design kan användas till båda. > **Kortare är ofta bättre** På en telefon kan ett högt huvud fylla hela första skärmen. Om ditt huvud mest är stämning kan du överväga en kortare beskärning så att mejlets första rad syns utan att scrolla. ## Bild eller CSS: så bygger du ett gradientmejlhuvud På webben är en gradient en rad CSS. I mejl är den mindre pålitlig: vissa klienter renderar `background-image: linear-gradient(...)`, andra ignorerar den. De praktiska alternativen finns nedan. | Tillvägagångssätt | Så fungerar det | Avvägning | | --- | --- | --- | | Bildhuvud | Gradienten och all grafik inbakad i en bild på 1200×600 | Ser likadant ut överallt där bilder laddas, orden i den försvinner när bilder är avstängda | | CSS-gradient och levande text | En tabellcell med gradientbakgrund och HTML-text ovanpå | Lätt och tillgängligt, faller tillbaka på en enfärgad bakgrund där gradienter inte stöds | | Hybrid | En gradientbild för stämning, levande text för budskapet under eller på en enfärgad reserv | Det mest robusta: alltid läsbart, oftast vackert | De flesta varumärken använder hybriden: bilden bär utseendet, HTML bär orden. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Ett hybridhuvud. Cellen har en enfärgad bakgrund och en gradient bakom bilden, så att blockerade bilder ändå visar varumärkesfärg och formaterad alt-text. Budskapet upprepas som levande text under. ## Designa mejlhuvuden för mörkt läge I mörkt läge ändrar många mejlappar färgerna i mejlet runt ditt huvud: vita bakgrunder kan bli mörka och mörk text ljus. Bilder lämnas oftast som de är. Det ger två klassiska problem: ett huvud med vit bakgrund som lyser som en ljuslåda i en mörk inkorg, och en genomskinlig logotyp i mörk färg som försvinner mot en nymörk bakgrund. ### Undvik - Huvuden med rent vit bakgrund - Genomskinliga PNG-logotyper i mörk färg - Viktiga ord bara inuti bilden - Tunn ljus text på en blek gradient ### Gör så här - Ett huvud med egen mellan- eller djupton som bakgrund - Logotyper på en solid form, eller en ljus och en mörk version - Budskapet upprepat som levande text - Stark kontrast inuti själva bilden - Djup violett: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Djup turkos: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Bär till korall: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Natt till blått: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Huvudgradienter som fungerar i både ljusa och mörka inkorgar: djupa nog att inte blända på natten, mättade nog att kännas ljusa på dagen. Gradienter från mellanton till djupton som dessa är det säkraste valet. De bländar inte i en mörk inkorg, och vit text i dem förblir läsbar i båda lägena. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) tar upp de bredare principerna. ## Vikt, alt-text och de ord som räknas Håll huvudbilderna lätta: exportera JPEG för fotografiska eller korniga gradienter och PNG för platt grafik med text, och komprimera dem. Stora släta gradienter kan få band när de komprimeras hårt, och lite korn i designen hjälper dem att överleva. Se [gradientband](https://gradiently.design/sv/guide/gradient-banding). Skriv alt-text som säger vad huvudet säger, inte hur det ser ut: *Höstens urval: nya färger för säsongen*, inte *lila banner*. Formatera bildens typsnittsegenskaper så att alt-texten visas i läsbar storlek och färg på reservbakgrunden när bilder är avstängda. Ett brett mejlhuvud med en nyhetsbrevstitel och ett utgivningsnummer på en djup gradient Ett nyhetsbrevshuvud i 1200 gånger 600: logotyprad, utgivningsnummer och en rad. Ett brett mejlhuvud som meddelar söndagsöppet på en varm gradient Ett meddelandehuvud: budskapet är kort nog att upprepas som levande text under. ## Checklista för mejlhuvud 1. **Designa i 1200 gånger 600** Visa i 600 bredd. Håll orden tillräckligt stora för att kunna läsas på en telefon i den storleken. 2. **Ge det en egen bakgrund** Inget rent vitt och ingen genomskinlighet vid kanterna, så att mörkt läge inte kan göra det till en ljuslåda. 3. **Sätt en reservfärg** Ett `bgcolor` på cellen i en färg från gradienten, så att blockerade bilder ändå ser ut som varumärket. 4. **Skriv riktig alt-text** Budskapet, inte en beskrivning av bilden. 5. **Upprepa budskapet som levande text** Datum, erbjudanden och uppmaningar som HTML-text under huvudet. 6. **Testa i båda lägena** Skicka testmejl till de appar dina läsare använder, i ljust och mörkt läge, med bilder på och av. I Gradiently finns storlekarna Mejlhuvud (1200 gånger 600) och signatur (600 gånger 200) inbyggda, och kopiera till storlekar gör ett färdigt socialt inlägg till ett matchande huvud för ditt mejl på [lanseringsdagen](https://gradiently.design/sv/guide/launch-day-graphics). ## FAQ ### Vilken storlek ska ett mejlhuvud ha? 1200 gånger 600 pixlar, visad i 600 pixlars bredd i mejlets HTML. Den dubbla upplösningen håller det skarpt på skärmar med hög täthet. ### Fungerar CSS-gradienter i mejl? I vissa mejlklienter, inte alla. Lägg gradienten i en bild eller använd CSS med en enfärgad `bgcolor` som reserv, och testa i de appar dina läsare använder. ### Hur får jag ett mejlhuvud att fungera i mörkt läge? Ge huvudet en egen mellan- eller djupton som bakgrund i stället för vitt eller genomskinligt, behåll stark kontrast inuti bilden och upprepa viktiga ord som levande text. ### Vad ska alt-texten för ett mejlhuvud säga? Vad huvudet säger, som rubriken eller erbjudandet, så att läsare med blockerade bilder ändå får budskapet.