16 najboljih primjera iz prakse za HTML e-poštu prilagođenu mobilnim uređajima koji maksimalno povećavaju plasman i angažman u prijemnom sandučetu
U 2023. je vjerovatno da će mobilni nadmašiti desktop kao primarni uređaj za otvaranje e-pošte. U stvari, HubSpot je to otkrio 46 posto svih otvaranja e-pošte sada se dešavaju na mobilnom telefonu. Ako ne dizajnirate e-poštu za mobilne uređaje, ostavljate mnogo angažmana i novca na stolu.
- Autentifikacija e-pošte: Osiguravanje vašeg emailovi su autentificirani na domen za slanje i IP adresa je kritična za dolazak do prijemnog sandučeta, a ne preusmjerena u junk ili spam folder. Također je bitno, naravno, da omogućite način odustajanja od e-pošte koristeći platformu koja uključuje vezu za odjavu.
- Odgovarajući dizajn: The HTML email bi trebao biti dizajnirano da bude odgovorno, što znači da se može prilagoditi veličini ekrana uređaja na kojem se gleda. Ovo osigurava da e-pošta izgleda dobro i na desktopu i na mobilnim uređajima.
- Jasna i koncizna tema: Jasna i koncizna linija predmeta važna je za mobilne korisnike jer mogu vidjeti samo prvih nekoliko riječi linije predmeta u oknu za pregled e-pošte. Trebao bi biti kratak i tačno odražavati sadržaj e-pošte. Optimalna dužina karaktera za temu e-pošte može varirati ovisno o brojnim faktorima, 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 redovi predmeta e-pošte budu kratki i precizni, obično između 41-50 znakova ili 6-8 riječi. Na mobilnim uređajima, redovi predmeta koji su duži od 50 znakova mogu biti odsječeni, a u nekim slučajevima mogu prikazati samo prvih nekoliko riječi linije predmeta. Ovo može otežati primaocu da razumije glavnu poruku e-pošte i može smanjiti vjerovatnoću otvaranja e-pošte.
- Preheader: Predzaglavlje e-pošte je kratak sažetak sadržaja e-pošte koji se pojavljuje pored ili ispod naslova u inboxu klijenta e-pošte. To je važan element koji može utjecati na brzinu otvaranja vaših e-poruka kada se optimizira. Većina klijenata uključuje HTML i CSS kako bi se osiguralo 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>
- Raspored u jednoj koloni: E-poruke koje su dizajnirane s rasporedom u jednoj koloni lakše su čitati na mobilnim uređajima. Sadržaj bi trebao biti organiziran u logičnom slijedu i predstavljen u jednostavnom, lako čitljivom formatu. Ako imate više kolona, korištenje CSS-a može graciozno organizirati kolone u rasporedu jedne kolone.
Evo jednog HTML izgled e-pošte to je 2 kolone na desktopu i sažima se u jednu kolonu na ekranima 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 je 3 kolone na desktopu i sažima se u jednu kolonu na ekranima 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: većina klijenti e-pošte podržavaju svijetli i tamni način rada CSS
prefers-color-scheme
kako bi se prilagodili željama korisnika. Obavezno koristite tipove slika na kojima imate 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 fonta treba odabrati tako da tekst bude lak za čitanje na malom ekranu. Koristite veličinu fonta od najmanje 14 pt i izbjegavajte korištenje fontova koje je teško čitati na malim ekranima. Često korišteni fontovi imaju veliku vjerovatnoću da se dosljedno prikazuju u različitim klijentima e-pošte, tako da su korištenje Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma i Trebuchet MS tipično sigurni fontovi. Ako koristite prilagođeni font, uvjerite se da je rezervni font identificiran u vašem CSS-u:
<!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. Umjereno koristite slike i vodite računa o njihovoj veličini i veličini komprimovan za mobilno gledanje. Obavezno popunite zamjenski tekst za svoje slike u slučaju da ih klijent e-pošte blokira. Sve slike bi trebale biti pohranjene i upućene 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>
- Jasan poziv na akciju (CTA): Jasan i istaknut CTA je važan u svakoj e-poruci, ali je posebno važan u e-poruci prilagođenoj mobilnim uređajima. Uvjerite se da je CTA lako pronaći i da je dovoljno velik da ga se klikne na mobilnom uređaju. Ako ugradite dugmad, možete osigurati da ih imate napisane u CSS-u sa 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 koncizan sadržaj: Neka sadržaj e-pošte bude kratak i precizan. 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 priloge. Koristite podnaslove, oznake i druge tehnike oblikovanja kako biste sadržaj lako skenirali dok se pomičete i čitate na malom ekranu.
- Interaktivni elementi: Ugradnjom interaktivni elementi koji privlače pažnju vašeg pretplatnika povećat će angažman, razumijevanje i stope konverzije vaše e-pošte. Animirani GIF, tajmere za odbrojavanje, video zapise i druge elemente podržava većina klijenata e-pošte za pametne telefone.
- Personalizacija: Personaliziranje pozdrava i sadržaja za određenog pretplatnika može značajno povećati angažman, samo budite sigurni da ste to ispravno shvatili! Npr. Važno je imati rezerve ako nema podataka u polju za ime.
- Dinamički sadržaj: Segmentacija i prilagođavanje sadržaja može smanjiti stopu odjave i zadržati vaše pretplatnike angažiranima.
- Integracija kampanje: Većina modernih provajdera usluga e-pošte ima mogućnost automatskog dodavanja UTM nizovi upita za kampanju za svaki link tako da možete gledati e-poštu kao kanal u analitici.
- Centar za preferencije: Marketing putem e-pošte previše je važan za pristup e-mailovima koji se mogu uključiti ili isključiti. Uključivanje centra za preferencije u kojem vaši pretplatnici mogu promijeniti koliko često primaju e-poruke i koji im je sadržaj važan je fantastičan način da održite jak 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 na svim klijentima e-pošte kako biste bili sigurni da izgleda dobro i ispravno funkcionira na različitim veličinama ekrana i operativnim sistemima PRIJE nego što pošaljete. lakmus izvještava da su prva 3 najpopularnija mobilna otvorena okruženja i dalje ista: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Također, uključite test varijacije vaših tema i sadržaja kako biste poboljšali stopu otvorenosti i klikanja. Mnoge platforme za e-poštu sada uključuju automatizirano testiranje koje će uzorkovati listu, identificirati pobjedničku varijaciju i poslati najbolju e-poštu preostalim pretplatnicima.
Ako se vaša kompanija muči s dizajniranjem, testiranjem i implementacijom mobilnih e-poruka koje podstiču angažman, ne ustručavajte se kontaktirati moju tvrtku. DK New Media ima iskustvo u implementaciji gotovo svakog provajdera email usluga (ESP).