16 mobilajām ierīcēm piemērota HTML e-pasta paraugprakse, kas maksimāli palielina iesūtnes izvietojumu un iesaisti
Iespējams, ka 2023. gadā mobilās ierīces pārspēs galddatorus kā galveno ierīci e-pasta atvēršanai. Faktiski HubSpot to atklāja 46 procenti no visiem e-pasta atvēršanas gadījumiem tagad notiek mobilajā ierīcē. Ja neveidojat e-pastus mobilajām ierīcēm, jūs atstājat uz galda lielu iesaistīšanos un naudu.
- E-pasta autentifikācija: Nodrošinot savu e-pasta ziņojumi ir autentificēti uz sūtīšanas domēnu un IP adrese ir ļoti svarīga, lai nokļūtu iesūtnē, un tā netiek novirzīta uz nevēlamo vai surogātpasta mapi. Protams, ir arī svarīgi, lai jūs nodrošinātu iespēju atteikties no e-pasta, izmantojot platformu, kurā ir iekļauta abonēšanas atcelšanas saite.
- Reaģējošs dizains: Jūsu darbs IR Klientu apkalpošana HTML e-pastam jābūt izstrādāts, lai būtu atsaucīgs, kas nozīmē, ka to var pielāgot tās ierīces ekrāna izmēram, kurā tas tiek skatīts. Tas nodrošina, ka e-pasts izskatās labi gan galddatoros, gan mobilajās ierīcēs.
- Skaidra un kodolīga tēmas rindiņa: Mobilo sakaru lietotājiem ir svarīga skaidra un kodolīga tēmas rindiņa, jo viņi savā e-pasta priekšskatījuma rūtī var redzēt tikai dažus pirmos tēmas rindiņas vārdus. Tam jābūt īsam un precīzi jāatspoguļo e-pasta saturs. E-pasta tēmas rindiņas optimālais rakstzīmju garums var atšķirties atkarībā no vairākiem faktoriem, piemēram, e-pasta satura, auditorijas un izmantotā e-pasta klienta. Tomēr lielākā daļa ekspertu iesaka e-pasta tēmas rindiņas saglabāt īsas un precīzas, parasti no 41 līdz 50 rakstzīmēm vai 6-8 vārdiem. Mobilajās ierīcēs tēmas rindiņas, kas garākas par 50 rakstzīmēm, var tikt nogrieztas, un dažos gadījumos var tikt parādīti tikai daži pirmie tēmas rindiņas vārdi. Tas var apgrūtināt adresāta izpratni par e-pasta galveno ziņojumu un var samazināt e-pasta atvēršanas iespējamību.
- Priekšvirsraksts: E-pasta priekšgalvene ir īss e-pasta satura kopsavilkums, kas tiek rādīts blakus vai zem temata rindiņas e-pasta klienta iesūtnē. Tas ir svarīgs elements, kas optimizējot var ietekmēt jūsu e-pasta ziņojumu atvēršanas ātrumu. Lielākā daļa klientu izmanto HTML un CSS, lai nodrošinātu, ka priekšgalvenes teksts ir pareizi iestatīts.
<!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>
- Vienas kolonnas izkārtojums: E-pasta ziņojumus, kas ir izstrādāti ar vienas kolonnas izkārtojumu, ir vieglāk lasīt mobilajās ierīcēs. Saturam jābūt sakārtotam loģiskā secībā un sniegtam vienkāršā, viegli lasāmā formātā. Ja jums ir vairākas kolonnas, izmantojot CSS, kolonnas var graciozi sakārtot vienas kolonnas izkārtojumā.
Lūk, kāds HTML e-pasta izkārtojums tas ir 2 kolonnas galddatorā un sakļaujas vienā kolonnā mobilo ierīču ekrānos:
<!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>
Lūk, kāds HTML e-pasta izkārtojums tas ir 3 kolonnas galddatorā un sakļaujas vienā kolonnā mobilo ierīču ekrānos:
<!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>
- Gaišais un tumšais režīms: tilts e-pasta klienti atbalsta gaišo un tumšo režīmu CSS
prefers-color-scheme
lai pielāgotos lietotāja vēlmēm. Noteikti izmantojiet attēlu veidus, kur jums ir caurspīdīgs fons. Šeit ir koda piemērs.
<!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>
- Lieli, salasāmi fonti: Fonta lielums un stils jāizvēlas tā, lai teksts būtu viegli lasāms mazā ekrānā. Izmantojiet vismaz 14 pt fontu lielumu un izvairieties no tādu fontu izmantošanas, kurus ir grūti nolasīt mazos ekrānos. Bieži lietotajiem fontiem ir liela iespējamība, ka tie tiks konsekventi renderēti dažādos e-pasta klientos, tāpēc Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma un Trebuchet MS parasti ir droši fonti. Ja izmantojat pielāgotu fontu, noteikti savā CSS pakalpojumā ir norādīts rezerves fonts.
<!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>
- Optimāla attēlu izmantošana: Attēli var palēnināt ielādes laiku un var netikt pareizi parādīti visās mobilajās ierīcēs. Izmantojiet attēlus taupīgi un pārliecinieties, ka tie ir izmērīti un saspiests apskatei mobilajā ierīcē. Noteikti aizpildiet savu attēlu alternatīvo tekstu, ja e-pasta klients tos bloķē. Visi attēli ir jāsaglabā un jāatsaucas no drošas vietnes (SSL). Šeit ir HTML e-pasta ziņojumā iekļauto adaptīvo attēlu koda piemērs.
<!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>
- Skaidrs aicinājums uz darbību (CTA): Skaidrs un pamanāms CTA ir svarīgs jebkurā e-pastā, taču tas ir īpaši svarīgi mobilajām ierīcēm draudzīgā e-pastā. Pārliecinieties, vai CTA ir viegli atrast un vai tas ir pietiekami liels, lai uz to varētu noklikšķināt mobilajā ierīcē. Ja iekļaujat pogas, varat nodrošināt, ka tās ir rakstītas CSS, izmantojot arī iekļautas stila tagus:
<!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>
- Īss un kodolīgs saturs: Lai e-pasta saturs būtu īss un precīzs. Rakstzīmju ierobežojums HTML e-pasta ziņojumam var atšķirties atkarībā no izmantotā e-pasta klienta. Tomēr lielākā daļa e-pasta klientu nosaka maksimālo e-pasta lieluma ierobežojumu, parasti no 1024 līdz 2048 kilobaitiem (KB), kas ietver gan HTML kodu, gan visus attēlus vai pielikumus. Izmantojiet apakšvirsrakstus, aizzīmju punktus un citus formatēšanas paņēmienus, lai padarītu saturu viegli skenējamu, ritinot un lasot mazā ekrānā.
- Interaktīvie elementi: iekļaujot interaktīvie elementi kas piesaistīs jūsu abonenta uzmanību, palielinās jūsu e-pasta iesaistīšanās, izpratnes un reklāmguvumu līmeni. Animācijas ir Gif, atpakaļskaitīšanas taimerus, videoklipus un citus elementus atbalsta lielākā daļa viedtālruņu e-pasta klientu.
- Personalizēšana: Sveiciena un satura personalizēšana konkrētam abonentam var ievērojami veicināt iesaistīšanos, tikai pārliecinieties, ka esat pareizi sapratis! Piem. Ir svarīgi izmantot atkāpšanās gadījumus, ja vārda laukā nav datu.
- Dinamiskais saturs: Satura segmentēšana un pielāgošana var samazināt jūsu abonēšanas rādītājus un piesaistīt jūsu abonentus.
- Kampaņas integrācija: Lielākajai daļai mūsdienu e-pasta pakalpojumu sniedzēju ir iespēja automātiski pievienot UTM kampaņu vaicājumu virknes katrai saitei, lai e-pastu varētu skatīt kā analītikas kanālu.
- Preferenču centrs: E-pasta mārketings ir pārāk svarīgs tikai izvēles vai atteikšanās pieejai e-pastiem. Priekšrocību centra iekļaušana, kurā jūsu abonenti var mainīt e-pasta ziņojumu saņemšanas biežumu un viņiem svarīgu saturu, ir lielisks veids, kā uzturēt spēcīgu e-pasta programmu ar iesaistītiem abonentiem!
- Pārbaudi, pārbaudi, pārbaudi: Noteikti pārbaudiet savu e-pastu vairākās ierīcēs vai izmantojiet lietojumprogrammu priekšskatiet savus e-pasta ziņojumus e-pasta klientos lai PIRMS nosūtīšanas nodrošinātu, ka tas izskatās labi un pareizi darbojas dažādos ekrānos un operētājsistēmās. Lakmuss ziņo, ka 3 populārākās mobilās atvērtās vides joprojām ir nemainīgas: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Iekļaujiet arī tēmas rindiņu un satura testa variantus, lai uzlabotu atvēršanas un vidējo klikšķu skaitu. Daudzās e-pasta platformās tagad ir iekļauta automatizēta pārbaude, kas ņems paraugus no saraksta, identificēs labāko variantu un nosūtīs labāko e-pastu pārējiem abonentiem.
Ja jūsu uzņēmumam ir grūtības ar tādu mobilajām ierīcēm atbilstošu e-pasta ziņojumu izstrādi, testēšanu un ieviešanu, kas veicina iesaistīšanos, lūdzu, sazinieties ar manu uzņēmumu. DK New Media ir pieredze praktiski katra e-pasta pakalpojumu sniedzēja ieviešanā (ESP).