طراحی ایمیل ریسپانسیو: راهنمای عملی

یک ایمیل خوش‌ظاهر در مرورگر ممکن است در برنامه دریافت ایمیل با فاصله‌های متفاوت، دکمه ناهماهنگ یا ستون‌های به‌هم‌ریخته نمایش داده شود. مخاطب هم معمولاً برای فهم علت منتظر نمی‌ماند؛ باید متن را بخواند و کارش را انجام دهد. طراحی ایمیل واکنش‌گرا از یک پیام خوانا شروع می‌شود و سپس چیدمان را با محیط‌های دریافت هدف سازگار می‌کند. انتقال مستقیم CSS یک صفحه وب به ایمیل، این تفاوت محیط را نادیده می‌گیرد.

ابتدا نوع پیام را تعیین کنید. رسید خرید، اعلان تغییر رمز و خبرنامه هدف‌های متفاوتی دارند. در رسید، جزئیات سفارش و مسیر پیگیری مهم است؛ در خبرنامه، انتخاب مقاله بعدی. تعداد ستون‌ها، جای اقدام اصلی و طول متن باید از همین هدف بیاید. قالب پرجزئیات برای هر پیام مناسب نیست و یک ایمیل تک‌ستونی می‌تواند بدون ترفندهای زیاد نیاز مخاطب را برآورده کند.

سازگاری را به نام محصول تقلیل ندهید

عبارت «Outlook از CSS مدرن پشتیبانی نمی‌کند» بیش از حد کلی است. نسخه و محیط اجرا بر رفتار نمایش اثر دارند و یک نام محصول همیشه به یک موتور واحد اشاره نمی‌کند. برای تصمیم واقعی، برنامه دریافت، سیستم‌عامل و نسخه‌های مهم مخاطبان را مشخص کنید. همین دقت درباره Gmail و دیگر برنامه‌ها هم لازم است. سیاست نمایش و قابلیت‌های قابل استفاده را از مستندات مربوط به همان محیط بخوانید.

برای نمونه، مستندات CSS در Gmail پشتیبانی از بخشی از selectorها، ویژگی‌ها و Media Queryها را توضیح می‌دهد؛ پس «ایمیل فقط Inline CSS را می‌فهمد» هم گزاره دقیقی نیست. Inline کردن قواعد پایه یک راه سازگاری است، نه دلیل حذف همه قواعد داخل style. بخش‌های ضروری باید با حداقل امکانات قابل استفاده بمانند و بهبودهای بصری بر آن پایه اضافه شوند.

عرض قالب یک قرارداد طراحی است

عرض ۶۰۰ پیکسل انتخاب رایجی برای بدنه ایمیل است، ولی سقف اجباری همه ایمیل‌ها نیست. عرض مناسب به طول خط، نوع محتوا و محیط خواندن بستگی دارد. مهم‌تر از یک عدد ثابت، رفتار در فضای باریک است: متن نباید نیاز به اسکرول افقی داشته باشد و فاصله کناره‌ها باید خوانایی را حفظ کند. در فضای پهن هم کشیده شدن بی‌حد متن خواندن را دشوار می‌کند.

از ساختار سیال برای عرض بیرونی و محدودیت معقول برای محتوای داخلی استفاده کنید. برای چیدمان‌های پیچیده، محیط‌هایی که محدودیت بیشتری دارند ممکن است قواعد تکمیلی لازم داشته باشند. در قالب ساده زیر، عرض داخلی درصدی است و به حداکثر مشخص محدود می‌شود. این نمونه نقطه شروع آموزشی است؛ ادعای نمایش یکسان در همه برنامه‌های دریافت ایمیل ندارد و تنظیم تولید باید بر اساس محیط هدف انجام شود.

نمونه ساده تک‌ستونی

کد را در فایل email.html با encoding برابر UTF-8 ذخیره کنید. CSS پایه داخل خود عناصر است و فایل، تصویر، فونت یا JavaScript خارجی ندارد. لینک به مقاله موجود مجله می‌رود. باز کردن فایل، پیش‌نمایش HTML را نشان می‌دهد؛ برای ارسال، بدنه باید از مسیر سامانه ارسال ایمیل شما وارد پیام شود. این فایل به‌تنهایی فرستنده، موضوع یا نسخه متنی پیام را تنظیم نمی‌کند.

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>راهنمای این هفته</title></head>
<body style="margin:0;padding:0;background-color:#eef1f5;color:#172235;font-family:Tahoma,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#eef1f5;"><tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;background-color:#ffffff;"><tr><td dir="rtl" style="padding:28px;text-align:right;">
<p style="margin:0 0 12px;font-size:14px;line-height:1.8;">مجله طراحستان</p>
<h1 style="margin:0 0 16px;font-size:24px;line-height:1.6;">مسیرهای سایت را روشن‌تر کنید</h1>
<p style="margin:0 0 24px;font-size:16px;line-height:1.9;">در راهنمای طراحی منو، برچسب‌ها، وضعیت فعال و رفتار ناوبری با صفحه‌کلید را بررسی می‌کنیم.</p>
<a href="https://tarahestan.com/magazine/navigation-menu-design-principles" style="display:inline-block;padding:14px 20px;background-color:#163d78;color:#ffffff;text-decoration:underline;font-size:16px;line-height:1.6;">مطالعه راهنمای طراحی منو</a>
<p style="margin:24px 0 0;font-size:14px;line-height:1.8;">این نمونه آموزشی برای توضیح ساختار ایمیل است و ارسال واقعی انجام نمی‌دهد.</p>
</td></tr></table>
</td></tr></table>
</body></html>

دو جدول نمونه فقط چیدمان را ایجاد می‌کنند و با role برابر presentation از جدول داده جدا شده‌اند. عنوان و پاراگراف‌ها همچنان عناصر معنایی خود را دارند. برای اطلاعات واقعاً جدولی مانند ردیف‌های سفارش، ساختار داده را جدا و با عنوان‌های مناسب طراحی کنید. استفاده از table برای سازگاری به این معنا نیست که همه متن باید بدون heading و ترتیب قابل فهم در سلول‌ها پراکنده شود.

اقدام اصلی باید متن و مقصد روشن داشته باشد

دکمه ایمیل معمولاً یک لینک است که ظاهر دکمه دارد. برچسب «مطالعه راهنمای طراحی منو» از «اینجا کلیک کنید» روشن‌تر است. اگر پیام تراکنشی است، مقصد باید به همان سفارش یا اقدام مربوط شود و وضعیت ورود کاربر را در نظر بگیرد. ایمیل را به محل جمع‌آوری مستقیم اطلاعات حساس تبدیل نکنید؛ مسیر انجام کار در محیط قابل اعتماد محصول با توضیح روشن ارائه شود.

به نسخه‌ای فکر کنید که بخشی از تزئینات آن حذف می‌شود. اگر رنگ پس‌زمینه دکمه نمایش داده نشد، متن لینک هنوز باید معنی داشته باشد. رنگ، underline و فاصله را به گونه‌ای انتخاب کنید که مقصد قابل تشخیص باشد. لینک‌های متعدد با برچسب یکسان مخاطب را وادار به حدس زدن می‌کنند. متن دکمه و پاراگراف قبل از آن باید یک عمل مشخص را توضیح دهند.

تصویر نباید حامل تنها نسخه پیام باشد

بعضی مخاطبان تصاویر را نمی‌بینند یا دریافت آن‌ها را محدود کرده‌اند. عنوان، مبلغ، موعد و اقدام اصلی را به صورت متن واقعی نگه دارید. تصویر تزئینی می‌تواند حذف شود بدون اینکه خبر اصلی از بین برود. برای تصویر معنی‌دار، متن جایگزین باید به نقش آن اشاره کند. یک پوستر بزرگ با همه نوشته‌ها، از نظر خواندن، بزرگ‌نمایی و سازگاری انتخاب شکننده‌تری از ترکیب متن و تصویر است.

اگر بعداً تصویر اضافه می‌کنید، اندازه نمایشی و رفتار کوچک شدن آن را مشخص کنید. عرض ثابت بدون امکان جمع شدن می‌تواند بدنه باریک را بشکند. منبع فایل باید در محیط دریافت قابل دسترسی باشد و نیاز به نشست خصوصی ناشناخته نداشته باشد. کاهش حجم تصویر هم به خواندن پیام کمک می‌کند، اما درصد کاهش ثابتی برای همه فایل‌ها وجود ندارد؛ کیفیت و اندازه واقعی مقصد ملاک تصمیم است.

فارسی و محتوای ترکیبی را از ابتدا در نظر بگیرید

در قالب نمونه، زبان فارسی و جهت راست‌به‌چپ مشخص شده‌اند. شماره سفارش، URL و نام محصول انگلیسی ممکن است به ناحیه با جهت مناسب نیاز داشته باشند تا ترتیب آن‌ها مبهم نشود. متن را با همان ترکیب واقعی بررسی تحریری کنید؛ چند کلمه فارسی نمونه، مشکلات شناسه‌های بلند و عددها را نشان نمی‌دهد. فونت باید fallback خوانا داشته باشد، چون نمی‌توان دریافت فونت وب را در همه محیط‌ها فرض کرد.

فاصله خطوط و اندازه متن را برای خواندن روی صفحه کوچک تنظیم کنید. فشرده کردن محتوا برای جا شدن در یک صفحه معمولاً راه‌حل خوبی نیست. اگر پیام طولانی است، بخش‌های کوتاه با عنوان‌های روشن بسازید و جزئیات تکمیلی را به مقصد مشخص در وب ببرید. جمله مقدماتی ایمیل نیز باید خبر اصلی را بیان کند؛ مخاطب ممکن است فقط پیش‌نمایش کوتاه فهرست پیام‌ها را ببیند.

Dark Mode و حذف استایل را پیش‌بینی کنید

برنامه‌های دریافت ممکن است رنگ‌ها را در حالت تاریک تغییر دهند. ترکیبی که در طرح روشن خوب است، می‌تواند بعد از تغییر رنگ بخشی از عناصر کنتراست نامناسبی پیدا کند. برای اطلاعات ضروری به ترکیب رنگ و متن تکیه کنید. لوگوی شفاف یا تصویر با زمینه تیره هم نیاز به تصمیم جدا دارد. یک رفتار واحد برای تمام برنامه‌ها فرض نکنید و تنظیمات تکمیلی را بر اساس محیط هدف نگه دارید.

کد پایه بهتر است با حذف برخی استایل‌ها نیز ترتیب خواندن قابل فهمی داشته باشد. عنوان، توضیح، اقدام و اطلاعات تکمیلی را در همان ترتیب منطقی بنویسید. وابستگی به نمایش معکوس ستون‌ها یا محتوای پنهان پیچیده هزینه نگهداری دارد. اگر دو نسخه محتوا برای نمایش‌های متفاوت تولید می‌کنید، مراقب تکرار ناخواسته متن در برخی محیط‌ها و اختلاف محتوایی میان نسخه‌ها باشید.

ابزار ساخت و سامانه ارسال دو مسئولیت دارند

MJML یک زبان مؤلفه‌ای و ابزار تبدیل به HTML ایمیل فراهم می‌کند. این ابزار می‌تواند ساخت قالب را ساده کند، ولی انتخاب آن جای تعیین مخاطب، متن و محیط هدف را نمی‌گیرد. خروجی تولیدشده هم بخشی از محصول است و باید قابل نگهداری باشد. نمونه این مقاله دستی نوشته شده تا ساختار پایه روشن باشد؛ برای آن نصب هیچ بسته‌ای لازم نیست.

قالب HTML درباره تحویل پیام تصمیم نمی‌گیرد. تنظیم هویت فرستنده، مدیریت فهرست مخاطبان و مسیر لغو دریافت پیام تبلیغاتی به سامانه ارسال مربوط است. نسخه plain text را هم با همان خبر و لینک‌های ضروری بسازید. مسیر شخصی‌سازی باید برای داده خالی رفتار معلوم داشته باشد؛ «سلام،» از نمایش نام متغیر یا جای‌خالی فنی بهتر است. اطلاعات محرمانه را در URL عمومی یا ابزار تحلیل وارد نکنید.

پیش از تحویل قالب، عنوان‌ها، مقصد لینک‌ها، ترتیب متن، حالت تصویر حذف‌شده و داده‌های طولانی را روی فایل نهایی مرور کنید. قالب و نسخه متنی باید یک پیام را منتقل کنند. تصمیم‌های سازگاری را همراه نام محیط هدف ثبت کنید تا تغییر بعدی آگاهانه باشد. برای ادامه کار روی ساختار محتوا، طراحی قالب ایمیل ساختار محتوای پیام را بیشتر توضیح می‌دهد. معیار نهایی خواندن و انجام عمل مشخص است.