16 mobiiliystävällistä HTML-sähköpostin parasta käytäntöä, jotka maksimoivat postilaatikon sijoittelun ja sitoutumisen
Vuonna 2023 on todennäköistä, että mobiili ohittaa pöytätietokoneet ensisijaisena sähköpostin avaamislaitteena. Itse asiassa HubSpot löysi sen 46 prosenttia kaikista sähköpostin avauksista tapahtuu nyt mobiililaitteella. Jos et suunnittele sähköposteja mobiililaitteille, jätät paljon sitoutumista ja rahaa pöydälle.
- Sähköpostin todennus: Varmistaa sinun sähköpostit todennetaan lähettävälle verkkotunnukselle ja IP Osoite on tärkeä, jotta se pääsee postilaatikkoon, eikä sitä reititetä roskaposti- tai roskapostikansioon. Tietysti on myös tärkeää, että annat tavan kieltäytyä sähköpostista käyttämällä alustaa, joka sisältää tilauksen peruutuslinkin.
- Vastuullinen suunnittelu: - HTML sähköpostin pitäisi olla suunniteltu reagoimaan, mikä tarkoittaa, että se voi mukautua sen laitteen näytön kokoon, jolla sitä katsellaan. Tämä varmistaa, että sähköposti näyttää hyvältä sekä pöytäkoneilla että mobiililaitteilla.
- Selkeä ja ytimekäs aiherivi: Selkeä ja ytimekäs aiherivi on tärkeä mobiilikäyttäjille, koska he saattavat nähdä sähköpostin esikatseluruudussa vain aiherivin ensimmäiset sanat. Sen tulee olla lyhyt ja heijastaa tarkasti sähköpostin sisältöä. Sähköpostin aiherivin optimaalinen merkin pituus voi vaihdella useiden tekijöiden, kuten sähköpostin sisällön, yleisön ja käytettävän sähköpostiohjelman, mukaan. Useimmat asiantuntijat suosittelevat kuitenkin sähköpostin aiherivien pitämistä lyhyinä ja täsmällisinä, tyypillisesti 41-50 merkin tai 6-8 sanan pituisina. Mobiililaitteissa yli 50 merkin pituiset aiherivit voivat katketa, ja joissain tapauksissa ne voivat näyttää vain aiherivin ensimmäiset sanat. Tämä voi vaikeuttaa sähköpostin pääviestin ymmärtämistä ja vähentää sähköpostin avaamisen todennäköisyyttä.
- Esiotsikko: Sähköpostin esiotsikko on lyhyt yhteenveto sähköpostin sisällöstä, joka näkyy sähköpostiohjelman postilaatikossa aiherivin vieressä tai alapuolella. Se on tärkeä elementti, joka voi vaikuttaa sähköpostisi avautumiseen optimoituna. Useimmat asiakkaat käyttävät HTML- ja CSS-koodia varmistaakseen, että esiotsikkoteksti on määritetty oikein.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- Yhden sarakkeen asettelu: Sähköpostit, jotka on suunniteltu yhden sarakkeen asetteluun, ovat helpompia lukea mobiililaitteilla. Sisältö tulee järjestää loogiseen järjestykseen ja esittää yksinkertaisessa, helposti luettavassa muodossa. Jos sinulla on useita sarakkeita, CSS:n avulla voit järjestää sarakkeet tyylikkäästi yhden sarakkeen asetteluun.
Tässä HTML-sähköpostiasettelu eli 2 saraketta työpöydällä ja tiivistyy yhdeksi sarakkeeksi mobiilinäytöillä:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
Tässä HTML-sähköpostiasettelu eli 3 saraketta työpöydällä ja tiivistyy yhdeksi sarakkeeksi mobiilinäytöillä:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Vaalea ja tumma tila: bridge sähköpostiohjelmat tukevat vaaleaa ja tummaa tilaa CSS
prefers-color-scheme
vastaamaan käyttäjän mieltymyksiä. Muista käyttää kuvatyyppejä, joissa taustasi on läpinäkyvä. Tässä esimerkki koodista.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- Suuret, luettavat fontit: Fonttikoko ja -tyyli tulee valita siten, että tekstiä on helppo lukea pieneltä näytöltä. Käytä vähintään 14 pt fonttikokoa ja vältä kirjasimia, joita on vaikea lukea pienillä näytöillä. Yleisesti käytetyillä kirjasimilla on suuri todennäköisyys renderöidä johdonmukaisesti eri sähköpostiohjelmissa, joten Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma ja Trebuchet MS ovat yleensä turvallisia kirjasimia. Jos käytät mukautettua kirjasinta, varmista, että CSS:ssäsi on tunnistettu varafontti:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- Optimaalinen kuvien käyttö: Kuvat voivat hidastaa latausaikoja, eivätkä ne välttämättä näy oikein kaikissa mobiililaitteissa. Käytä kuvia säästeliäästi ja varmista, että niiden koko on ja tiivistetty mobiilikatseluun. Muista täyttää kuviesi vaihtoehtoinen teksti siinä tapauksessa, että sähköpostiohjelma estää ne. Kaikki kuvat tulee tallentaa ja niihin viitataan turvalliselta verkkosivustolta (SSL). Tässä on esimerkkikoodi responsiivisista kuvista HTML-sähköpostissa.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Selkeä toimintakehotus (CTA): Selkeä ja näkyvä toimintakehotus on tärkeä kaikissa sähköpostiviesteissä, mutta erityisen tärkeä mobiiliystävällisessä sähköpostissa. Varmista, että toimintakehotus on helppo löytää ja että se on tarpeeksi suuri napsautettavaksi mobiililaitteella. Jos käytät painikkeita, voit varmistaa, että kirjoitat ne myös CSS:ssä inline style tagien avulla:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- Lyhyt ja ytimekäs sisältö: Pidä sähköpostin sisältö lyhyenä ja ytimekkäänä. HTML-sähköpostin merkkirajoitus voi vaihdella käytettävän sähköpostiohjelman mukaan. Useimmat sähköpostiohjelmat asettavat kuitenkin sähköpostien enimmäiskokorajoituksen, tyypillisesti välillä 1024-2048 kilotavua (KB), joka sisältää sekä HTML-koodin että kaikki kuvat tai liitteet. Käytä alaotsikoita, luettelomerkkejä ja muita muotoilutekniikoita, jotta sisältö on helposti skannatavissa vierittäessä ja luettaessa pienellä näytöllä.
- Interaktiiviset elementit: sisältävät interaktiivisia elementtejä jotka kiinnittävät tilaajasi huomion, lisäävät sähköpostisi sitoutumista, ymmärtämistä ja tulosprosentteja. Animoituja GIF-tiedostoja, lähtölaskentaajastimia, videoita ja muita elementtejä tukevat useimmat älypuhelinten sähköpostiohjelmat.
- personointi: Tervehdysten ja sisällön personoiminen tietylle tilaajalle voi merkittävästi lisätä sitoutumista, mutta varmista, että saat sen oikein! Esim. Jos etunimikentässä ei ole tietoja, on tärkeää tehdä varaosia.
- Dynaaminen sisältö: Sisällön segmentointi ja räätälöinti voi vähentää tilausten peruutusprosentteja ja pitää tilaajasi sitoutuneina.
- Kampanjan integrointi: Useimmilla nykyaikaisilla sähköpostipalveluntarjoajilla on mahdollisuus liittää automaattisesti UTM-kampanjan kyselymerkkijonot jokaiselle linkille, jotta voit tarkastella sähköpostia kanavana analytiikan kautta.
- Asetuskeskus: Sähköpostimarkkinointi on liian tärkeää vain sähköpostien valinnalle tai kieltäytymiselle. Asetuskeskuksen sisällyttäminen, jossa tilaajasi voivat muuttaa sähköpostien vastaanottamisväliä ja heille tärkeää sisältöä, on loistava tapa ylläpitää vahvaa sähköpostiohjelmaa sitoutuneiden tilaajien kanssa!
- Testaa, testaa, testaa: Muista testata sähköpostisi useilla laitteilla tai käyttää sovellusta esikatsella sähköpostisi sähköpostiohjelmissa varmistaaksesi, että se näyttää hyvältä ja toimii oikein erikokoisissa näytöissä ja käyttöjärjestelmissä ENNEN lähettämistä. Litmus raportoi, että 3 suosituinta mobiili avointa ympäristöä ovat edelleen samat: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Lisää myös testimuunnelmia aiheriveistäsi ja sisällöstäsi parantaaksesi avautumis- ja napsautussuhdettasi. Monet sähköpostiympäristöt sisältävät nyt automaattisen testauksen, joka ottaa näytteitä luettelosta, tunnistaa voittavan muunnelman ja lähettää parhaan sähköpostin jäljellä oleville tilaajille.
Jos yrityksesi kamppailee sitoutumista lisäävien mobiiliresponsiivisten sähköpostien suunnittelun, testaamisen ja toteuttamisen kanssa, älä epäröi ottaa yhteyttä yritykseeni. DK New Media hänellä on kokemusta käytännössä kaikkien sähköpostipalveluntarjoajien käyttöönotosta (ESP).