16 osvědčených postupů HTML e-mailu pro mobily, které maximalizují umístění a zapojení doručené pošty
V roce 2023 je pravděpodobné, že mobilní zařízení jako primární zařízení pro otevírání e-mailů překoná desktop. Ve skutečnosti to HubSpot zjistil 46 procent všech otevření e-mailů nyní probíhá na mobilu. Pokud nenavrhujete e-maily pro mobily, necháváte na stole spoustu angažovanosti a peněz.
- Ověření e-mailu: Zajištění vašeho e-maily jsou ověřeny do odesílající domény a IP adresa je zásadní pro to, abyste se dostali do doručené pošty a nebyla směrována do složky nevyžádané pošty nebo spamu. Je také samozřejmě nezbytné, abyste poskytli způsob, jak se odhlásit z e-mailu pomocí platformy, která obsahuje odkaz pro odhlášení.
- Citlivý design: Projekt HTML email by měl být navrženy tak, aby byly responzivní, což znamená, že se může přizpůsobit velikosti obrazovky zařízení, na kterém je prohlíženo. To zajišťuje, že e-mail vypadá dobře na stolních i mobilních zařízeních.
- Jasný a výstižný předmět: Jasný a stručný předmět předmětu je důležitý pro mobilní uživatele, protože v podokně náhledu e-mailu mohou vidět pouze prvních několik slov předmětu. Měl by být stručný a přesně odrážet obsah e-mailu. Optimální délka znaků řádku předmětu e-mailu se může lišit v závislosti na řadě faktorů, jako je obsah e-mailu, publikum a používaný e-mailový klient. Většina odborníků však doporučuje udržovat řádky předmětu e-mailu krátké a věcné, obvykle mezi 41–50 znaky nebo 6–8 slovy. Na mobilních zařízeních mohou být řádky předmětu delší než 50 znaků oříznuty a v některých případech se může zobrazit pouze prvních několik slov předmětu. To může příjemci ztížit porozumění hlavnímu sdělení e-mailu a může snížit pravděpodobnost otevření e-mailu.
- Preheader: Předzáhlaví e-mailu je krátké shrnutí obsahu e-mailu, které se zobrazuje vedle nebo pod předmětem ve schránce e-mailového klienta. Je to důležitý prvek, který může při optimalizaci ovlivnit míru otevření vašich e-mailů. Většina klientů využívá HTML a CSS, aby zajistila správné nastavení 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žení s jedním sloupcem: E-maily, které jsou navrženy s jednosloupcovým rozložením, jsou snadněji čitelné na mobilních zařízeních. Obsah by měl být organizován v logickém sledu a prezentován v jednoduchém a snadno čitelném formátu. Pokud máte více sloupců, můžete pomocí CSS elegantně uspořádat sloupce v rozložení s jedním sloupcem.
Zde je HTML rozložení e-mailu to jsou 2 sloupce na počítači a sbalí se do jednoho sloupce 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>
Zde je HTML rozložení e-mailu to jsou 3 sloupce na počítači a sbalí se do jednoho sloupce 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>
- Světlý a tmavý režim: Většina e-mailoví klienti podporují světlý a tmavý režim CSS
prefers-color-scheme
přizpůsobit preferencím uživatele. Ujistěte se, že používáte typy obrázků, kde máte průhledné pozadí. Zde je pří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>
- Velké, čitelné písmo: Velikost a styl písma by měly být zvoleny tak, aby byl text dobře čitelný na malé obrazovce. Používejte písmo o velikosti alespoň 14 bodů a vyhněte se používání písem, která jsou obtížně čitelná na malých obrazovkách. Běžně používaná písma mají vysokou pravděpodobnost konzistentního vykreslování napříč různými e-mailovými klienty, takže používání písem Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma a Trebuchet MS jsou obvykle bezpečná písma. Pokud používáte vlastní písmo, ujistěte se, že máte ve svém CSS identifikováno záložní 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ální využití obrázků: Obrázky mohou zpomalit načítání a nemusí se správně zobrazovat na všech mobilních zařízeních. Používejte obrázky střídmě a ujistěte se, že mají velikost a stlačený pro mobilní prohlížení. Nezapomeňte vyplnit alternativní text obrázků pro případ, že je e-mailový klient zablokuje. Všechny obrázky by měly být uloženy a odkazováno na zabezpečenou webovou stránku (SSL). Zde je příklad kódu responzivních obrázků v e-mailu 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 k akci (CTA): Jasná a nápadná výzva k akci je důležitá v každém e-mailu, ale obzvláště důležitá je v e-mailu vhodném pro mobily. Ujistěte se, že CTA lze snadno najít a že je dostatečně velká, aby na ni bylo možné kliknout na mobilním zařízení. Pokud začleníte tlačítka, můžete zajistit, že je budete mít napsaná v CSS s vloženými značkami stylu:
<!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átký a výstižný obsah: Udržujte obsah e-mailu krátký a výstižný. Omezení počtu znaků pro e-mail HTML se může lišit v závislosti na používaném e-mailovém klientovi. Většina e-mailových klientů však stanoví maximální limit velikosti pro e-maily, obvykle mezi 1024–2048 kilobajty (KB), který zahrnuje jak kód HTML, tak veškeré obrázky nebo přílohy. Použijte podnadpisy, odrážky a další techniky formátování, aby bylo možné obsah snadno skenovat při posouvání a čtení na malé obrazovce.
- Interaktivní prvky: začlenění interaktivní prvky které upoutají pozornost vašeho odběratele, zvýší zapojení, porozumění a míru konverze z vašeho e-mailu. Animované GIFy, odpočítávací časovače, videa a další prvky jsou podporovány většinou e-mailových klientů pro chytré telefony.
- Přizpůsobení: Přizpůsobení oslovení a obsahu pro konkrétního předplatitele může výrazně zvýšit zapojení, jen se ujistěte, že to děláte správně! Např. Je důležité mít záložní řešení, pokud v poli křestního jména nejsou žádná data.
- Dynamický obsah: Segmentace a přizpůsobení obsahu může snížit vaše sazby za odhlášení a udržet vaše odběratele v kontaktu.
- Integrace kampaně: Většina moderních poskytovatelů e-mailových služeb má schopnost automaticky přidávat Řetězce dotazů kampaně UTM pro každý odkaz, abyste mohli zobrazit e-mail jako kanál v analýze.
- Centrum preferencí: E-mailový marketing je příliš důležitý na to, aby se k e-mailům jen přihlásil nebo odhlásil. Začlenění preferenčního centra, kde mohou vaši odběratelé měnit, jak často dostávají e-maily a jaký obsah je pro ně důležitý, je fantastický způsob, jak udržet silný e-mailový program se zapojenými odběrateli!
- Testovat, testovat, testovat: Nezapomeňte svůj e-mail otestovat na více zařízeních nebo k tomu použijte aplikaci náhled vašich e-mailů napříč e-mailovými klienty PŘED odesláním zajistíte, že bude vypadat dobře a bude správně fungovat na různých velikostech obrazovky a operačních systémech. Lakmus uvádí, že 3 nejoblíbenější mobilní otevřená prostředí jsou stále stejná: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Zahrňte také testovací varianty svých předmětů a obsahu, abyste zlepšili svou míru otevřenosti a prokliku. Mnoho e-mailových platforem nyní zahrnuje automatizované testování, které provede vzorek seznamu, identifikuje vítěznou variantu a zašle nejlepší e-mail zbývajícím odběratelům.
Pokud se vaše společnost potýká s návrhem, testováním a implementací e-mailů citlivých na mobily, které zvyšují zapojení, neváhejte a kontaktujte mou firmu. DK New Media má zkušenosti s implementací prakticky každého poskytovatele e-mailových služeb (ESP).