Uutiskirjeen suunnitteluohjeita

Tältä sivulta löydät ohjeita, jotka ovat lähinnä mainostoimiston ja uutiskirjeen suunnittelijan käyttöön.

Uutiskirjeen muoto

Lukuisat sähköpostiohjelmat asettavat uutiskirjeelle tiettyjä rajoituksia. Etenkin HTML-muotoiset uutiskirjeet tulkitaan hyvin eri tavoin eri sähköpostiohjelmilla. Alla huomionarvoisia seikkoja kirjepohjan suunnitteluun ja toteutukseen.

• Uutiskirjeen suositeltava leveys maksimissaan 600 px
• Tärkeä sisältö kannattaa aina laittaa tekstinä, jotta sisältö näkyy varmasti kaikilla vastaanottajilla.
• Flashia, lomakkeita tai Javascriptiä ei voi käyttää
• Sisällytä aina tekstialue mukaan. Jos viestissä on pelkkiä kuvia, se tulkitaan helposti roskapostiksi.
• Yksinkertainen perusrakenne helpottaa pohjan monikäyttöisyyttä
• Varmista aina, että suunnittelussa käyttämäsi vastaavat CSS-määritykset toimivat kaikissa ohjelmissa. Lista eri sähköpostiohjelmien tukemista CSS-määrityksistä: Guide to CSS support in email clients.
   

Suositeltavat fontit (web-safe fonts)

Kirjepohjien suunnittelussa kannattaa ottaa huomioon, että uutiskirjeen vastaanottajien tietokoneisiin ei välttämättä ole asennettuna painettuun mediaan suunniteltuja fontteja. Tämän vuoksi kirjepohjissa kannattaa käyttää web-käyttöön tarkoitettuja ns. turvallisia fontteja, jotka löytyvät lähes jokaisesta tietokoneesta. Myös web-fontteja kuten Google-fontteja voi käyttää, mutta koska ne eivät näy jokaisessa sähköpostissa, täytyy valita myös varafontti Web-turvallisista fonteista. Lue lisää web-fonteista alempaa. 

Alla lista fonteista, jotka ovat toimineet erinomaisesti kaikissa tekemissämme testeissä:

• Georgia
• Times New Roman
• Arial
• Verdana
• Courier New

Seuraavat fontit ovat toimineet testeissä melko kattavasti:

• Impact
• Tahoma
• Trebuchet MS

Web-fontit ovat verkossa tarjolla olevia fontteja, joiden käyttäminen ei edellytä niiden asentamista käyttäjän tietokoneelle. LianaMailerissa voi käyttää web-fontteja kuten esimerkiksi Google-fontteja. 

Kaikki sähköpostit eivät kuitenkaan tue web-fontteja ja fontit saattavat jopa rikkoutua niitä käytettäessä. 

Ohjelmat ja laitteet, jotka tukevat web-fonttien käyttämistä:

• Apple Mail 8, 9
• Outlook 2000
• Outlook 2011 (OS X)
• Outlook 2016 (OS X, not Windows)
• Thunderbird
• Android Mail
• iPhones and iPads
• Kaikki nykyaikaiset internet-selaimet. 

Ohjelmat, jotka eivät tue web-fonttien käyttämistä:

• Outlooks 2002, 2003, 2007, 2010, 2013, 2016 (Windows)
• Gmail App
• AOL Mail, Gmail, Office 365, Outlook.com, Yahoo! Mail

Jos käytät web-fonttia, valitse varafontiksi jokin web-turvallinen fontti.

Muita ohjeita ohjelmoijalle

Suosittelemme käyttämään uutiskirjeen ohjelmointiin siihen erikoistunutta asiantuntijaa. Uutiskirjeen koodaus eroaa huomattavasti tavallisesta web-sivuston HTML-koodauksesta. Tarjoamme näitä palveluita testauksen kera esimerkiksi valmiista PSD-kuvasta uutiskirjepohjaksi. Ota yhteyttä yhteyshenkilöönne, autamme mielellämme. 

• Suosi HTML:aa XHTML:n sijaan.
• Jätä rivivaihdot pois img-tagien ympäriltä.
• Käytä mahdollisimman vähän sisäkkäisiä taulukoita (table).
• CSS padding ja margin määritykset eivät toimi luotettavasti kaikilla elementeillä. Turvallisinta on käyttää padding määritystä taulukon solulla (td). Tee tarvittavat välistykset padding määritystä käyttäen solulle tai ylimääräisillä tyhjillä taulukon soluilla (td) antamalla niille tarvittavat leveydet ja / tai korkeudet.
• Kuville tulee olla määritettynä width attribuutti.
• Asettele kuvat ja tekstit soluihin solun align ja valign attribuuteilla. Kuvien align attribuutti ei toimi kuvan asettelemiseen tai tekstin juoksuttamiseen kuvan ympärillä.
• Optimoi (= pakkaa kuvat)
• Animoituja gif-tiedostoja voi käyttää. Pääsääntöisesti ne toimivat hyvin mutta tietyin rajoituksin esimerkiksi Outlook-sähköpostiohjelmassa.
• Läpinäkyvien png-kuvien käyttö on mahdollista.
• CTA-painikkeet voidaan koodata tai käyttää kuvia. Emme kuitenkaan suosittele kuvien käyttöä. 
• Moduulien taustavärin tai CTA-painikkeen värin voi vaihtaa toiseen korosteväriin.
• Youtube-linkit saadaan toimimaan suoraan uutiskirjeissä osassa asennuksia.

Pohjan osien lukitus muokkauksilta

Jos viestin lukitus -asetus on päällä, viestipohjasta voidaan lukita halutut osat niin, ettei niitä voi viestiä kirjoitettaessa muokata. Solut, joita voidaan muokata, merkitään viestipohjaan "editable"-luokalla (td class="editable"). Tällöin ne solut, joita ei ole merkitty, lukitaan viestin kirjoitusvaiheessa.

Muokattaviksi voi merkitä ainoastaan yksittäisiä taulukon soluja (td), eli esim. riviä tai kokonaista taulukkoa ei voi asettaa muokattavaksi "editable"-luokalla.