16 بهترین روش ایمیل HTML سازگار با موبایل که قرارگیری و تعامل صندوق ورودی را به حداکثر میرساند
در سال 2023، این احتمال وجود دارد که تلفن همراه به عنوان دستگاه اصلی برای باز کردن ایمیل از دسکتاپ پیشی بگیرد. در واقع، HubSpot آن را پیدا کرد 46 درصد از تمام ایمیل های باز شده اکنون در تلفن همراه رخ می دهد. اگر ایمیلی برای موبایل طراحی نمی کنید، درگیر شدن و پول زیادی روی میز باقی می گذارید.
- احراز هویت ایمیل: اطمینان از ایمیل ها احراز هویت می شوند به دامنه ارسال و IP آدرس برای رسیدن به صندوق ورودی بسیار مهم است و به یک پوشه ناخواسته یا هرزنامه هدایت نمی شود. البته، همچنین ضروری است که با استفاده از پلتفرمی که دارای پیوند لغو اشتراک است، ابزاری برای انصراف از ایمیل ارائه دهید.
- طراحی تعاملی: La 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>
- استفاده بهینه از تصاویر: تصاویر می توانند زمان بارگذاری را کاهش دهند و ممکن است در همه دستگاه های تلفن همراه به درستی نمایش داده نشوند. از تصاویر به اندازه کافی استفاده کنید و مطمئن شوید که اندازه و اندازه آنها هستند فشرده برای مشاهده موبایل مطمئن شوید که متن جایگزین را برای تصاویر خود در صورتی که سرویس گیرنده ایمیل آنها را مسدود کند، پر کنید. همه تصاویر باید از یک وب سایت امن ذخیره و ارجاع داده شوند (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 واضح و برجسته در هر ایمیلی مهم است، اما در ایمیل های سازگار با موبایل از اهمیت ویژه ای برخوردار است. مطمئن شوید که 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 و هم هر تصویر یا پیوستی است. از عنوانهای فرعی، نقاط گلوله و سایر تکنیکهای قالببندی استفاده کنید تا در حین پیمایش و خواندن روی صفحه کوچک، محتوا را به راحتی اسکن کنید.
- عناصر تعاملی: ترکیب عناصر تعاملی که توجه مشترک شما را به خود جلب می کند، باعث افزایش تعامل، درک و نرخ تبدیل از ایمیل شما می شود. GIF های متحرک، تایمرهای شمارش معکوس، ویدیوها و سایر عناصر توسط اکثر مشتریان ایمیل گوشی هوشمند پشتیبانی می شوند.
- شخصی: شخصی سازی سلام و محتوا برای یک مشترک خاص می تواند به طور قابل توجهی باعث ایجاد تعامل شود، فقط مطمئن شوید که آن را به درستی دریافت کرده اید! به عنوان مثال. اگر دادهای در فیلد نام کوچک وجود نداشته باشد، داشتن بازگردانی مهم است.
- محتوای پویا: تقسیم بندی و سفارشی سازی محتوا می تواند نرخ لغو اشتراک شما را کاهش دهد و مشترکین شما را درگیر کند.
- یکپارچه سازی کمپین: اکثر ارائه دهندگان خدمات ایمیل مدرن این قابلیت را دارند که به صورت خودکار اضافه شوند رشته های کوئری کمپین UTM برای هر پیوند به طوری که می توانید ایمیل را به عنوان یک کانال در تجزیه و تحلیل مشاهده کنید.
- مرکز ترجیحی: بازاریابی ایمیلی فقط برای رویکرد انتخاب کردن یا انصراف از ایمیل ها بسیار مهم است. ترکیب یک مرکز ترجیحی که در آن مشترکین شما می توانند تعداد دفعات دریافت ایمیل و محتوایی که برای آنها مهم است را تغییر دهند، راهی فوق العاده برای حفظ یک برنامه ایمیل قوی با مشترکین درگیر است!
- تست، تست، تست: مطمئن شوید که ایمیل خود را روی چندین دستگاه آزمایش کرده اید یا از یک برنامه کاربردی برای آن استفاده کنید پیشنمایش ایمیلهای خود در میان کلاینتهای ایمیل قبل از ارسال، اطمینان حاصل کنید که خوب به نظر می رسد و در اندازه های مختلف صفحه نمایش و سیستم عامل ها به درستی کار می کند. تورنسل گزارش می دهد که 3 محیط باز محبوب تلفن همراه همچنان یکسان هستند: Apple iPhone (iOS Mail)، Google Android، Apple iPad (iPadOS Mail). همچنین، تغییرات آزمایشی خطوط موضوعی و محتوای خود را برای بهبود نرخ باز و کلیک خود در نظر بگیرید. اکنون بسیاری از پلتفرمهای ایمیل از آزمایش خودکار استفاده میکنند که از فهرست نمونهبرداری میکند، تنوع برنده را شناسایی میکند و بهترین ایمیل را برای مشترکین باقیمانده ارسال میکند.
اگر شرکت شما با طراحی، آزمایش و پیادهسازی ایمیلهای پاسخگوی تلفن همراه که باعث ایجاد تعامل میشوند، مشکل دارد، در تماس با شرکت من تردید نکنید. DK New Media دارای تجربه در پیاده سازی تقریباً هر ارائه دهنده خدمات ایمیل (ESP).