16 ការអនុវត្តល្អបំផុតតាមអ៊ីមែល HTML ដែលងាយស្រួលប្រើតាមទូរសព្ទដៃ ដែលបង្កើនការដាក់ប្រអប់ទទួល និងការចូលរួមជាអតិបរមា
នៅឆ្នាំ 2023 វាប្រហែលជាថាទូរសព្ទនឹងលើសពីកុំព្យូទ័រលើតុ ដែលជាឧបករណ៍ចម្បងសម្រាប់បើកអ៊ីមែល។ តាមពិត HubSpot បានរកឃើញនោះ។ 46 ភាគរយ នៃអ៊ីមែលទាំងអស់ដែលបើកឥឡូវនេះកើតឡើងនៅលើទូរស័ព្ទ។ ប្រសិនបើអ្នកមិនរចនាអ៊ីមែលសម្រាប់ទូរស័ព្ទទេ អ្នកនឹងទុកការចូលរួម និងប្រាក់យ៉ាងច្រើននៅលើតុ។
- ការផ្ទៀងផ្ទាត់អ៊ីមែល៖ ធានាឱ្យបាននូវរបស់អ្នក អ៊ីមែលត្រូវបានផ្ទៀងផ្ទាត់ ទៅកាន់ដែនបញ្ជូន និង IP អាស័យដ្ឋានមានសារៈសំខាន់ណាស់ក្នុងការចូលទៅកាន់ប្រអប់ទទួល ហើយមិនត្រូវបានបញ្ជូនទៅកាន់សារឥតបានការ ឬថតសារឥតបានការឡើយ។ ជាការពិត វាក៏ចាំបាច់ផងដែរ ដែលអ្នកផ្តល់មធ្យោបាយដកខ្លួនចេញពីអ៊ីមែល ដោយប្រើវេទិកាដែលរួមបញ្ចូលតំណភ្ជាប់ដែលមិនជាវ។
- ការរចនាឆ្លើយតប៖ នេះ របស់ HTML អ៊ីមែលគួរតែ រចនាឡើងដើម្បីឆ្លើយតបដែលមានន័យថាវាអាចលៃតម្រូវទៅនឹងទំហំអេក្រង់របស់ឧបករណ៍ដែលវាកំពុងមើល។ នេះធានាថាអ៊ីមែលមើលទៅល្អទាំងនៅលើកុំព្យូទ័រ និងឧបករណ៍ចល័ត។
- បន្ទាត់ប្រធានបទច្បាស់លាស់ និងសង្ខេប៖ បន្ទាត់ប្រធានបទច្បាស់លាស់ និងសង្ខេបមានសារៈសំខាន់សម្រាប់អ្នកប្រើប្រាស់ទូរសព្ទចល័ត ព្រោះពួកគេអាចឃើញតែពាក្យពីរបីដំបូងនៃបន្ទាត់ប្រធានបទនៅក្នុងផ្ទាំងមើលអ៊ីមែលរបស់ពួកគេ។ វាគួរតែខ្លី និងត្រឹមត្រូវឆ្លុះបញ្ចាំងខ្លឹមសារនៃអ៊ីមែល។ ប្រវែងតួអក្សរល្អបំផុតនៃបន្ទាត់ប្រធានបទអ៊ីមែលអាចប្រែប្រួលអាស្រ័យលើកត្តាមួយចំនួនដូចជាមាតិកាអ៊ីមែល ទស្សនិកជន និងកម្មវិធីអ៊ីមែលដែលកំពុងប្រើ។ ទោះជាយ៉ាងណាក៏ដោយ អ្នកជំនាញភាគច្រើនណែនាំឱ្យរក្សាបន្ទាត់ប្រធានបទអ៊ីមែលខ្លី និងដល់ចំណុច ជាធម្មតាចន្លោះពី 41-50 តួអក្សរ ឬ 6-8 ពាក្យ។ នៅលើឧបករណ៍ចល័ត បន្ទាត់ប្រធានបទដែលវែងជាង 50 តួអក្សរអាចនឹងត្រូវកាត់ផ្តាច់ ហើយក្នុងករណីខ្លះ អាចបង្ហាញតែពាក្យពីរបីដំបូងនៃបន្ទាត់ប្រធានបទប៉ុណ្ណោះ។ វាអាចធ្វើឱ្យអ្នកទទួលពិបាកយល់ពីសារសំខាន់នៃអ៊ីមែល ហើយអាចកាត់បន្ថយលទ្ធភាពនៃការបើកអ៊ីមែល។
- បឋមកថា៖ បឋមកថាអ៊ីមែលគឺជាការសង្ខេបខ្លីនៃខ្លឹមសារនៃអ៊ីមែលដែលបង្ហាញនៅជាប់ ឬខាងក្រោមបន្ទាត់ប្រធានបទនៅក្នុងប្រអប់ទទួលរបស់កម្មវិធីអ៊ីមែល។ វាជាធាតុសំខាន់ដែលអាចជះឥទ្ធិពលដល់អត្រាបើកចំហនៃអ៊ីមែលរបស់អ្នកនៅពេលធ្វើឱ្យប្រសើរ។ អតិថិជនភាគច្រើនរួមបញ្ចូល HTML និង CSS ដើម្បីធានាថាអត្ថបទបឋមកថាត្រូវបានតំឡើងយ៉ាងត្រឹមត្រូវ។
<!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>
- ប្លង់ជួរឈរតែមួយ៖ អ៊ីមែលដែលត្រូវបានរចនាជាមួយប្លង់ជួរឈរតែមួយងាយស្រួលក្នុងការអាននៅលើឧបករណ៍ចល័ត។ ខ្លឹមសារគួរត្រូវបានរៀបចំតាមលំដាប់លំដោយ និងបង្ហាញជាទម្រង់សាមញ្ញ ងាយស្រួលអាន។ ប្រសិនបើអ្នកមានជួរឈរច្រើន ការប្រើប្រាស់ CSS អាចរៀបចំជួរឈរយ៉ាងស្រស់ស្អាតនៅក្នុងប្លង់ជួរឈរតែមួយ។
នេះគឺជារឿងមួយ ប្លង់អ៊ីមែល HTML នោះគឺជាជួរឈរ 2 នៅលើកុំព្យូទ័រ ហើយបង្រួមទៅជួរឈរតែមួយនៅលើអេក្រង់ទូរស័ព្ទ៖
<!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>
នេះគឺជារឿងមួយ ប្លង់អ៊ីមែល HTML នោះគឺជាជួរឈរ 3 នៅលើកុំព្យូទ័រ ហើយបង្រួមទៅជួរឈរតែមួយនៅលើអេក្រង់ទូរស័ព្ទ៖
<!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>
- របៀបពន្លឺ និងងងឹត៖ ច្រើនបំផុត កម្មវិធីអ៊ីមែលគាំទ្ររបៀបពន្លឺ និងងងឹត ជា CSS
prefers-color-scheme
ដើម្បីសម្របតាមចំណង់ចំណូលចិត្តរបស់អ្នកប្រើ។ ត្រូវប្រាកដថាប្រើប្រភេទរូបភាពដែលអ្នកមានផ្ទៃខាងក្រោយថ្លា។ នេះជាឧទាហរណ៍កូដ។
<!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>
- ពុម្ពអក្សរធំ និងអាចអានបាន៖ ទំហំ និងរចនាប័ទ្មពុម្ពអក្សរគួរតែត្រូវបានជ្រើសរើសដើម្បីធ្វើឱ្យអត្ថបទងាយស្រួលអាននៅលើអេក្រង់តូច។ ប្រើទំហំពុម្ពអក្សរយ៉ាងហោចណាស់ 14pt ហើយជៀសវាងការប្រើពុម្ពអក្សរដែលពិបាកអាននៅលើអេក្រង់តូច។ ពុម្ពអក្សរដែលប្រើជាទូទៅមានលទ្ធភាពខ្ពស់ក្នុងការបង្ហាញជាប់លាប់នៅទូទាំងកម្មវិធីអ៊ីមែលផ្សេងៗគ្នា ដូច្នេះការប្រើ Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma និង Trebuchet MS គឺជាពុម្ពអក្សរដែលមានសុវត្ថិភាពជាធម្មតា។ ប្រសិនបើអ្នកប្រើពុម្ពអក្សរផ្ទាល់ខ្លួន ត្រូវប្រាកដថាមានពុម្ពអក្សរជំនួសដែលបានកំណត់នៅក្នុង CSS របស់អ្នក៖
<!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>
- ការប្រើប្រាស់រូបភាពល្អបំផុត៖ រូបភាពអាចបន្ថយរយៈពេលផ្ទុក ហើយអាចនឹងមិនបង្ហាញត្រឹមត្រូវលើឧបករណ៍ចល័តទាំងអស់។ ប្រើរូបភាពតិចតួច ហើយត្រូវប្រាកដថាពួកវាមានទំហំ និង បង្ហាប់ សម្រាប់ការមើលតាមទូរស័ព្ទ។ ត្រូវប្រាកដថាបំពេញអត្ថបទ alt សម្រាប់រូបភាពរបស់អ្នក ក្នុងករណីដែលកម្មវិធីអ៊ីមែលរារាំងពួកគេ។ រូបភាពទាំងអស់គួរតែត្រូវបានរក្សាទុក និងយោងពីគេហទំព័រដែលមានសុវត្ថិភាព (SSL ដែលបាន) នេះជាឧទាហរណ៍កូដនៃរូបភាពឆ្លើយតបនៅក្នុងអ៊ីមែល 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>
- ជម្រះការអំពាវនាវឱ្យធ្វើសកម្មភាព (បន្ថែមពីលើមុខងារ): CTA ច្បាស់លាស់ និងលេចធ្លោមានសារៈសំខាន់នៅក្នុងអ៊ីមែលណាមួយ ប៉ុន្តែវាមានសារៈសំខាន់ជាពិសេសនៅក្នុងអ៊ីមែលដែលងាយស្រួលប្រើ។ ត្រូវប្រាកដថា CTA ងាយស្រួលស្វែងរក ហើយវាមានទំហំធំល្មមអាចចុចនៅលើឧបករណ៍ចល័តបាន។ ប្រសិនបើអ្នកបញ្ចូលប៊ូតុង អ្នកអាចធានាថាអ្នកបានសរសេរពួកវានៅក្នុង CSS ជាមួយនឹងស្លាករចនាប័ទ្មក្នុងបន្ទាត់ផងដែរ៖
<!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>
- ខ្លឹមសារខ្លី និងសង្ខេប៖ រក្សាខ្លឹមសារនៃអ៊ីមែលឱ្យខ្លី និងត្រង់ចំណុច។ ដែនកំណត់តួអក្សរសម្រាប់អ៊ីមែល HTML អាចប្រែប្រួលអាស្រ័យលើកម្មវិធីអ៊ីមែលដែលកំពុងប្រើ។ ទោះយ៉ាងណាក៏ដោយ អតិថិជនអ៊ីមែលភាគច្រើនកំណត់ទំហំអតិបរមាសម្រាប់អ៊ីមែល ជាធម្មតាចន្លោះពី 1024-2048 គីឡូបៃ (KB) ដែលរួមបញ្ចូលទាំងកូដ HTML និងរូបភាព ឬឯកសារភ្ជាប់ណាមួយ។ ប្រើចំណងជើងរង ចំណុចចំណុច និងបច្ចេកទេសធ្វើទ្រង់ទ្រាយផ្សេងទៀត ដើម្បីធ្វើឱ្យខ្លឹមសារអាចស្កេនបានយ៉ាងងាយស្រួល ខណៈពេលដែលរមូរ និងអាននៅលើអេក្រង់តូចមួយ។
- ធាតុអន្តរកម្ម៖ ការបញ្ចូល ធាតុអន្តរកម្ម ដែលទាក់ទាញចំណាប់អារម្មណ៍របស់អ្នកជាវរបស់អ្នកនឹងជំរុញឱ្យមានការចូលរួម ការយល់ដឹង និងអត្រាការបម្លែងពីអ៊ីមែលរបស់អ្នក។ GIFs មានចលនាកម្មវិធីកំណត់ម៉ោងរាប់ថយក្រោយ វីដេអូ និងធាតុផ្សេងទៀតត្រូវបានគាំទ្រដោយកម្មវិធីអ៊ីមែលស្មាតហ្វូនភាគច្រើន។
- ការធ្វើបដិរូបកម្ម: ការធ្វើបដិរូបកម្មការស្វាគមន៍ និងខ្លឹមសារសម្រាប់អ្នកជាវជាក់លាក់អាចជំរុញឱ្យមានការចូលរួមយ៉ាងសំខាន់ សូមប្រាកដថាអ្នកទទួលបានវាត្រឹមត្រូវ! ឧ. ការមានកំហុសឆ្គង ប្រសិនបើមិនមានទិន្នន័យនៅក្នុងប្រអប់ឈ្មោះគឺសំខាន់។
- ខ្លឹមសារថាមវន្ត៖ ការបែងចែក និងការកំណត់ខ្លឹមសារតាមបំណងអាចកាត់បន្ថយអត្រាការមិនជាវរបស់អ្នក និងរក្សាសមាជិករបស់អ្នកចូលរួម។
- ការរួមបញ្ចូលយុទ្ធនាការ៖ អ្នកផ្តល់សេវាអ៊ីមែលទំនើបភាគច្រើនមានសមត្ថភាពក្នុងការបន្ថែមដោយស្វ័យប្រវត្តិ ខ្សែអក្សរសំណួរនៃយុទ្ធនាការ UTM សម្រាប់រាល់តំណភ្ជាប់ ដូច្នេះអ្នកអាចមើលអ៊ីមែលជាឆានែលក្នុងការវិភាគ។
- មជ្ឈមណ្ឌលចំណូលចិត្ត៖ ទីផ្សារអ៊ីម៉ែលមានសារៈសំខាន់ពេកសម្រាប់តែវិធីសាស្រ្តជ្រើសរើសចូល ឬជ្រើសរើសមិនចូលអ៊ីមែល។ ការដាក់បញ្ចូលមជ្ឈមណ្ឌលចំណូលចិត្ត ដែលអតិថិជនរបស់អ្នកអាចផ្លាស់ប្តូរញឹកញាប់ដែលពួកគេទទួលបានអ៊ីមែល និងខ្លឹមសារអ្វីដែលសំខាន់សម្រាប់ពួកគេ គឺជាវិធីដ៏អស្ចារ្យមួយដើម្បីរក្សាកម្មវិធីអ៊ីមែលដ៏រឹងមាំជាមួយអតិថិជនដែលចូលរួម!
- តេស្ត, តេស្ត, តេស្តៈ ត្រូវប្រាកដថាសាកល្បងអ៊ីមែលរបស់អ្នកនៅលើឧបករណ៍ជាច្រើន ឬប្រើប្រាស់កម្មវិធីដើម្បី មើលអ៊ីមែលរបស់អ្នកជាមុននៅលើកម្មវិធីអ៊ីមែល ដើម្បីធានាថាវាមើលទៅល្អ និងដំណើរការបានត្រឹមត្រូវលើទំហំអេក្រង់ និងប្រព័ន្ធប្រតិបត្តិការផ្សេងៗ មុនពេលអ្នកផ្ញើ។ លីតមុស របាយការណ៍ថាបរិស្ថានបើកចំហទូរស័ព្ទដែលពេញនិយមបំផុតទាំងបីនៅតែមានដូចគ្នា៖ Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail)។ ដូចគ្នានេះផងដែរ រួមបញ្ចូលការបំរែបំរួលសាកល្បងនៃបន្ទាត់ប្រធានបទ និងខ្លឹមសាររបស់អ្នក ដើម្បីបង្កើនអត្រាបើក និងចុចតាមរយៈរបស់អ្នក។ វេទិកាអ៊ីម៉ែលជាច្រើនឥឡូវនេះរួមបញ្ចូលការធ្វើតេស្តស្វ័យប្រវត្តិដែលនឹងយកគំរូបញ្ជី កំណត់អត្តសញ្ញាណបំរែបំរួលដែលឈ្នះ និងផ្ញើអ៊ីមែលដ៏ល្អបំផុតទៅកាន់អតិថិជនដែលនៅសល់។
ប្រសិនបើក្រុមហ៊ុនរបស់អ្នកកំពុងជួបបញ្ហាក្នុងការរចនា សាកល្បង និងអនុវត្តអ៊ីមែលឆ្លើយតបតាមទូរស័ព្ទដែលជំរុញឱ្យមានការចូលរួម សូមកុំស្ទាក់ស្ទើរក្នុងការទាក់ទងក្រុមហ៊ុនរបស់ខ្ញុំ។ DK New Media មានបទពិសោធន៍ក្នុងការអនុវត្តស្ទើរតែគ្រប់អ្នកផ្តល់សេវាអ៊ីមែល (វិស័យអប់រំ).