16 najboljih praksi za HTML e-poštu prilagođenu mobilnim uređajima koji povećavaju položaj i angažman u pristigloj pošti
U 2023. vjerojatno će mobitel nadmašiti desktop kao primarni uređaj za otvaranje e-pošte. Zapravo, HubSpot je to otkrio 46 posto svih otvaranja e-pošte sada se događa na mobitelu. Ako ne dizajnirate e-poštu za mobilne uređaje, ostavljate puno angažmana i novca na stolu.
- Autentifikacija e-pošte: Osiguravanje vašeg e-pošta je provjerena na domenu pošiljatelja i IP adresa je ključna za dolazak do ulazne pošte, a ne za preusmjeravanje u mapu bezvrijedne ili neželjene pošte. Također je bitno, naravno, da omogućite način isključivanja e-pošte pomoću platforme koja uključuje vezu za odjavu pretplate.
- Odgovarajući dizajn: Korištenje električnih romobila ističe HTML e-pošta bi trebala biti dizajniran da bude osjetljiv, što znači da se može prilagoditi veličini zaslona uređaja na kojem se gleda. To osigurava da e-pošta izgleda dobro i na stolnom računalu i na mobilnim uređajima.
- Jasan i koncizan predmet: Jasan i koncizan redak predmeta važan je za mobilne korisnike jer mogu vidjeti samo prvih nekoliko riječi retka predmeta u svom oknu za pregled e-pošte. Trebao bi biti kratak i točno odražavati sadržaj e-poruke. Optimalna duljina znakova retka predmeta e-pošte može varirati ovisno o nizu čimbenika, kao što su sadržaj e-pošte, publika i klijent e-pošte koji se koristi. Međutim, većina stručnjaka preporučuje da predmet e-pošte bude kratak i jasan, obično između 41-50 znakova ili 6-8 riječi. Na mobilnim uređajima, reci s predmetom koji su duži od 50 znakova mogu biti odrezani, au nekim slučajevima mogu prikazati samo prvih nekoliko riječi retka s predmetom. To može otežati primatelju razumijevanje glavne poruke e-pošte i može smanjiti vjerojatnost otvaranja e-pošte.
- Predzaglavlje: Predzaglavlje e-pošte kratki je sažetak sadržaja e-pošte koji se pojavljuje pored ili ispod retka predmeta u ulaznoj pošti klijenta e-pošte. To je važan element koji može utjecati na stopu otvaranja vaše e-pošte kada se optimizira. Većina klijenata uključuje HTML i CSS kako bi osigurali da je tekst predzaglavlja ispravno postavljen.
<!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>
- Izgled u jednom stupcu: E-poruke koje su dizajnirane s izgledom u jednom stupcu lakše je čitati na mobilnim uređajima. Sadržaj bi trebao biti organiziran u logičan slijed i predstavljen u jednostavnom, lako čitljivom formatu. Ako imate više stupaca, pomoću CSS-a možete elegantno organizirati stupce u rasporedu s jednim stupcem.
Evo jednog HTML izgled e-pošte to su 2 stupca na radnoj površini i sažimaju se u jedan stupac na zaslonima mobilnih uređaja:
<!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>
Evo jednog HTML izgled e-pošte to su 3 stupca na radnoj površini i sažimaju se u jedan stupac na zaslonima mobilnih uređaja:
<!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>
- Svijetli i tamni način rada: most klijenti e-pošte podržavaju svijetli i tamni način rada CSS
prefers-color-scheme
kako bi se prilagodili korisničkim preferencijama. Obavezno upotrijebite vrste slika koje imaju prozirnu pozadinu. Evo primjera koda.
<!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>
- Veliki, čitljivi fontovi: Veličinu i stil slova treba odabrati tako da tekst bude lako čitljiv na malom ekranu. Koristite font veličine najmanje 14 pt i izbjegavajte upotrebu fontova koji se teško čitaju na malim ekranima. Često korišteni fontovi imaju veliku vjerojatnost dosljednog prikazivanja na različitim klijentima e-pošte, tako da su korištenje Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma i Trebuchet MS obično sigurni fontovi. Ako ipak koristite prilagođeni font, provjerite jeste li u svom CSS-u identificirali rezervni font:
<!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>
- Optimalna upotreba slika: Slike mogu usporiti vrijeme učitavanja i možda se neće pravilno prikazati na svim mobilnim uređajima. Koristite slike umjereno i provjerite jesu li veličine i stisnut za mobilno gledanje. Obavezno popunite zamjenski tekst za svoje slike u slučaju da ih klijent e-pošte blokira. Sve slike trebaju biti pohranjene i na njih se treba odnositi sa sigurne web stranice (SSL). Evo primjera koda responzivnih slika u HTML e-poruci.
<!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>
- Jasni poziv na radnju (HAT): Jasan i istaknut CTA važan je u svakoj e-pošti, ali posebno je važan u e-pošti prilagođenoj mobilnim uređajima. Provjerite je li CTA lako pronaći i je li dovoljno velik da se na njega može kliknuti na mobilnom uređaju. Ako ugradite gumbe, možete biti sigurni da su napisani u CSS-u s ugrađenim stilskim oznakama:
<!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>
- Kratak i jezgrovit sadržaj: Neka sadržaj e-pošte bude kratak i jasan. Ograničenje broja znakova za HTML e-poštu može varirati ovisno o klijentu e-pošte koji se koristi. Međutim, većina klijenata e-pošte nameće ograničenje maksimalne veličine za e-poštu, obično između 1024-2048 kilobajta (KB), koji uključuje i HTML kod i sve slike ili privitke. Upotrijebite podnaslove, grafičke oznake i druge tehnike oblikovanja kako bi sadržaj bio lako skeniran tijekom pomicanja i čitanja na malom zaslonu.
- Interaktivni elementi: Napravljena interaktivni elementi koji zaokupljaju pozornost vašeg pretplatnika povećat će angažman, razumijevanje i stope konverzije vaše e-pošte. Animirani GIF-ovi, mjerači vremena, videozapisi i drugi elementi podržani su od strane većine klijenata e-pošte za pametne telefone.
- Personalizacija: Personaliziranje pozdrava i sadržaja za određenog pretplatnika može značajno potaknuti angažman, samo budite sigurni da ste to učinili kako treba! Npr. Važno je imati zamjenske podatke ako u polju za ime nema podataka.
- Dinamički sadržaj: Segmentacija i prilagodba sadržaja može smanjiti stopu otkazivanja pretplate i zadržati angažiranost vaših pretplatnika.
- Integracija kampanje: Većina modernih pružatelja usluga e-pošte ima mogućnost automatskog dodavanja Nizovi upita UTM kampanje za svaku vezu tako da možete vidjeti e-poštu kao kanal u analitici.
- Centar za preference: Marketing e-poštom previše je važan za pristup e-pošti samo opt-in ili opt-out pristupom. Uključivanje centra za preferencije u kojem vaši pretplatnici mogu promijeniti koliko često primaju e-poštu i koji im je sadržaj važan fantastičan je način da zadržite snažan program e-pošte s angažiranim pretplatnicima!
- Test, Test, Test: Obavezno testirajte svoju e-poštu na više uređaja ili upotrijebite aplikaciju za pregledajte svoju e-poštu u svim klijentima e-pošte kako biste osigurali da izgleda dobro i ispravno funkcionira na različitim veličinama zaslona i operativnim sustavima PRIJE nego pošaljete. Lakmus izvještava da su top 3 najpopularnija mobilna otvorena okruženja i dalje ista: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Također, uključite probne varijacije svojih naslova i sadržaja kako biste poboljšali svoje stope otvaranja i klikanja. Mnoge platforme e-pošte sada uključuju automatizirano testiranje koje će uzorkovati popis, identificirati pobjedničku varijantu i poslati najbolju e-poštu preostalim pretplatnicima.
Ako se vaša tvrtka bori s dizajniranjem, testiranjem i implementacijom mobilnih responzivnih e-poruka koje potiču angažman, nemojte se ustručavati kontaktirati moju tvrtku. DK New Media ima iskustva u implementaciji gotovo svih pružatelja usluga e-pošte (ESP).