16 L-Aħjar Prattiki tal-Email HTML favur il-Mowbajl Li Jimmassimizzaw it-Tqegħid u l-Ingaġġ tal-Inbox
Fl-2023, huwa probabbli li l-mowbajl se jaqbeż id-desktop bħala l-apparat primarju għall-ftuħ tal-email. Fil-fatt, HubSpot sab dan Mija 46 tal-email kollha tiftaħ issa jseħħu fuq il-mowbajl. Jekk m'intix qed tfassal emails għall-mowbajl, qed tħalli ħafna impenn u flus fuq il-mejda.
- Awtentikazzjoni tal-Email: Tiżgura tiegħek emails huma awtentikati għad-dominju li jibgħat u IP l-indirizz huwa kritiku biex wieħed jasal għall-inbox u mhux jintbagħat lejn folder junk jew spam. Huwa wkoll essenzjali, ovvjament, li tipprovdi mezz biex tagħżel li ma tużax l-email billi tuża pjattaforma li tinkorpora link ta' unsubscribe.
- Disinn li Jirrispondi: il HTML email għandu jkun iddisinjati biex ikunu reattivi, li jfisser li tista 'taġġusta għad-daqs tal-iskrin tal-apparat li fuqu tkun qed tara. Dan jiżgura li l-email tidher tajba kemm fuq id-desktop kif ukoll fuq it-tagħmir mobbli.
- Linja tas-suġġett ċara u konċiża: Linja tas-suġġett ċara u konċiża hija importanti għall-utenti tal-mowbajl għaliex jistgħu jaraw biss l-ewwel ftit kliem tal-linja tas-suġġett fil-panew tal-preview tal-email tagħhom. Għandu jkun qasir u jirrifletti b'mod preċiż il-kontenut tal-email. It-tul tal-karattri ottimali ta 'linja tas-suġġett tal-email jista' jvarja skont numru ta 'fatturi, bħall-kontenut tal-email, l-udjenza, u l-klijent tal-email li qed jintuża. Madankollu, il-biċċa l-kbira tal-esperti jirrakkomandaw li jżommu l-linji tas-suġġett tal-email qosra u sal-punt, tipikament bejn 41-50 karattru jew 6-8 kelma. Fuq apparat mobbli, linji tas-suġġett li huma itwal minn 50 karattru jistgħu jinqatgħu, u f'xi każijiet, jistgħu juru biss l-ewwel ftit kliem tal-linja tas-suġġett. Dan jista’ jagħmilha diffiċli għar-riċevitur biex jifhem il-messaġġ ewlieni tal-email u jista’ jnaqqas il-probabbiltà li l-email tinfetaħ.
- Preheader: Preheader tal-email huwa sommarju qasir tal-kontenut ta' email li jidher ħdejn jew taħt il-linja tas-suġġett fl-inbox ta' klijent tal-email. Huwa element importanti li jista 'jkollok impatt fuq ir-rata miftuħa tal-emails tiegħek meta ottimizzati. Il-biċċa l-kbira tal-klijenti jinkorporaw HTML u CSS biex jiżguraw li t-test tal-preheader ikun stabbilit sew.
<!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>
- Tqassim ta' kolonna waħda: L-emails li huma ddisinjati b'tqassim ta' kolonna waħda huma aktar faċli biex jinqraw fuq apparat mobbli. Il-kontenut għandu jkun organizzat f'sekwenza loġika u ppreżentat f'format sempliċi u faċli biex jinqara. Jekk għandek kolonni multipli, l-użu tas-CSS jista 'jorganizza b'mod grazzjuż il-kolonni f'tqassim ta' kolonna waħda.
Hawn It-tqassim tal-email HTML jiġifieri 2 kolonni fuq id-desktop u kollass għal kolonna waħda fuq skrins mobbli:
<!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>
Hawn It-tqassim tal-email HTML jiġifieri 3 kolonni fuq id-desktop u kollass għal kolonna waħda fuq skrins mobbli:
<!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>
- Modalità Dawl u Dlam: pont Il-klijenti tal-email jappoġġjaw il-modalità tad-dawl u d-dlam CSS
prefers-color-scheme
biex takkomoda l-preferenzi tal-utent. Kun żgur li tutilizza tipi ta 'immaġni fejn għandek sfond trasparenti. Hawn eżempju ta 'kodiċi.
<!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>
- Fonts kbar u li jinqraw: Id-daqs tat-tipa u l-istil għandhom jintgħażlu biex it-test ikun faċli biex jinqara fuq skrin żgħir. Uża mill-inqas daqs ta' font ta' 14pt u evita li tuża fonts li huma diffiċli biex jinqraw fuq skrins żgħar. Il-fonts użati b'mod komuni għandhom probabbiltà għolja li jintwerew b'mod konsistenti fuq klijenti tal-email differenti, għalhekk l-użu ta' Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma u Trebuchet MS huma tipikament fonts sikuri. Jekk tuża font personalizzata, kun żgur li jkollok font ta' riżerva identifikata fis-CSS tiegħek:
<!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>
- Użu ottimali tal-immaġini: L-immaġini jistgħu jnaqqsu l-ħinijiet tat-tagħbija u jistgħu ma jintwerewx sew fuq it-tagħmir mobbli kollu. Uża immaġini kemxejn, u kun żgur li huma ta 'daqs u ikkompressat għall-wiri mobbli. Kun żgur li timla t-test alternattiv għall-immaġini tiegħek fil-każ li l-klijent tal-email jimblokkahom. L-immaġini kollha għandhom jiġu maħżuna u msemmija minn websajt sigura (SSL). Hawn kodiċi eżempju ta 'immaġini li jirrispondu f'email 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>
- Sejħa ċara għall-azzjoni (CTA): CTA ċara u prominenti hija importanti fi kwalunkwe email, iżda hija speċjalment importanti f'email faċli għall-mowbajl. Kun żgur li s-CTA hija faċli biex issibha u li hija kbira biżżejjed biex tiġi kklikkjata fuq apparat mobbli. Jekk tinkorpora buttuni, tista' tiżgura li jkollokhom miktuba f'CSS b'tikketti ta' stil inline wkoll:
<!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>
- Kontenut qasir u konċiż: Żomm il-kontenut tal-email qasir u fil-punt. Il-limitu ta' karattri għal email HTML jista' jvarja skont il-klijent tal-email li qed jintuża. Madankollu, ħafna mill-klijenti tal-email jimponu limitu massimu ta' daqs għall-emails, tipikament bejn 1024-2048 kilobytes (KB), li tinkludi kemm il-kodiċi HTML kif ukoll kwalunkwe immaġini jew annessi. Uża sottotitli, punti tal-balal, u tekniki oħra ta' formattjar biex il-kontenut ikun jista' jiġi skannjat faċilment waqt li tiskrollja u taqra fuq skrin żgħir.
- Elementi interattivi: Jinkorporaw elementi interattivi li jaqbdu l-attenzjoni tal-abbonat tiegħek se jgħollu r-rati tal-impenn, il-komprensjoni u l-konverżjoni mill-email tiegħek. GIFs Animati, tajmers tal-countdown, vidjows, u elementi oħra huma appoġġjati mill-maġġoranza tal-klijenti tal-email tal-ismartphone.
- Personalizzazzjoni: Il-personalizzazzjoni tat-tislima u l-kontenut għal abbonat speċifiku tista 'tmexxi l-impenn b'mod sinifikanti, kun żgur li ġġibu tajjeb! Eż. Li jkollok fallbacks jekk ma jkun hemm l-ebda data fil-qasam tal-ewwel isem huwa importanti.
- Kontenut Dinamika: Is-segmentazzjoni u l-adattament tal-kontenut jistgħu jnaqqsu r-rati ta' tneħħija tal-abbonament tiegħek u jżommu l-abbonati tiegħek involuti.
- Integrazzjoni tal-Kampanja: Il-biċċa l-kbira tal-fornituri moderni tas-servizz tal-email għandhom il-kapaċità li jwaħħlu awtomatikament Strings ta' mistoqsijiet tal-kampanja UTM għal kull link sabiex tkun tista' tara l-email bħala kanal fl-analitika.
- Ċentru ta' Preferenza: Il-marketing bl-email huwa importanti wisq għal approċċ ta' opt-in jew opt-out għall-emails. L-inkorporazzjoni ta 'ċentru ta' preferenza fejn l-abbonati tiegħek jistgħu jbiddlu kemm-il darba jirċievu emails u liema kontenut huwa importanti għalihom huwa mod meraviljuż biex iżommu programm ta 'email b'saħħtu ma' abbonati impenjati!
- Test, Test, Test: Kun żgur li tittestja l-email tiegħek fuq apparati multipli jew uża applikazzjoni għal tipprevedi l-emails tiegħek fuq il-klijenti tal-email biex tiżgura li tidher tajba u taħdem sew fuq daqsijiet differenti ta' skrin u sistemi operattivi QABEL ma tibgħat. Litmus jirrapporta li l-aqwa 3 ambjenti mobbli miftuħa l-aktar popolari jibqgħu l-istess: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ukoll, inkorpora varjazzjonijiet tat-test tal-linji tas-suġġett u l-kontenut tiegħek biex ittejjeb ir-rati miftuħa u tal-ikklikkjar tiegħek. Ħafna pjattaformi tal-email issa jinkorporaw ittestjar awtomatizzat li se jieħu kampjun tal-lista, jidentifika varjazzjoni rebbieħa, u jibgħat l-aħjar email lill-abbonati li fadal.
Jekk il-kumpanija tiegħek qed tissara biex tfassal, tittestja u timplimenta emails li jirrispondu għall-mowbajl li qed imexxu l-impenn, toqgħodx lura milli tikkuntattja d-ditta tiegħi. DK New Media għandu esperjenza fl-implimentazzjoni ta' kważi kull fornitur tas-servizz tal-email (ESP).