# Sähköpostiallekirjoitus: kevyt 600×200-banneri

[Canonical HTML page](https://gradiently.design/fi/guide/email-signature-design)

Allekirjoituksesi lähtee jokaisessa sähköpostissa, joten se on katsotuin suunnitelmasi. Näin teet siitä harkitun, nopeasti latautuvan ja ilman liiteklemmaria.

## The short version

- Hyvä sähköpostiallekirjoitus säilyttää nimen, roolin ja yhteystiedot tekstinä ja lisää enintään yhden pienen kuvabannerin.
- Allekirjoitusbanneri toimii koossa 600×200 pikseliä, kuvasuhteella 3:1, joka sopii kapeimpiin sähköpostiasetteluihin.
- Vie banneri kaksinkertaisena 1200×400 ja näytä se 600 pikselin levyisenä, niin se pysyy terävänä tiheäpikselisillä näytöillä.
- Moni sähköpostiohjelma estää kuvat, kunnes lukija sallii ne. Siksi tärkeää tietoa ei saa olla vain bannerissa.
- Palvelimella oleva kuva täydellä https-osoitteella pitää viestin kevyenä. Liitetty kuva lähtee usein liitteenä jokaisessa viestissä.

Hyvä **sähköpostiallekirjoitus** on hillitty: nimi, rooli ja yksi tai kaksi yhteydenottotapaa oikeana tekstinä, sitten yksi pieni 600×200-banneri brändillesi. Pidä kuva kevyenä ja linkitä se yhdelle sivulle. Älä jätä puhelinta tai sähköpostiosoitetta vain kuvaan, sillä moni postilaatikko piilottaa kuvat lukijan lupaan asti.

## Mitä allekirjoitukseen kuuluu

Allekirjoituksella on kaksi tehtävää: kertoa kuka olet ja miten sinut tavoittaa sekä muistuttaa mitä teet. Ensimmäinen on tekstiä, toinen voi olla banneri. Muu on hälyä, jonka ihmiset oppivat ohittamaan.

| Elementti | Muoto | Huomiot |
| --- | --- | --- |
| Nimi | Lihavoitu teksti | Ainoa muita suurempi asia |
| Rooli ja yritys | Teksti | Yksi rivi pilkulla erotettuna |
| Puhelin tai varauslinkki | Tekstilinkki | Yksi ensisijainen toimintatapa, ei neljää |
| Verkkosivusto | Tekstilinkki | Lyhyt ja luettava, ilman `https://`-alkua |
| Banneri | Kuva, 600×200 | Valinnainen, linkittää yhdelle sivulle |
| Somekuvakkeet | Pienet kuvat | Enintään kaksi tai kolme tai jätä pois |

Teksti ensin, kuva toisena. Allekirjoituksen pitää toimia, vaikka yksikään kuva ei lataudu.

## Allekirjoitusbannerin koko ja tiedostopaino

Suunnittele banneri koossa 600×200, suhteella 3:1. Perinteiset sähköpostipohjat perustuvat 600 pikselin leveyteen, joten kuva sopii puhelimen postiin ja työpöydän lukuruutuun ilman skaalausta. Vie tiheille näytöille sama suunnitelma kaksinkertaisena 1200×400 ja määritä näyttöleveydeksi 600 pikseliä.

- Allekirjoitus 600×200: 600 × 200
- Sähköpostiotsake 1200×600: 1200 × 600
- Käyntikortti 1050×600: 1050 × 600

Allekirjoitusbanneri uutiskirjeotsakkeen ja käyntikortin rinnalla mittakaavassa. Banneri on kapea kaistale, ei juliste.

Tiedostopaino merkitsee enemmän kuin luulisi, sillä kuva kulkee pitkän ketjun jokaisessa vastauksessa. Pidä se selvästi alle 100 KB:n. Liukuväri toimii laadukkaana JPEG:nä. Käytä PNG:tä vain läpinäkyvyyteen tai hienoon tekstiin. Uutiskirjettä varten [sähköpostiotsakkeen suunnittelu](https://gradiently.design/fi/guide/email-header-design) kattaa suuremman muodon.

## Bannerin suunnittelu

Sata kertaa viikossa näkyvän bannerin pitää sanoa yksi asia rauhallisesti. Se toimii hillittynä mainintana tulevasta tapahtumasta, uudesta palvelusta, varauslinkistä tai brändi-ilmeestä lyhyellä rivillä. Vaihda sanat kausittain, säilytä tausta.

Valokuvausstudion kapea allekirjoitusbanneri tekstillä Varaa nyt keväthäiden kuvaus pehmeällä liukuvärillä

Valokuvaajan banneri: yksi ajankohtainen rivi ja studion nimi.

Sähköpostiallekirjoituksen banneri ilmaisesta webinaarista 12. marraskuuta

Konsulttiyritys mainostaa yhtä tapahtumaa. Vaihda rivi sen jälkeen.

### Vältä

- Yhteystiedot vain kuvassa
- Usean sadan kilotavun banneri
- Loputtomasti toistuva animoitu GIF
- Sitaatit, vastuuvapauslausekkeet ja viisi somekuvaketta
- Pieni harmaa teksti, joka katoaa tummassa tilassa

### Tee näin

- Nimi ja linkit oikeana tekstinä
- Kevyt 600×200-banneri alle 100 KB
- Still-kuva tai enintään yksi lempeä silmukka
- Yksi toimintakehotus
- Oma tausta bannerille vaaleaa ja tummaa tilaa varten

Tumma tila on todellinen ansa. Osa postisovelluksista kääntää tai sävyttää vaaleat värit, jolloin läpinäkyvän taustan logo katoaa tummaan postilaatikkoon. Oma täysi tausta, kuten syvä liukuväri, näyttää samalta molemmissa. [Tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) ja [liukuvärit sähköpostissa](https://gradiently.design/fi/guide/gradients-in-email) kertovat ohjelmien värinkäsittelystä.

## Koossa pysyvän allekirjoituksen HTML

Sähköpostiohjelmien asettelu on vanhanaikaista, joten allekirjoitukset tehdään yksinkertaisilla taulukoilla ja inline-tyyleillä. Tämä toimii yleisissä ohjelmissa: liitä HTML-tiedostoon, avaa selaimessa, valitse kaikki ja kopioi postisovelluksen allekirjoitusasetuksiin.

```html
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>
```

Tiedot tekstinä, yksi palvelimella oleva banneri 1200×400-tiedostosta näytettynä 600×200-koossa sekä kuvien estossa ymmärrettävä vaihtoehtoteksti.

> **Säilytä kuva palvelimella, älä liitä** Suoraan liitetty tai ladattu allekirjoituskuva lähtee joissakin ohjelmissa jokaisen viestin liitteenä. Se näkyy klemmarina ja täyttää postilaatikkoja. Linkki oman sivuston kuvaan täydellä https-osoitteella välttää tämän.

## Allekirjoituksen tekeminen vaiheittain

1. **Kirjoita tekstiosa** Nimi, rooli ja yritys, yksi toimintalinkki, verkkosivusto. Lue ääneen ja poista mitä et sanoisi.
2. **Suunnittele 600×200-banneri** Bränditausta ja yksi lyhyt rivi. Sanat keskelle ja tilaa molempiin päihin.
3. **Vie koossa 1200×400** Laadukas JPEG liukuväreille ja valokuville, PNG läpinäkyvyyteen. Tarkista alle 100 KB:n koko.
4. **Lataa verkkosivustollesi** Vakaa kansio kuten `/email/` pitää osoitteen samana ja bannerin myös vanhoissa viesteissä.
5. **Muokkaa ja liitä HTML** Sovita yllä oleva koodi, määritä leveydeksi 600, kirjoita oikea vaihtoehtoteksti ja liitä postisovellukseen.
6. **Testaa kunnolla** Lähetä Gmail- ja Outlook-osoitteeseen, avaa puhelimella, vaihda tumma tila päälle ja pois ja vastaa ketjuun kahdesti.

## Tiimin yhtenäiset allekirjoitukset

Allekirjoitukset muuttuvat: yksi lisää sitaatin, toinen käyttää viime vuoden logoa. Anna tiimille yksi HTML-pohja ja banneri. Vaihda banneri keskitetysti viestin muuttuessa. [Brändin yhtenäisyyden](https://gradiently.design/fi/guide/brand-consistency) periaate pätee tässä pienemmässä koossa.

Gradientlyn Studiossa on valmis Sähköpostiallekirjoitus-koko 600×200. Mukautettu 1200×400 sopii tarkkaan vientiin. Ilmaisvienneissä on pieni vesileima, joten puhdas banneri tarvitsee Pron, joka tuo myös brändipaketin: logo, värit ja fontit yhdessä paikassa. Bannerin takana on sama Mark kuin somejulkaisuissa ja [käyntikorteissa](https://gradiently.design/fi/guide/business-card-design), joten vastaus postilaatikossa näyttää selvästi brändiltäsi.

## FAQ

### Minkä kokoinen allekirjoitusbanneri on?

Suunnittele 600×200 pikseliin. Vie 1200×400 ja määritä leveys 600:aan, niin kuva pysyy terävänä tiheillä näytöillä.

### Kuinka suuri allekirjoituskuvan tiedosto saa olla?

Pidä se selvästi alle 100 KB:n. Kuva lähetetään tai ladataan jokaisen viestin ja vastauksen mukana, joten suuri koko kertyy nopeasti.

### Miksi allekirjoituskuvani näkyy liitteenä?

Osa postisovelluksista liittää ladatun kuvan jokaiseen viestiin. Säilytä se verkkosivustolla ja linkitä täydellä https-osoitteella.

### Laitanko puhelinnumeroni allekirjoituskuvaan?

Älä. Moni ohjelma estää kuvat oletuksena, eikä kuvan tekstiä voi napauttaa tai kopioida. Pidä yhteystiedot oikeana tekstinä.

### Voinko käyttää animoitua GIF-kuvaa allekirjoituksessa?

Voit, mutta pidä se pienenä ja hillittynä. Pitkän ketjun jokaisessa viestissä toistuva liike häiritsee nopeasti, ja osa ohjelmista näyttää vain ensimmäisen ruudun.