→ همه مقاله‌هاطراحی ایمیل

بلوک HTML سفارشی ایمیل: مؤلفه‌ای کوچک و قابل اتکا بسازید

۴ دقیقه مطالعه

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

کوچک‌ترین تغییر لازم را تعریف کنید

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

Sendvio از بلوک‌های HTML ایمیل پشتیبانی می‌کند. هر کد سفارشی را برای کسی که ماه بعد قالب را نگهداری می‌کند قابل فهم نگه دارید. از ساختار روشن، متن معنادار و جایگزین مناسب تصویر بهره ببرید، نه اینکه پیام را در نشانه‌گذاری تزئینی پنهان کنید.

قرارداد کوچکی برای مؤلفه تعریف کنید

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

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

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

رفتار را بیرون از ویرایشگر بررسی کنید

رندر ایمیل با وب‌سایت معمول فرق دارد. پیام واقعاً ارسالی را در برنامه‌های مرتبط، از جمله صفحهٔ باریک و حالت بدون تصاویر، بیازمایید. پیوندها، ترتیب خواندن، تغییر اندازهٔ متن و کارکرد بلوک کنار اجزای استاندارد قالب را تأیید کنید.

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

تغییر محتوا را هم بیازمایید، نه فقط نمونهٔ اولیه را

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

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

فقط نسخهٔ آزموده‌شده را بازاستفاده کنید

بلوک تأییدشده را همراه یادداشتی کوتاه دربارهٔ هدف و محدودیت‌هایش ذخیره کنید. هنگام تغییر محتوا، ویرایش سادهٔ متن را از تغییر ساختاری‌ای که بازبینی رندر می‌خواهد جدا کنید.

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

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

اگر مؤلفه قابل اعتماد نیست، جایگزین ساده‌تری آماده کنید. مقایسهٔ تک‌ستونیِ خوانا برای مشتری از چیدمان پیچیده‌ای که در محیط رایج خراب می‌شود مفیدتر است. معیار پذیرش عملی است: محتوا دقیق، گروه‌بندی سالم، متن خوانا، اقدام دسترس‌پذیر و ساختاری نگهداری‌پذیر که مسئول بعدی کمپین بتواند امن بازاستفاده کند.