Mekhoa e 16 e Molemo ka ho Fetisisa ea Imeile ea Imeile e eketsang ho beoa ha Inbox le ho Kopanela
Ka 2023, ho ka etsahala hore ebe mobile e tla feta komporo joalo ka sesebelisoa sa mantlha sa ho bula lengolo-tsoibila. Ebile, HubSpot e fumane seo liphesente tse 46 ea mangolo-tsoibila ohle a buloang hona joale a hlaha ho mobile. Haeba u sa rale li-imeile tsa mobile, u tlohela boitlamo le chelete e ngata tafoleng.
- Netefatso ea Imeile: Ho etsa bonnete ba hau li-imeile li netefalitsoe sebakeng sa ho romella le IP aterese e bohlokoa hore u fihle ho inbox, 'me u se ke ua fetisetsoa sebakeng se se nang thuso kapa foldareng ea spam. Ho bohlokoa hape, ehlile, hore o fane ka mokhoa oa ho tsoa ho lengolo-tsoibila o sebelisa sethala se kenyelletsang sehokelo sa ho ingolisa.
- Moralo o Arabela: The HTML imeile e lokela ho ba e etselitsoeng ho arabela, ho bolelang hore e khona ho ikamahanya le boholo ba skrine sa sesebelisoa seo e shebiloeng ho sona. Sena se tiisa hore lengolo-tsoibila le shebahala hantle ho lisebelisoa tsa desktop le tsa mehala.
- Taba e hlakileng le e khuts'oane: Mola oa sehlooho o hlakileng le o hlakileng o bohlokoa bakeng sa basebelisi ba mehala hobane ba ka bona mantsoe a seng makae feela a sehlooho sebakeng sa bona sa tlhahlobo ea lengolo-tsoibila. E lokela ho ba e khuts'oane le e nepahetseng e bonts'a litaba tsa lengolo-tsoibila. Bolelele bo nepahetseng ba mohala oa sehlooho sa lengolo-tsoibila bo ka fapana ho latela lintlha tse 'maloa, joalo ka litaba tsa lengolo-tsoibila, bamameli, le moreki oa lengolo-tsoibila le sebelisoang. Leha ho le joalo, litsebi tse ngata li khothaletsa ho boloka melaetsa ea litaba tsa lengolo-tsoibila e le khutšoane ho isa ntlheng, hangata lipakeng tsa litlhaku tse 41-50 kapa mantsoe a 6-8. Ho lisebelisoa tsa mohala, mela ea sehlooho e fetang litlhaku tse 50 e ka khaoloa, 'me maemong a mang, e ka hlahisa mantsoe a seng makae a pele a sehlooho. Sena se ka etsa hore ho be thata ho moamoheli ho utloisisa molaetsa oa mantlha oa lengolo-tsoibila mme se ka fokotsa monyetla oa hore lengolo-tsoibila le buloe.
- Hlooho: Sehlooho sa lengolo-tsoibila ke kakaretso e khuts'oane ea litaba tsa lengolo-tsoibila tse hlahang haufi kapa ka tlase ho sehlooho se lebokoseng la mangolo la moreki oa lengolo-tsoibila. Ke ntho ea bohlokoa e ka amang sekhahla se bulehileng sa mangolo-tsoibila a hau ha a ntlafalitsoe. Boholo ba bareki ba kenyelletsa HTML le CSS ho etsa bonnete ba hore mongolo oa lihlooho o hlophisitsoeng hantle.
<!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>
- Ponahalo ea kholomo e le 'ngoe: Li-imeile tse entsoeng ka sebopeho sa kholomo e le 'ngoe li bonolo ho li bala ho lisebelisoa tsa mohala. Likahare li lokela ho hlophisoa ka tatellano e utloahalang 'me li hlahisoe ka mokhoa o bonolo, oo ho leng bonolo ho o bala. Haeba u na le litšiea tse ngata, ho sebelisa CSS ho ka hlophisa litšiea ka mokhoa o motle ka sebopeho sa kholomo e le 'ngoe.
Mona ke Sebopeho sa lengolo-tsoibila la HTML ke hore likholomo tse 2 ho komporong 'me e oela ho kholumo e le 'ngoe ho li-skrini tsa mehala:
<!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>
Mona ke Sebopeho sa lengolo-tsoibila la HTML ke hore likholomo tse 3 ho komporong 'me e oela ho kholumo e le 'ngoe ho li-skrini tsa mehala:
<!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>
- Mokhoa oa Leseli le Lefifi: Most bareki ba imeile ba tšehetsa mokhoa o bobebe le o lefifi CSS
prefers-color-scheme
ho dumellana le dikgethollo tsa mosebedisi. Etsa bonnete ba hore u sebelisa mefuta ea litšoantšo moo u nang le bokamorao bo bonaletsang. Mohlala oa khoutu ke ona.
<!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>
- Mehala e meholo, e balehang: Boholo ba fonte le setaele li lokela ho khethoa ho etsa hore mongolo o balehe habonolo skrineng se senyenyane. Sebelisa bonyane boholo ba fonte ea 14pt 'me u qobe ho sebelisa litlhaku tseo ho leng thata ho li bala likrineng tse nyane. Lifonti tse sebelisoang hangata li na le monyetla o moholo oa ho fana ka mokhoa o ts'oanang ho bareki ba fapaneng ba lengolo-tsoibila, kahoo ho sebelisa Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, le Trebuchet MS hangata ke lifonti tse bolokehileng. Haeba u sebelisa fonte e tloaelehileng, etsa bonnete ba hore u na le fonte ea morao e tsejoang ho CSS ea hau:
<!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>
- Tšebeliso e nepahetseng ea litšoantšo: Lits'oants'o li ka fokotsa lebelo la nako ea ho roaloa 'me li kanna tsa se hlahe hantle lisebelisoa tsohle tsa mohala. Sebelisa litšoantšo ka mokhoa o fokolang, 'me u etse bonnete ba hore li boholo le ho e hatelitsoe bakeng sa ho shebella mobile. Etsa bonnete ba hore u tlatsa mongolo oa alt bakeng sa litšoantšo tsa hau haeba moreki oa lengolo-tsoibila a li thibela. Lits'oants'o tsohle li lokela ho bolokoa le ho ngolisoa ho tsoa webosaeteng e sireletsehileng (SSL). Mona ke mohlala oa khoutu ea litšoantšo tse arabelang ho lengolo-tsoibila la 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>
- E hlakileng pitso ea ho nka khato (CTA): CTA e hlakileng le e hlahelletseng e bohlokoa ho lengolo-tsoibila lefe kapa lefe, empa e bohlokoa haholo ho lengolo-tsoibila le sebelisang mohala. Etsa bonnete ba hore CTA e fumaneha habonolo le hore e kholo ho lekana hore e ka totoba sesebelisoa sa mohala. Haeba o kenyelletsa likonopo, o ka etsa bonnete ba hore o li ngotse ka CSS ka li-tag tsa setaele sa inline:
<!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>
- Litaba tse khutšoane le tse khutšoane: Boloka litaba tsa lengolo-tsoibila li le khuts'oane ebile li hlakile. Moeli oa litlhaku bakeng sa lengolo-tsoibila la HTML o ka fapana ho latela hore na moreki oa lengolo-tsoibila o sebelisoa. Leha ho le joalo, boholo ba bareki ba lengolo-tsoibila ba beha moeli oa boholo ba li-imeile, hangata lipakeng tsa 1024-2048 kilobytes (KB), e kenyelletsang khoutu ea HTML le litšoantšo kapa lihokelo. Sebelisa lihloohoana, lintlha, le mekhoa e meng ea ho fometa ho etsa hore litaba li hlahlojoe habonolo ha u ntse u bala le ho bala skrineng se senyenyane.
- Lintho tse sebelisanang: se nang likarolo tse sebetsanang tse hapang tlhokomelo ea motho ea ngolisitseng li tla phahamisa boitlamo, kutloisiso, le litefiso tsa ho sokoloha ho tsoa ho lengolo-tsoibila la hau. Li-GIF tse nang le liphoofolo, li-timers, livideo, le likarolo tse ling li tšehetsoa ke boholo ba bareki ba imeile ba li-smartphone.
- Motho: Ho iketsetsa tumeliso le litaba tsa motho ea ngolisitseng ea itseng ho ka tsamaisa boitlamo haholo, etsa bonnete ba hore u e fumana hantle! Mohlala. Ho bohlokoa ho ba le liphoso haeba ho se na data sebakeng sa lebitso la pele.
- Litaba tse Matla: Ho arola le ho iketsetsa litaba ho ka fokotsa litefiso tsa hau tsa ho itokolla le ho boloka ba ngolisitseng ba tšoarehile.
- Kopano ea Letšolo: Boholo ba bafani ba litšebeletso tsa imeile ba sejoale-joale ba na le bokhoni ba ho ikamahanya le maemo Lipotso tsa lets'olo la UTM bakeng sa sehokelo se seng le se seng e le hore o ka bona lengolo-tsoibila e le mocha oa analytics.
- Setsi sa Boikhethelo: Ho bapatsa ka lengolo-tsoibila ho bohlokoa haholo molemong oa ho khetha ho kena kapa oa ho tsoa ho li-imeile. Ho kenyelletsa setsi sa khetho moo ba ngolisitseng ba ka fetolang hore na ba fumana mangolo-tsoibila hangata hakae le hore na ke litaba life tsa bohlokoa ho bona ke mokhoa o tsotehang oa ho boloka lenaneo le matla la imeile le ba ngolisitseng ba kopanelang!
- Teko, Teko, Teko: Etsa bonnete ba hore u lekola lengolo-tsoibila la hau ho lisebelisoa tse ngata kapa u sebelise sesebelisoa ho lekola li-imeile tsa hau ho bareki ba lengolo-tsoibila ho etsa bonnete ba hore e shebahala e le ntle ebile e sebetsa hantle ho li-skrini tse fapaneng tsa boholo le lits'ebetso tsa ts'ebetso PELE o romela. Litmus e tlaleha hore libaka tse 3 tse tummeng ka ho fetisisa tse bulehileng tsa mehala li tsoela pele ho tšoana: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Hape, kenyelletsa mefuta e fapaneng ea liteko tsa mela ea lithuto tsa hau le litaba ho ntlafatsa litefiso tsa hau tse bulehileng le tsa ho tobetsa. Li-platform tse ngata tsa lengolo-tsoibila li se li kenyelletsa tlhahlobo ea othomathike e tla etsa mohlala oa lenane, ho supa phapang e hapileng, le ho romella lengolo-tsoibila le letle ho ba ngolisitseng ba setseng.
Haeba k'hamphani ea hau e thatafalloa ke ho rala, ho etsa liteko, le ho kenya ts'ebetsong li-imeile tse arabelang ka mohala tse tsamaisang boitlamo, u seke oa tsilatsila ho ikopanya le feme ea ka. DK New Media o na le boiphihlelo ts'ebetsong ea hoo e batlang e le mofani e mong le e mong oa litšebeletso tsa imeile (ESP).