16 mobilbarát HTML e-mail bevált gyakorlat, amely maximalizálja a beérkező levelek elhelyezését és elköteleződését
2023-ban valószínű, hogy a mobil meg fogja haladni az asztali számítógépet, mint az e-mailek megnyitásának elsődleges eszköze. Valójában a HubSpot ezt találta 46 százalék az összes e-mail megnyitása most már mobilon történik. Ha nem mobilra tervez e-maileket, akkor sok elköteleződést és pénzt hagy az asztalon.
- E-mail hitelesítés: Biztosítja a saját az e-mailek hitelesítve vannak a küldő tartományba és IP A cím kulcsfontosságú a beérkezett üzenetek mappához való eljutáshoz, és nem a levélszemét vagy spam mappába kerül. Természetesen az is elengedhetetlen, hogy lehetőséget adjon az e-mailek leiratkozására egy leiratkozási linket tartalmazó platformon.
- Reszponzív dizájn: A HTML email legyen reszponzívra tervezték, ami azt jelenti, hogy képes igazodni annak az eszköznek a képernyőméretéhez, amelyen éppen nézik. Ez biztosítja, hogy az e-mail jól nézzen ki asztali és mobileszközökön egyaránt.
- Világos és tömör tárgysor: A világos és tömör tárgysor fontos a mobilfelhasználók számára, mert előfordulhat, hogy csak a tárgysor első néhány szavát látják az e-mail előnézeti panelen. Ennek rövidnek kell lennie, és pontosan tükröznie kell az e-mail tartalmát. Az e-mail tárgysorának optimális karakterhossza számos tényezőtől, például az e-mail tartalomtól, a közönségtől és a használt e-mail klienstől függően változhat. A legtöbb szakértő azonban azt javasolja, hogy az e-mail tárgysora legyen rövid és lényegre törő, általában 41-50 karakter vagy 6-8 szó között. Mobileszközökön az 50 karakternél hosszabb tárgysorok levághatók, és bizonyos esetekben csak a tárgysor első néhány szava jelenhet meg. Ez megnehezítheti a címzett számára az e-mail fő üzenetének megértését, és csökkentheti az e-mail megnyitásának valószínűségét.
- Előfejléc: Az e-mail előfejléc az e-mail tartalmának rövid összefoglalása, amely a levelezőprogram beérkezett üzenetei között a tárgysor mellett vagy alatt jelenik meg. Ez egy fontos elem, amely optimalizálva befolyásolhatja az e-mailek megnyitási arányát. A legtöbb ügyfél HTML-t és CSS-t alkalmaz, hogy biztosítsa az előfejléc szövegének megfelelő beállítását.
<!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>
- Egyoszlopos elrendezés: Az egyoszlopos elrendezésű e-mailek könnyebben olvashatók mobileszközökön. A tartalmat logikus sorrendbe kell rendezni, és egyszerű, könnyen olvasható formátumban kell megjeleníteni. Ha több oszlopa van, a CSS használatával kecsesen rendezheti az oszlopokat egy oszlopos elrendezésben.
Itt van egy HTML e-mail elrendezés azaz asztali számítógépen 2 oszlop, mobilképernyőkön pedig egyetlen oszlopba csukódik össze:
<!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>
Itt van egy HTML e-mail elrendezés azaz asztali számítógépen 3 oszlop, mobilképernyőkön pedig egyetlen oszlopba csukódik össze:
<!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>
- Világos és sötét mód: híd az e-mail kliensek támogatják a világos és sötét módot CSS
prefers-color-scheme
hogy alkalmazkodjon a felhasználó preferenciáihoz. Ügyeljen arra, hogy olyan képtípusokat használjon, ahol átlátszó háttér van. Itt van egy kódpélda.
<!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>
- Nagy, jól olvasható betűtípusok: A betűméretet és -stílust úgy kell megválasztani, hogy a szöveg könnyen olvasható legyen kis képernyőn. Használjon legalább 14 pont betűméretet, és kerülje a kis képernyőkön nehezen olvasható betűtípusok használatát. A gyakran használt betűtípusok nagy valószínűséggel következetesen jelennek meg a különböző e-mail kliensekben, ezért az Arial, a Helvetica, a Times New Roman, a Georgia, a Verdana, a Tahoma és a Trebuchet MS használata általában biztonságos betűtípusok. Ha egyéni betűtípust használ, ügyeljen arra, hogy a CSS-ben szerepeljen egy tartalék betűtípus:
<!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>
- A képek optimális felhasználása: A képek lelassíthatják a betöltési időt, és előfordulhat, hogy nem jelennek meg megfelelően minden mobileszközön. Használja a képeket takarékosan, és ügyeljen a méretükre és a tömörített mobil megtekintéshez. Feltétlenül töltse ki a képek alternatív szövegét arra az esetre, ha az e-mail kliens blokkolja őket. Minden képet tárolni kell, és biztonságos webhelyről kell hivatkozni (SSL). Íme egy példakód reszponzív képekre egy HTML e-mailben.
<!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>
- Egyértelmű cselekvésre ösztönzés (CTA): A világos és jól látható CTA minden e-mailben fontos, de különösen fontos a mobilbarát e-maileknél. Győződjön meg arról, hogy a CTA könnyen megtalálható, és elég nagy ahhoz, hogy mobileszközön rákattintson. Ha gombokat is beépít, gondoskodhat arról, hogy azokat CSS-ben is megírja beágyazott stíluscímkékkel:
<!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>
- Rövid és tömör tartalom: Az e-mail tartalma legyen rövid és lényegre törő. A HTML e-mailek karakterkorlátja a használt e-mail klienstől függően változhat. A legtöbb e-mail kliens azonban maximális méretkorlátot ír elő az e-mailek számára, jellemzően 1024-2048 kilobájt (KB), amely tartalmazza mind a HTML-kódot, mind a képeket vagy mellékleteket. Használjon alcímeket, felsorolásjeleket és egyéb formázási technikákat, hogy a tartalom könnyen beolvasható legyen görgetés és olvasás közben egy kis képernyőn.
- Interaktív elemek: beépítése interaktív elemek amelyek felkeltik az előfizető figyelmét, növelik az elköteleződést, a megértést és a konverziós arányt az e-mailekből. Animált GIF-ek, a visszaszámláló időzítőket, videókat és egyéb elemeket az okostelefonos e-mail kliensek többsége támogatja.
- Testreszabás: A köszöntés és a tartalom személyre szabása egy adott előfizető számára jelentősen növelheti az elköteleződést, csak győződjön meg róla, hogy jól tette! Például. Fontos, hogy legyenek tartalékok, ha a keresztnév mezőben nincs adat.
- Dinamikus tartalom: A tartalom szegmentálása és testreszabása csökkentheti a leiratkozási arányokat, és fenntarthatja az előfizetők érdeklődését.
- Kampány integráció: A legtöbb modern e-mail szolgáltató képes automatikusan hozzáfűzni UTM kampány lekérdezési karakterláncai minden linknél, hogy az e-maileket csatornaként tekinthesse meg az elemzésben.
- Preferencia központ: Az e-mailes marketing túlságosan fontos ahhoz, hogy az e-mailek elfogadását vagy leiratkozását alkalmazzuk. Egy olyan preferenciaközpont beépítése, ahol előfizetői megváltoztathatják, hogy milyen gyakran kapjanak e-maileket, és milyen tartalmak fontosak számukra, fantasztikus módja annak, hogy erős levelezőprogramot tartsunk fenn elkötelezett előfizetőkkel!
- Teszt, teszt, teszt: Mindenképpen tesztelje e-mailjeit több eszközön, vagy használjon egy alkalmazást megtekintheti e-mailjeit az e-mail klienseken keresztül hogy jól nézzen ki és megfelelően működjön különböző képernyőméreteken és operációs rendszereken, MIELŐTT elküldi. Lakmusz jelentése szerint a 3 legnépszerűbb mobil nyílt környezet továbbra is ugyanaz: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Emellett a tárgysorok és a tartalom tesztváltozatait is beépítheti a megnyitási és átkattintási arányok javítása érdekében. Számos e-mail platform ma már beépített automatizált teszteléssel, amely mintát vesz a listából, azonosítja a nyertes változatot, és a legjobb e-mailt küldi el a fennmaradó feliratkozóknak.
Ha cége nehézségekkel küzd az elköteleződést ösztönző, mobilra reagáló e-mailek tervezésével, tesztelésével és megvalósításával, ne habozzon kapcsolatba lépni cégemkel. DK New Media gyakorlatilag minden e-mail szolgáltató megvalósításában van tapasztalata (ESP).