16 Mugikorrentzako erabilgarri dagoen HTML posta elektronikoko praktika onak, Sarrera-ontziaren kokapena eta konpromisoa maximizatzen dutenak
2023an, litekeena da mugikorrak mahaigaina gainditzea posta elektronikoa irekitzeko gailu nagusi gisa. Izan ere, HubSpot-ek hori aurkitu zuen 46 ehuneko irekitako mezu elektroniko guztien artean mugikorrean gertatzen dira. Mugikorrerako mezu elektronikoak diseinatzen ari ez bazara, konpromiso eta diru asko uzten ari zara mahai gainean.
- Posta elektronikoaren autentifikazioa: Zure bermatuz mezu elektronikoak autentifikatu egiten dira bidalketa-domeinura eta IP helbidea funtsezkoa da sarrerako ontzira iristeko eta ez zabor edo spam karpeta batera bideratzeko. Ezinbestekoa da, noski, mezu elektronikoa ez uzteko modua ematea harpidetza kentzeko esteka duen plataforma bat erabiliz.
- Diseinu sentikorra: The HTML posta elektronikoa izan beharko luke sentikorra izateko diseinatua, hau da, ikusten ari den gailuaren pantailaren tamainara egokitu daitekeela esan nahi du. Honek posta elektronikoak mahaigaineko zein gailu mugikorretan itxura ona duela ziurtatzen du.
- Gai-lerro argia eta zehatza: Gai-lerro argia eta zehatza garrantzitsua da mugikorrentzako erabiltzaileentzat, gaiaren lehen hitzak soilik ikus ditzaketelako posta elektronikoaren aurrebista-panelean. Laburra izan behar du eta mezu elektronikoaren edukia zehatz-mehatz islatu behar du. Posta elektronikoaren gai-lerroaren karaktere-luzera optimoa hainbat faktoreren arabera alda daiteke, hala nola posta elektronikoaren edukiaren, audientziaren eta erabiltzen ari den posta-bezeroaren arabera. Hala ere, aditu gehienek gomendatzen dute mezu elektronikoen gai-lerroak labur eta zehatzak izatea, normalean 41-50 karaktere edo 6-8 hitz artean. Gailu mugikorretan, 50 karaktere baino luzeagoak diren gai-lerroak moztu egin daitezke eta, kasu batzuetan, baliteke gaiaren lehen hitzak soilik bistaratzea. Horrek zaildu egin diezaioke hartzaileak mezu elektronikoaren mezu nagusia ulertzea eta mezu elektronikoa irekitzeko aukera murriztu dezake.
- Goiburua: Posta elektronikoaren aurregoiburua posta elektronikoko bezero baten sarrera-ontzian gaiaren ondoan edo azpian agertzen den mezu elektroniko baten edukiaren laburpen laburra da. Optimizatutakoan zure mezu elektronikoen irekitze-tasa eragin dezakeen elementu garrantzitsu bat da. Bezero gehienek HTML eta CSS sartzen dituzte goiburuko testua behar bezala konfiguratuta dagoela ziurtatzeko.
<!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>
- Zutabe bakarreko diseinua: Zutabe bakarreko diseinuarekin diseinatutako mezu elektronikoak erraz irakurtzen dira gailu mugikorretan. Edukiak sekuentzia logiko batean antolatu behar dira eta formatu erraz eta irakurterraz batean aurkeztu. Zutabe anitz badituzu, CSS erabiliz zutabeak zutabe bakarreko diseinuan antola ditzake.
Hemen dago HTML posta elektronikoaren diseinua hau da, 2 zutabe mahaigainean eta zutabe bakarrera tolesten da mugikorreko pantailetan:
<!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>
Hemen dago HTML posta elektronikoaren diseinua hau da, 3 zutabe mahaigainean eta zutabe bakarrera tolesten da mugikorreko pantailetan:
<!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>
- Argia eta iluna modua: zubi posta elektronikoko bezeroek modu argia eta iluna onartzen dute CSS
prefers-color-scheme
erabiltzailearen hobespenetara egokitzeko. Ziurtatu hondo gardena duzun irudi motak erabiltzen dituzula. Hona hemen kode adibide bat.
<!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>
- Letra-tipo handiak eta irakurgarriak: Letra-tamaina eta estiloa aukeratu behar dira testua pantaila txiki batean erraz irakurtzeko. Erabili gutxienez 14 puntuko letra-tamaina eta saihestu pantaila txikietan irakurtzen zailak diren letra-tipoak erabiltzea. Gehien erabiltzen diren letra-tipoek posta elektronikoko bezero desberdinetan modu koherentean errendatzeko probabilitate handia dute, beraz, Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma eta Trebuchet MS erabiltzeak letra-tipo seguruak dira normalean. Letra-tipo pertsonalizatua erabiltzen baduzu, ziurtatu ordezko letra-tipo bat identifikatuta duzula zure CSSan:
<!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>
- Irudien erabilera optimoa: Irudiek karga-denbora moteldu dezakete eta baliteke gailu mugikor guztietan behar bezala ez bistaratzea. Erabili irudiak neurri handi batean, eta ziurtatu tamainakoak direla eta konprimatu mugikorrean ikusteko. Ziurtatu zure irudien alt testua betetzen duzula posta elektronikoko bezeroak blokeatzen baditu. Irudi guztiak webgune seguru batetik gorde eta aipatu behar dira (SSL). Hona hemen HTML mezu elektroniko batean erantzuteko irudien kodearen adibidea.
<!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>
- Garbitu ekintzarako deia (CTA): CTA argi eta nabarmena garrantzitsua da edozein mezu elektronikotan, baina bereziki garrantzitsua da mugikorrentzako egokia den mezu elektroniko batean. Ziurtatu CTA erraza dela aurkitzeko eta gailu mugikor batean klik egiteko nahikoa handia dela. Botoiak sartzen badituzu, ziurtatu dezakezu CSS-n idatzita dituzula lerroko estilo-etiketekin ere:
<!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>
- Eduki laburrak eta zehatzak: Mantendu mezu elektronikoaren edukia laburra eta zehatza. HTML mezu elektroniko baten karaktere-muga alda daiteke erabiltzen ari den posta-bezeroaren arabera. Hala ere, posta elektronikoko bezero gehienek mezu elektronikoen gehienezko tamaina-muga ezartzen dute, normalean 1024-2048 kilobyte artean (KB), HTML kodea eta edozein irudi edo eranskin biltzen dituena. Erabili azpitituluak, buletak eta beste formateatzeko teknika batzuk edukia erraz eskaneatzeko pantaila txiki batean mugitzen eta irakurtzen duzun bitartean.
- Elementu interaktiboak: sartuz elementu interaktiboak zure harpidedunaren arreta bereganatzen duen horrek konpromisoa, ulermena eta bihurketa tasak igoko ditu zure posta elektronikotik. GIF animatuak, atzerako kontaketa tenporizadoreak, bideoak eta beste elementu batzuk telefono bidezko posta elektronikoko bezero gehienek onartzen dituzte.
- Pertsonalizazioa: Harpidedun jakin baten agurra eta edukia pertsonalizatzeak konpromisoa nabarmen eragin dezake, besterik gabe, ziurtatu ondo egiten duzula! Adib. Garrantzitsua da izen-eremu batean daturik ez badago errekurtsoak izatea.
- Eduki dinamikoa: Edukiaren segmentazioak eta pertsonalizazioak harpidetza kentzeko tasak murriztu ditzakete eta harpidedunak arduratuta mantendu.
- Kanpainaren integrazioa: Posta elektronikoko zerbitzu hornitzaile moderno gehienek automatikoki eransteko gaitasuna dute UTM kanpainako kontsulta-kateak esteka bakoitzeko, posta elektronikoa analitiketan kanal gisa ikusi ahal izateko.
- Lehentasun zentroa: Posta elektronikoko marketina garrantzitsuegia da mezu elektronikoen aukeran sartzeko edo desaktibatzeko. Zure harpidedunek mezu elektronikoak zenbat maiztasunez jasotzen dituzten eta haientzat garrantzitsua den edukia alda dezaketen lehentasun-zentro bat sartzea modu bikaina da harpidedun konprometituekin posta elektronikoko programa sendo bat mantentzeko!
- Proba, proba, proba: Ziurtatu posta elektronikoa hainbat gailutan probatzen duzula edo aplikazio bat erabiltzen duzula Aurreikusi zure mezu elektronikoak posta elektronikoko bezeroen artean pantaila-tamaina eta sistema eragile desberdinetan itxura ona duela eta ondo funtzionatzen duela ziurtatzeko, bidali AURRETIK. Litmus jakinarazi du goiko 3 ingurune ireki mugikor ezagunenak berdinak izaten jarraitzen dutela: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Era berean, sartu zure gai-lerroen eta edukiaren proba-aldaerak zure irekiera eta klik-tasa hobetzeko. Posta elektronikoko plataforma askok proba automatizatuak barne hartzen dituzte zerrendaren laginak, aldakuntza irabazlea identifikatu eta gainerako harpidedunei mezu elektronikorik onena bidaltzeko.
Zure enpresa konpromisoa bultzatzen duten mugikorretako mezu elektronikoak diseinatzeko, probatzeko eta ezartzeko zailtasunak baditu, ez izan zalantzarik nire enpresarekin harremanetan jarri. DK New Media ia posta elektronikoko zerbitzu hornitzaile guztien ezarpenean esperientzia du (ESP).