# Design av e-postsignatur: bannrar på 600×200 som förblir små [Canonical HTML page](https://gradiently.design/sv/guide/email-signature-design) Din signatur följer med varje e-postmeddelande du skickar, vilket gör den till den mest sedda design du äger. Så gör du en som ser genomtänkt ut, laddas snabbt och aldrig blir en gem. ## The short version - En bra design av e-postsignatur håller ditt namn, din roll och dina kontaktuppgifter som riktig text och lägger till högst en liten bildbanner. - En signaturbanner fungerar bra i 600×200 pixlar, en remsa på 3:1 som ryms i de smalaste e-postlayouterna. - Att exportera bannern i dubbel storlek, 1200×400, och visa den 600 pixlar bred håller den skarp på skärmar med hög täthet. - Många e-postklienter blockerar bilder tills läsaren tillåter dem, så inget väsentligt ska finnas enbart inne i bannern. - En bild på din webbplats med en fullständig https-adress håller varje e-postmeddelande lätt, medan en inklistrad bild ofta skickas som bilaga på varje meddelande. Bra **design av e-postsignatur** handlar mest om återhållsamhet: ditt namn, din roll och ett eller två sätt att nå dig som riktig text, och sedan en liten bannerbild på 600×200 pixlar som bär ditt varumärke. Håll bannern lätt, länka den till en sida och lägg aldrig ditt telefonnummer eller din e-postadress bara inne i bilden, eftersom många inkorgar döljer bilder tills läsaren säger annat. ## Vad som hör hemma i en e-postsignatur En signatur har två jobb: tala om vem du är och hur man når dig, och påminna om vad du gör. Det första jobbet är text. Det andra kan vara en banner. Allt utöver det är skräp som folk lär sig att hoppa över. | Element | Format | Anteckningar | | --- | --- | --- | | Namn | Text, fet | Det enda som ska vara större | | Roll och företag | Text | En rad, åtskilda med kommatecken | | Telefon eller bokningslänk | Textlänk | Ett primärt sätt att agera, inte fyra | | Webbplats | Textlänk | Kort och läsbar, utan `https://` | | Banner | Bild, 600×200 | Valfri, länkar till en sida | | Sociala ikoner | Små bilder | Högst två eller tre, eller hoppa över dem | Text först, bild sedan. Om varje bild misslyckades med att laddas bör signaturen fortfarande fungera. ## Storlek och vikt på e-postsignaturbanner Designa bannern i 600×200 pixlar, en remsa på 3:1. Sexhundra pixlar är den bredd som klassiska e-postmallar är byggda kring, så en banner i den storleken ryms i en mobils e-postapp och i en dators läsfönster utan skalning. För skärmar med hög täthet, exportera samma design i dubbel storlek, 1200×400, och låt e-postmeddelandet visa den 600 pixlar bred. - Signaturbanner 600×200: 600 × 200 - E-posthuvud 1200×600: 1200 × 600 - Visitkort 1050×600: 1050 × 600 En signaturbanner bredvid ett nyhetsbrevshuvud och ett visitkort, i skala. Bannern är en smal remsa, inte en affisch. Vikten spelar större roll än du tror, eftersom bilden följer med varje svar i en lång tråd. Sikta på att hålla filen långt under 100 KB. En gradientbanner exporteras vackert som en JPEG av hög kvalitet. Använd PNG bara när du behöver genomskinlighet eller mycket fin text. Om du också gör ett nyhetsbrev tar guiden [design av e-posthuvud](https://gradiently.design/sv/guide/email-header-design) upp det större formatet. ## Att designa bannern En banner som ses hundra gånger i veckan bör säga en sak och säga den lugnt. Den fungerar bäst som en stilla marknadsföring: ditt nästa event, en ny tjänst, en bokningslänk eller helt enkelt ditt varumärkes look med en kort rad. Byt orden med säsongen och behåll bakgrunden. En smal banner för e-postsignatur för en fotostudio med texten Bokar nu vårbröllop över en mjuk gradient En fotografs banner: en aktuell rad och studions namn. En banner för e-postsignatur som annonserar ett gratis webbinarium den 12 november En konsultfirma som marknadsför ett event. När det är över, byt raden. ### Undvik - Kontaktuppgifter bara inne i bilden - En banner på flera hundra kilobyte - Animerade GIF-filer som loopar för evigt - Citat, friskrivningar och fem sociala ikoner - Liten grå text som försvinner i mörkt läge ### Gör så här - Namn och länkar som riktig text - En lätt banner på 600×200, under 100 KB - En stillbild, eller högst en mild loop - En uppmaning till handling - En banner med egen bakgrund, så att den läses i både ljust och mörkt läge Mörkt läge är en verklig fälla. Vissa e-postappar inverterar eller tonar ljusa färger, så en logotyp på genomskinlig bakgrund kan försvinna mot en mörk inkorg. En banner som bär sin egen fulla bakgrund, som en rik gradient, ser likadan ut i båda lägena. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) och [gradienter i e-post](https://gradiently.design/sv/guide/gradients-in-email) går djupare in på hur klienter behandlar färg. ## HTML för en e-postsignatur som håller ihop E-postklienter är gammalmodiga när det gäller layout, så signaturer byggs med enkla tabeller och inline-stilar. Den här fungerar i de vanliga klienterna: klistra in den i en HTML-fil, öppna den i en webbläsare, markera allt och kopiera in det i e-postappens signaturinställningar. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Uppgifter som riktig text, en banner på din webbplats som visas i 600×200 från en fil på 1200×400, med alt-text som fortfarande ger mening om bilder blockeras. > **Lägg bilden på webben, klistra inte in den** När du klistrar in eller laddar upp en bild direkt i en signatur skickar vissa e-postappar den som en bilaga på varje meddelande, vilket syns som en gem och fyller inkorgar. Att länka till en bild på din egen webbplats med en fullständig https-adress undviker det. ## Så ställer du in din signatur, steg för steg 1. **Skriv textblocket** Namn, roll och företag, en länk att agera på, din webbplats. Läs det högt och stryk allt du inte skulle säga. 2. **Designa bannern i 600×200** Använd din varumärkesbakgrund och en kort rad. Håll orden i mitten med utrymme i båda ändar. 3. **Exportera i 1200×400** En JPEG av hög kvalitet för gradienter och foton, PNG för genomskinlighet. Kontrollera att filen är under 100 KB. 4. **Ladda upp den till din webbplats** Lägg den i en stabil mapp som `/email/`, så att adressen aldrig ändras och gamla e-postmeddelanden behåller sin banner. 5. **Bygg och klistra in HTML** Anpassa koden ovan, sätt bredden till 600, skriv en riktig alt-text och klistra in den i din e-postapp. 6. **Testa ordentligt** Skicka den till en Gmail- och en Outlook-adress, öppna den på en mobil, slå mörkt läge på och av och svara på tråden två gånger. ## Att hålla ett teams signaturer enhetliga Signaturer glider isär: en person lägger till ett citat, en annan använder förra årets logotyp. Ge teamet en HTML-mall och en banner, och byt bannern centralt när budskapet ändras. Samma disciplin som beskrivs i [varumärkesenhetlighet](https://gradiently.design/sv/guide/brand-consistency) gäller här, i mindre skala. Gradiently har en storlek för e-postsignatur på 600×200 färdig i Studio, och en egen storlek på 1200×400 täcker exporten för hög täthet. Gratis exporter har en liten vattenstämpel, så en ren banner kräver Pro, som också ger varumärkeskitet: logotyp, färger och typsnitt på ett ställe. Marken bakom bannern är densamma som på dina inlägg i sociala medier och dina [visitkort](https://gradiently.design/sv/guide/business-card-design), så ett svar i någons inkorg ser obestridligen ut som resten av ditt varumärke. ## FAQ ### Vilken storlek ska en e-postsignaturbanner ha? Designa den i 600×200 pixlar. Exportera i 1200×400 och sätt bildbredden till 600 så förblir den skarp på skärmar med hög täthet. ### Hur stor ska bildfilen för en e-postsignatur vara? Håll den långt under 100 KB. Bilden skickas eller laddas med varje e-postmeddelande och varje svar, så en tung fil växer snabbt. ### Varför visas min e-postsignaturbild som en bilaga? Vissa e-postappar bifogar inklistrade eller uppladdade bilder på varje meddelande. Lägg bilden på din webbplats och länka till den med en fullständig https-adress i stället. ### Ska jag lägga mitt telefonnummer i signaturbilden? Nej. Många e-postklienter blockerar bilder som standard, och text inne i en bild går inte att trycka på eller kopiera. Håll kontaktuppgifter som riktig text. ### Kan jag använda en animerad GIF i min e-postsignatur? Du kan, men håll den liten och subtil. En loopande animation på varje e-postmeddelande i en lång tråd blir snabbt störande, och vissa klienter visar bara första bildrutan.