16 osvedčených postupov HTML e-mailu pre mobilné zariadenia, ktoré maximalizujú umiestnenie doručenej pošty a zapojenie
V roku 2023 je pravdepodobné, že mobil prekoná desktop ako primárne zariadenie na otváranie e-mailov. V skutočnosti to HubSpot zistil 46 percent všetkých otvorení e-mailov teraz prebieha na mobilnom zariadení. Ak nenavrhujete e-maily pre mobil, nechávate na stole veľa angažovanosti a peňazí.
- E-mailová autentifikácia: Zabezpečenie e-maily sú overené do odosielajúcej domény a IP adresa je rozhodujúca na to, aby ste sa dostali do doručenej pošty a nie je smerovaná do priečinka nevyžiadanej pošty alebo spamu. Je tiež nevyhnutné, aby ste poskytli spôsob odhlásenia sa z e-mailu pomocou platformy, ktorá obsahuje odkaz na zrušenie odberu.
- Responzívny dizajn: HTML email by mal byť navrhnuté tak, aby boli responzívne, čo znamená, že sa dokáže prispôsobiť veľkosti obrazovky zariadenia, na ktorom sa zobrazuje. To zaisťuje, že e-mail vyzerá dobre na stolných aj mobilných zariadeniach.
- Jasný a stručný predmet: Jasný a stručný predmet je dôležitý pre používateľov mobilných zariadení, pretože na paneli s ukážkou e-mailu môžu vidieť iba prvých pár slov predmetu. Mal by byť stručný a presne odrážať obsah e-mailu. Optimálna dĺžka znakov v riadku predmetu e-mailu sa môže líšiť v závislosti od množstva faktorov, ako je obsah e-mailu, publikum a používaný e-mailový klient. Väčšina odborníkov však odporúča, aby predmet e-mailu bol krátky a výstižný, zvyčajne medzi 41 – 50 znakmi alebo 6 – 8 slovami. Na mobilných zariadeniach môžu byť riadky s predmetom, ktoré sú dlhšie ako 50 znakov orezané a v niektorých prípadoch sa môže zobraziť iba niekoľko prvých slov predmetu. To môže príjemcovi sťažiť pochopenie hlavnej správy e-mailu a môže znížiť pravdepodobnosť otvorenia e-mailu.
- Preheader: Predhlavička e-mailu je krátky súhrn obsahu e-mailu, ktorý sa zobrazuje vedľa alebo pod riadkom predmetu v doručenej pošte e-mailového klienta. Je to dôležitý prvok, ktorý môže pri optimalizácii ovplyvniť mieru otvorenia vašich e-mailov. Väčšina klientov používa HTML a CSS, aby sa zabezpečilo správne nastavenie textu preheader.
<!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>
- Rozloženie s jedným stĺpcom: E-maily, ktoré sú navrhnuté s rozložením v jednom stĺpci, sa ľahšie čítajú na mobilných zariadeniach. Obsah by mal byť usporiadaný v logickom slede a prezentovaný v jednoduchom a ľahko čitateľnom formáte. Ak máte viacero stĺpcov, pomocou CSS môžete elegantne usporiadať stĺpce v rozložení s jedným stĺpcom.
Tu je HTML rozloženie emailu to sú 2 stĺpce na počítačoch a zbalí sa do jedného stĺpca na mobilných obrazovkách:
<!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>
Tu je HTML rozloženie emailu to sú 3 stĺpce na počítačoch a zbalí sa do jedného stĺpca na mobilných obrazovkách:
<!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>
- Svetlý a tmavý režim: most e-mailoví klienti podporujú svetlý a tmavý režim CSS
prefers-color-scheme
vyhovieť preferenciám používateľa. Uistite sa, že používate typy obrázkov, kde máte priehľadné pozadie. Tu je príklad kódu.
<!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>
- Veľké, čitateľné písmo: Veľkosť a štýl písma by mali byť zvolené tak, aby bol text ľahko čitateľný na malej obrazovke. Používajte písmo s veľkosťou aspoň 14 bodov a nepoužívajte písma, ktoré sa ťažko čítajú na malých obrazovkách. Bežne používané písma majú vysokú pravdepodobnosť konzistentného vykresľovania v rôznych e-mailových klientoch, takže používanie písma Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma a Trebuchet MS sú zvyčajne bezpečné písma. Ak používate vlastné písmo, uistite sa, že máte vo svojom CSS identifikované náhradné písmo:
<!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álne využitie obrázkov: Obrázky môžu spomaliť načítanie a nemusia sa správne zobrazovať na všetkých mobilných zariadeniach. Obrázky používajte s mierou a uistite sa, že majú veľkosť a stlačený pre mobilné prezeranie. Nezabudnite vyplniť alternatívny text pre obrázky v prípade, že ich e-mailový klient zablokuje. Všetky obrázky by mali byť uložené a odkazované zo zabezpečenej webovej stránky (SSL). Tu je príklad kódu responzívnych obrázkov v e-maile HTML.
<!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>
- Jasná výzva na akciu (CTA): Jasná a výrazná výzva na akciu je dôležitá v každom e-maile, ale je obzvlášť dôležitá v e-maile vhodnom pre mobilné zariadenia. Uistite sa, že CTA sa dá ľahko nájsť a že je dostatočne veľká na to, aby sa na ňu dalo kliknúť na mobilnom zariadení. Ak začleníte tlačidlá, môžete sa uistiť, že ich máte napísané v CSS aj s vloženými značkami štýlu:
<!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>
- Krátky a výstižný obsah: Udržujte obsah e-mailu krátky a výstižný. Limit počtu znakov pre HTML e-mail sa môže líšiť v závislosti od používaného e-mailového klienta. Väčšina e-mailových klientov však stanovuje maximálny limit veľkosti pre e-maily, zvyčajne medzi 1024-2048 kB (KB), ktorý zahŕňa kód HTML aj všetky obrázky alebo prílohy. Použite podnadpisy, odrážky a ďalšie techniky formátovania, aby sa obsah dal ľahko skenovať pri posúvaní a čítaní na malej obrazovke.
- Interaktívne prvky: začlenenie interaktívne prvky ktoré upútajú pozornosť vášho odberateľa, zvýšia mieru zapojenia, pochopenia a miery konverzie z vášho e-mailu. Animované GIFy, odpočítavacie časovače, videá a ďalšie prvky podporuje väčšina e-mailových klientov smartfónov.
- Personalizácia: Prispôsobenie pozdravu a obsahu pre konkrétneho predplatiteľa môže výrazne zvýšiť zapojenie, len sa uistite, že to robíte správne! Napr. Je dôležité mať záložné možnosti, ak v poli krstného mena nie sú žiadne údaje.
- Dynamický obsah: Segmentácia a prispôsobenie obsahu môže znížiť vaše sadzby za zrušenie odberu a udržať vašich odberateľov zapojených.
- Integrácia kampane: Väčšina moderných poskytovateľov e-mailových služieb má možnosť automatického pripájania Reťazce dopytov kampane UTM pre každý odkaz, aby ste mohli zobraziť e-mail ako kanál v službe Analytics.
- Centrum preferencií: E-mailový marketing je príliš dôležitý na to, aby bol prístup k e-mailom len opt-in alebo opt-out. Začlenenie preferenčného centra, kde môžu vaši odberatelia zmeniť, ako často dostávajú e-maily a aký obsah je pre nich dôležitý, je fantastický spôsob, ako udržať silný e-mailový program so zaujatými odberateľmi!
- Testovať, testovať, testovať: Nezabudnite otestovať svoj e-mail na viacerých zariadeniach alebo na to použite aplikáciu ukážte svoje e-maily v e-mailových klientoch aby ste pred odoslaním zaistili, že bude vyzerať dobre a bude správne fungovať na rôznych veľkostiach obrazoviek a operačných systémoch. Lakmus uvádza, že 3 najobľúbenejšie mobilné otvorené prostredia sú stále rovnaké: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Zahrňte aj testovacie variácie svojich predmetov a obsahu, aby ste zlepšili svoju mieru otvorenia a prekliknutia. Mnoho e-mailových platforiem teraz obsahuje automatické testovanie, ktoré odoberie vzorku zo zoznamu, identifikuje víťaznú variáciu a pošle najlepší e-mail zostávajúcim predplatiteľom.
Ak má vaša spoločnosť problémy s návrhom, testovaním a implementáciou mobilných e-mailov, ktoré podporujú interakciu, neváhajte kontaktovať moju firmu. DK New Media má skúsenosti s implementáciou prakticky každého poskytovateľa e-mailových služieb (ESP).