طراحی ایمیل موبایلی از ترتیب خواندن شروع می‌شود: مشتری باید بدون بزرگ‌نمایی پیشنهاد، شرط مهم و اقدام بعدی را بفهمد. شبکهٔ محصولات Shopify که روی دسکتاپ خلوت است، ممکن است روی تلفن به ردیفی از تصاویر کوچک تبدیل شود. ابتدا برای فضای خواندن کوچک طراحی کنید و بعد ببینید با بلندشدن متن، بارگذاری‌نشدن تصویر یا ستونی‌شدن چیدمان چه رخ می‌دهد.
ترتیب خواندن روشنی بسازید
برای پیام اصلی از ساختار سادهٔ تک‌ستونی استفاده کنید. وعده، توضیح پشتیبان و اقدام اصلی را به ترتیبی قرار دهید که حتی بدون تصاویر هم معنا داشته باشد. بلوک‌های بیشتر محصول باید از آن اقدام پشتیبانی کنند، نه اینکه با آن رقابت کنند.
متن مهم را به شکل متن واقعی و قابل انتخاب نگه دارید. خواننده نباید برای دیدن پیشنهاد یا شرایطش روی تصویر تبلیغاتی بزرگ‌نمایی کند. قلم سازگار با ایمیل و اندازهٔ راحت برای متن بدنه برگزینید؛ ۱۶ پیکسل نقطهٔ شروع مناسبی است، اما نمایش واقعی را آزمایش کنید. ترجمهٔ بلندتر ممکن است به فضای عمودی بیشتری نیاز داشته باشد، نه حروف کوچک‌تر.
نمای نخست را حول یک تصمیم طراحی کنید
پیش از چیدن شبکهٔ دسکتاپ، نسخهٔ باریک را طرح‌ریزی کنید. ترتیب خواندن برای معرفی محصول می‌تواند چنین باشد: نام محصول، یک جمله دربارهٔ کاربرد، تصویر پشتیبان، توضیح قیمت و دکمه. خواننده باید حتی اگر فقط بخش بالایی را ببیند پیشنهاد را بفهمد. بنر تزئینی بزرگ نباید تمام جزئیات مفید را چند صفحه پایین‌تر ببرد.
متن بدنه را نزدیک ۱۶ پیکسل و با فاصلهٔ خطی کافی شروع کنید؛ سپس ایمیل ارسالی را ببینید. این‌ها نقطهٔ شروع طراحی‌اند، نه قاعده‌ای که همهٔ برچسب‌ها و عنوان‌ها اندازهٔ یکسان داشته باشند. تفاوت عنوان و متن بدنه را واضح نگه دارید و اطراف اقدام اصلی فضای راحتی حفظ کنید. برای جا دادن همه‌چیز، کوچک‌کردن کل قالب معمولاً راه‌حل درستی نیست.
برای دو کارت محصول، تصویر، عنوان، قیمت و پیوند هرکدام را در همان جزء کنار هم نگه دارید. وقتی کارت‌ها زیر هم قرار می‌گیرند، مشتری باید یک محصول کامل را پیش از دیدن محصول بعدی ببیند. چیدمانی نسازید که ابتدا هر دو تصویر و بعد هر دو توضیح را نشان دهد؛ این کار خواننده را مجبور می‌کند دوباره حدس بزند هر جزئیات متعلق به کدام کالا است.
اجازه دهید اجزا با محتوایشان رشد کنند
از ناحیه‌های متنی با ارتفاع ثابت و شکست خط‌های دستی که فقط برای متوازن‌کردن عنوان دسکتاپ استفاده شده‌اند دوری کنید. برای متن بلندتر فضای کافی در دکمه بگذارید و ناحیهٔ کلیک را برای لمس راحت کنید. میان پیوندهای نزدیک فاصله بگذارید تا انگشت مقصد اشتباه را انتخاب نکند.
برای تصاویر اطلاعاتی، متن جایگزین توصیفی بنویسید و اجازه ندهید تصاویر تزئینی سروصدای اضافی ایجاد کنند. تضاد متن و پس‌زمینهٔ واقعی را بررسی کنید، از جمله تغییرهای حالت تیره. برچسب کم‌رنگی که روی نمایشگر شما شیک است، شاید بیرون و زیر نور روز روی تلفن به‌سختی خوانده شود.
ماتریس پیش‌نمایشی داشته باشید که اجزای ضعیف را آشکار کند
ماتریس مفید شامل نمای باریکِ هم‌اندازهٔ تلفن، نمای بزرگ‌تر، حالتِ بارگذاری‌نشدن تصاویر، حالت تیره در صورت پشتیبانی، و دادهٔ واقعی مشتری است. برای ترجمه‌ها، بلندترین نسخه را هم بگنجانید، نه اینکه فقط کوتاه‌ترین متن را بیازمایید. ابتدا کل پیام را ببینید و بعد بخش‌هایی را که بیشتر در خطرند بررسی کنید: عنوان محصول، رشتهٔ قیمت، دکمه‌ها و پیوندهای پایین صفحه.
- اگر متن دکمه به خط بعد می‌رود، ارتفاع آن را افزایش دهید و فاصله‌گذاری را بررسی کنید؛ واژهٔ مربوط به اقدام را نبُرید.
- اگر نام محصول به بلوک بعدی می‌چسبد، ارتفاع ثابت را بردارید و برای شکستن متن جا بگذارید.
- اگر با حذف تصاویر، اطلاعات مهم هم ناپدید می‌شود، آن را به متن واقعی منتقل کنید و تصویر را پشتیبان قرار دهید.
- اگر لمس پیوندهای نزدیک به هم دشوار است، فاصله‌شان را بیشتر یا تعداد اقدام‌های رقیب را کمتر کنید.
حالت‌های خرابی را عمداً پیش‌نمایش کنید
در Sendvio، قالب را با دادهٔ واقعی مشتری و عرض باریک پیش‌نمایش کنید. نام بلند، فیلد شخصی‌سازی خالی، قیمت طولانی و محصولی با عنوان غیرمعمولاً بلند را امتحان کنید. سپس در برنامه‌های ایمیلی‌ای که مشتریان معمولاً استفاده می‌کنند پیام آزمایشی بفرستید.
برای تبلیغ دو محصول، ترتیبِ چیدمان عمودی را بسنجید: تصویر، نام، قیمت و اقدام هر محصول باید کنار هم بمانند. اگر از هم جدا می‌شوند، بلوک را ساده کنید. لازم نیست آرایش دسکتاپ را به هر قیمتی حفظ کنید؛ هدف این است که معنا باقی بماند و اقدام بعدی بدون بزرگ‌نمایی، حدس یا پیمایش افقی روشن باشد.
تضاد واقعی متن و پس‌زمینه را بررسی کنید. برای متن معمولی، نسبت کنتراست دست‌کم ۴٫۵ به ۱ نقطهٔ شروع مفیدی برای دسترس‌پذیری است؛ متن به‌اندازهٔ کافی بزرگ حداقل پایین‌ترِ ۳ به ۱ دارد. این اعداد جای بررسی کامل دسترس‌پذیری را نمی‌گیرند، اما تصمیم رنگ را از سلیقهٔ صرف دور می‌کنند. برچسب کوچک خاکستری را به‌اندازهٔ عنوان اصلی جدی بگیرید.
جزء اصلاح‌شده را در قالب قابل استفادهٔ دوباره ذخیره کنید و پس از تغییرهای اساسی دوباره بیازمایید. قالب موبایلی خوب فقط از پیمایش افقی جلوگیری نمی‌کند؛ ترتیب خواندن، فهم پیشنهاد و اقدام بعدی روشن و قابل استفاده را در محیط‌های ایمیلی‌ای که واقعاً پشتیبانی می‌کنید حفظ می‌کند.