چگونه یک قالب ایمیل HTML پاسخگو بسازیم
در این راهنمای مبتدی دوستانه، نحوه ایجاد یک قالب ایمیل پاسخگو را خواهید آموخت. برای طراحی یک قالب ایمیل که در هر دستگاهی عالی به نظر می رسد، دستورالعمل های گام به گام را با قطعه کد دنبال می کنید.
این پروژه برای تازه واردانی که مشتاق به تسلط بر اصول طراحی ایمیل هستند عالی است!
مرحله 1: ساختار اصلی را تنظیم کنید
برای ساختن یک قالب ایمیل، می توانید با یک ساختار اولیه HTML شروع کنید. این شامل یک اعلامیه DOCTYPE برای ایمیل‌ها، تعریف بخش‌های head و body ، و استفاده از تگ‌های متا در بخش head برای اطمینان از رندر و بزرگ‌نمایی مناسب موبایل است.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Email Template</title> </head> <body> <!-- Email content goes here --> </body> </html>مرحله 2: ساختار ایمیل را ایجاد کنید
از جداول برای ایجاد ساختار اصلی ایمیل خود استفاده کنید. این کار سازگاری بین کلاینت های ایمیل مختلف را تضمین می کند.
<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" border="0"> <!-- Email content goes here --> </table> </td> </tr> </table>مرحله 3: محتوا و سبک های درون خطی را اضافه کنید
کلاینت های ایمیل در نحوه ارائه CSS متفاوت هستند، پس استفاده از سبک های درون خطی ایمن تر است. در اینجا یک مثال از یک متن ساده ایمیل آورده شده است:
<body style="font-family: 'Poppins', Arial, sans-serif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="padding: 20px;"> <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;"> <!-- Header --> <tr> <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;"> Responsive Email Template </td> </tr> <!-- Body --> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Hello, All! <br> Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam. <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis. </td> </tr> <!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr> <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. </td> </tr> <!-- Footer --> <tr> <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;"> Copyright © 2024 | Your brand name </td> </tr> </table> </td> </tr> </table> </body>در اینجا به تفکیک عناصر اصلی و عملکرد آنها می پردازیم:
تنظیم برچسب بدنه و فونت
<body style="font-family: 'Poppins', Arial, sans-serif">با این کار، فونت پیش‌فرض ایمیل را روی «Poppins» تنظیم می‌کند، در صورتی که «Poppins» در دسترس نباشد، به Arial و sans-serif باز می‌گردد.
ساختار جدول
<table width="100%" border="0" cellspacing="0" cellpadding="0"> این بیرونی ترین جدولی است که 100 درصد عرض ایمیل را اشغال می کند. border ، cellspacing و cellpadding روی 0 تنظیم شده است تا استایل و فاصله پیش‌فرض حذف شود.
داخل این جدول یک <table class="content"> دیگر قرار دارد با عرض ثابت 600 پیکسل، وسط آن توسط والد با td align="center" .
این جدول داخلی شامل یک حاشیه و یک ظاهر طراحی خاص است که آن را به عنوان اصلی تعریف می کند حوزه محتوا
بخش سرصفحه
هدر با پس زمینه آبی تیره با استفاده از CSS درون خطی (#345C72)، رنگ متن سفید و اندازه متن بزرگتر (24 پیکسل) استایل داده شده است. این برای جلب توجه درست در ابتدای ایمیل طراحی شده است.
توجه : به جای آن می توانید این بخش را با نام تجاری یا لوگوی خود سفارشی کنید.
محتوای بدن
بخش بدنه حاوی پیام اصلی ایمیل است که در اندازه فونت 16 پیکسل و ارتفاع خط تنظیم شده است 1.6 برای خوانایی بهتر محتوا در سمت چپ تراز شده است و استفاده از تگ های <br> به فاصله گذاری خطوط کمک می کند.
دکمه Call to Action (CTA).
<!-- Call to action Button --> <tr> <td style="padding: 0px 40px 0px 40px; text-align: center;"> <!-- CTA Button --> <table cellspacing="0" cellpadding="0" style="margin: auto;"> <tr> <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;"> <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a> </td> </tr> </table> </td> </tr> <tr> دکمه CTA در اینجا به گونه ای طراحی شده است که با رنگ پس زمینه مطابق با هدر، گوشه های گرد، متمایز شود ( border-radius: 5px )، و متن پررنگ و سفید.
تگ <a> درون دکمه به گونه‌ای طراحی شده است که زیرخط پیش‌فرض را حذف کند ( text-decoration: none ) و به یک صفحه وب پیوند داده شده است که گیرندگان می‌توانند مشاوره رایگان را رزرو کنند.
پاورقی
پاورقی روش استایل هدر را تکرار می کند اما از پس زمینه تیره تر (#333333) و اندازه فونت کوچکتر (14 پیکسل) استفاده می کند. این می تواند حاوی اطلاعات حق چاپ و پیوندها یا سایر جزئیات تماس باشد.
تصویر
مرحله 4: آن را پاسخگو کنید
برای اطمینان از اینکه ایمیل در دستگاه های تلفن همراه خوب به نظر می رسد، می توانید از پرس و جوهای رسانه CSS استفاده کنید. در حالی که بیشتر استایل‌ها درون خط هستند، برای رفتار واکنش‌گرا، باید یک بلوک <style> در head اضافه کنید.
پرسش‌های رسانه، سبک‌ها را بر اساس عرض دستگاه تنظیم می‌کنند.
<style> @media screen and (max-width: 600px) { .content { width: 100% !important; display: block !important; padding: 10px !important; } .header, .body, .footer { padding: 20px !important; } } </style>در اینجا یک تفکیک از این قطعه خاص CSS آمده است:
@media screen and (max-width: 600px) { ... }این پرسش رسانه ای صفحه نمایش هایی با حداکثر عرض 600 پیکسل را هدف قرار می دهد. سبک‌های زیر را فقط زمانی اعمال می‌کند که ایمیل در دستگاه‌هایی با عرض صفحه نمایش 600 پیکسل یا کمتر مشاهده شود، که معمولاً شامل تلفن‌های هوشمند و برخی تبلت‌های کوچکتر می‌شود.
سبک‌های درون کلاس‌های پرسش رسانه:
.محتوا
width : 100% !important; : این سبک عرض جدول .content را تغییر می دهد تا از عرض کامل صفحه به جای 600 پیکسل مشخص شده در HTML استفاده کند. قانون !important برای نادیده گرفتن هر سبک متضاد دیگری استفاده می شود.
display: block !important; : اگرچه عناصر <table> به طور طبیعی عناصر سطح بلوک هستند، تنظیم display: block به صراحت می تواند به برخی از مشتریان ایمیل کمک کند تا اطمینان حاصل کنند که عنصر مطابق انتظار عمل می کند.
padding: 10px !important; : برای استفاده بهتر از فضای کاهش‌یافته صفحه در دستگاه‌های کوچکتر، محتویات را در جدول .content اضافه می‌کند و آن را از 40 پیکسل اصلی در HTML کاهش می‌دهد.
.هدر، .بدنه، .پایی
padding: 20px !important; : این سبک به طور یکنواخت قسمت‌های هدر، بدنه و پاورقی را در هر طرف 20 پیکسل تنظیم می‌کند و فاصله را برای صفحه‌های کوچکتر بهینه می‌کند. این تنظیمات مختلف padding تعریف شده در HTML را لغو می کند، که در برخی موارد شامل مقادیر بزرگتر می شود.
در زمینه طراحی ایمیل، استفاده از !important نسبتاً رایج است تا اطمینان حاصل شود که سبک‌ها همانطور که در نظر گرفته شده اعمال می‌شوند، که هم سبک‌های پیش‌فرض و هم دیگر سبک‌های بالقوه متضاد را که ممکن است توسط خود مشتری ایمیل اعمال شوند، لغو می‌کند.
مرحله 5: بین مشتریان ایمیل تست کنید
بسیار مهم است که الگوی ایمیل خود را در میان کلاینت‌های ایمیل مختلف (مانند Gmail، Outlook و Apple Mail) و دستگاه‌ها آزمایش کنید تا از سازگاری و پاسخگویی اطمینان حاصل کنید. ابزارهایی مانند Litmus یا Email on Acid می توانند در این مورد کمک کنند.
مرحله 6: اضافه کردن فونت گوگل
گنجاندن فونت های گوگل در قالب ایمیل HTML می تواند جذابیت بصری آن را به میزان قابل توجهی بهبود بخشد.
با این حال، توجه به این نکته مهم است که همه مشتریان ایمیل از فونت های وب پشتیبانی نمی کنند. برخی مانند اپل میل از فونت های گوگل پشتیبانی می کنند، اما برخی دیگر مانند جی میل از فونت های گوگل پشتیبانی نمی کنند. برای اطمینان از اینکه ایمیل شما برای همه گیرندگان عالی به نظر می رسد، همیشه یک فونت بازگشتی ارائه دهید.
در اینجا نحوه اضافه کردن فونت گوگل به الگوی ایمیل خود به همراه یک گزینه بازگشتی برای مشتریانی که از آن پشتیبانی نمی کنند آورده شده است:
فونت گوگل خود را انتخاب کنید
ابتدا به وب سایت Google Fonts مراجعه کرده و فونتی را انتخاب کنید. برای این مثال، بیایید از "Poppins" استفاده کنیم.
پیوند فونت را به سر ایمیل خود اضافه کنید
پیوند به فونت Google را در <head> سند HTML خود قرار دهید. از آنجایی که ممکن است این مورد در همه کلاینت‌های ایمیل پشتیبانی نشود، مطمئن شوید که یک فونت جایگزین مناسب در سبک‌های خود دارید.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">فونت را در سبک های خود اعمال کنید
از CSS درون خطی برای اعمال فونت گوگل بر روی عناصر HTML خود استفاده کنید و همیشه یک فونت معمولی را اضافه کنید. در قالب های ایمیل، به دلیل پشتیبانی متفاوت از برچسب های <style> در مشتریان ایمیل، اعمال سبک ها به صورت درون خطی امن تر است.
در اینجا نحوه اعمال فونت بر روی body ایمیل و اضافه کردن یک نسخه بازگشتی آورده شده است:
<body style="font-family: 'Poppins', Arial, sans-serif;"> <table width="100%" cellspacing="0" cellpadding="0"> <!-- Email content --> </table> </body>چیزی که ما خلق کردیم
در زیر یک اسکرین شات از قالب ایمیلی که ما طراحی کرده ایم مشاهده می کنید. دارای یک طرح‌بندی حرفه‌ای با هدر حاوی مکان‌نمای لوگو، بخش اصلی پیام شما، و پاورقی تیره با لینک‌های مدیریت تماس و اشتراک است.
نکات اضافی:
CSS خود را تا حد امکان درون خط نگه دارید، زیرا بسیاری از سرویس گیرندگان ایمیل از برچسب های <style> پشتیبانی نمی کنند.
از فونت های ایمن وب استفاده کنید تا مطمئن شوید که متن شما به درستی در همه سرویس گیرنده های ایمیل ظاهر می شود.
همیشه یک نسخه متنی ساده از ایمیل خود را برای مشتریانی که از HTML پشتیبانی نمی‌کنند یا HTML غیرفعال هستند، ارائه دهید.
امیدوارم این راهنما یک چارچوب اساسی برای ایجاد یک قالب ایمیل پاسخگو در اختیار شما قرار دهد. همانطور که با طراحی ایمیل راحت تر می شوید، می توانید طرح ها و سبک های پیچیده تری را آزمایش کنید.
کد نویسی مبارک!
برچسب‌ها
|
ارسال نظر