طراحی ایمیل برای موبایل

۵۴ درصد از ایمیل‌ها روی گوشی‌های موبایل خوانده می‌شوند. آمار بالایی است.

سرویس جیمیل به تنهایی نزدیک به یک میلیارد آدرس ایمیل فعال دارد و ۷۵ درصد از آنها روی گوشی موبایل خوانده می‌شوند.

تحقیقات نشان داده که در ایمیل‌های ریسپانسیو (بهینه برای موبایل) نرخ CTR (کلیک) ۱۵٪ افزایش پیدا می‌کند.

این آمار و ارقام چه معنایی برای ایمیل مارکترها دارد؟ به صورت مشخص این آمار ما را به این نتیجه می‌رساند که ایمیل‌هایی که طراحی می‌کنیم باید بهترین عملکرد و شکل نمایشی را روی گوشی‌های موبایل داشته باشند.

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

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

کمی آمار و ارقام در مورد ایمیل‌های موبایلی
تحلیل‌های آماری که توسط مؤسسات مختلف انجام شده نشان می‌دهد که باز شدن ایمیل‌ها روی موبایل بالاترین درصد را دارد و همچنان در حال رشد است.

آمار باز شدن ایمیل‌ها روی کلاینت‌های مختلف ایمیلی را در نمودار زیر می‌بینید. Apple iPhone با ۲۲ درصد بالاترین سهم را دارد.

نرخ بازگشت سرمایه به ازای هر ۱ دلار هزینه در ایمیل مارکتینگ، ۴۴.۲۵ دلار است. جالب است بدانید که ۶۴٪ از افرادی که جزو تصمیم‌گیران اصلی شرکت‌ها هستند، ایمیل‌هایشان را روی دستگاه‌های موبایل می‌خوانند.

 

طراحی ریسپانسیو
طراحی ریسپانسیو به چه معناست؟

یکی از طراحان برجسته جمله‌ی قصاری دارد که جانِ کلام را می‌رساند:

با ازدواج تکنیک‌های طراحی Fluid، طراحی‌های وابسته به گرید و مدیا کوئری‌های مبتنی بر CSS3، ما به عنوان طراح قادر هستیم یک طراحی را انجام دهیم و خروجی کار ما در دستگاه کاربر، بسته به اینکه چه دستگاهی باشد، خودش را به شکل بهینه تطبیق دهد و نمایش دهد.

ما هم با ایشان موافق هستیم. حرفی که آقای Ethan Marcotte زده، البته مربوط به طراحی وب‌سایت است، ولی تا حد زیادی در دنیای طراحی ایمیل هم کارکرد دارد. فقط مشکل کوچکی در دنیای طراحی ایمیل وجود دارد و آن هم مربوط به پشتیبانی کلاینت‌های مختلف از تکنولوژی‌های جدید طراحی است. برای غلبه بر این مشکل، طراحان ایمیل مجبورند خلاقیت‌شان را به کار بگیرند و کمی فرایند طراحی را هک کنند.

طراحان وب برای اینکه سایت‌هایی که طراحی می‌کنند را برای نمایش در موبایل بهینه کنند، از تکنیکی با نام Media Query استفاده می‌کنند. متأسفانه این راهکار برای طراحان ایمیل خیلی قابل استفاده نیست، به این دلیل که کلاینت‌های ایمیلی مختلفی هستند که از media query پشتیبانی نمی‌کنند، به همین دلیل طراحان ایمیل باید به دنبال راهکارهای دیگری باشند.

پشتیبانی کلاینت‌های موبایلی
کلاینت‌های موبایلی که از Media Queries پشتیبانی می‌کنند:

• iOS native
• iOS Outlook
• Android native

کلاینت‌های موبایلی که از Media Queries پشتیبانی نمی‌کنند:

• iOS Gmail
• iOS Inbox
• iOS Yahoo
• Android Gmail
• iPhone Yahoo
• Windows

نگاه به لیست کلاینت‌های موبایلی مهم دنیا نشان می‌دهد که مثل بقیه‌ی کارهایی که برای طراحی ایمیل انجام می‌دهیم، به روش‌هایی نیاز داریم که مطمئن شویم تکنیک‌هایی که برای طراحی ایمیل‌های زیبا استفاده می‌کنیم، روی کلاینت‌هخای مختلف ایمیلی به خوبی و زیبایی دیده می‌شود.

قبلا در مورد جیمیل نوشته بودیم. هر بار که جیمیل آپدیتی در سیستمش اعلام می‌کند و پشتیبانی‌اش از برخی تکنیک‌ها را اعلام می‌کند، موجی از شادی در جامعه‌ی دولوپرهای ایمیل به پا می‌خیزد! جالب است بدانید که جیمیل تا سال ۲۰۱۶ از embedded CSS و Media Query پشتیبانی نمی‌کرد، ولی الان پشتیبانی می‌کند.

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

کد زیر را ببینید:

.container {
max-width: ۶۰۰px;
width: ۱۰۰%;

}

Responsive / Adaptive
یک روش دیگر برای استفاده از شکل‌های مختلف نمایشی در دستگاه‌های مختلف، استفاده از media queries است. در این روش می‌توانید نمایش یا عدم نمایش المنت‌ها را کنترل کنید.

مدیاکوئری جزییات زیادی دارد، ولی همان‌طور که گفتیم، در تمام کلاینت‌های ایمیلی پیتشبانی نمی‌شود.

Hybrid / Spongy
این تکنیک کمی شبیه به Fluid و کمی شبیه به Responsive است و البته تعدادی از تکنیک‌های مربوط به Outlook را هم استفاده می‌کند. یک راهنمای قدم به قدم برای استفاده از این تکنیک را می‌توانید در این مقاله بخوانید.

نمونه‌ای از یک کد که برای طراحی ایمیل ریسپانسیو مبتنی بر این تکنیک استفاده شده را می‌توانید ببینید:

<!–[if (gte mso 9)|(IE)]>
<table align=”left” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td align=”left” valign=”top” width=”50%”>
<![endif]–>
<div class=”span-3″ style=”display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;”>…</div>
<!–[if (gte mso 9)|(IE)]>
</td>
<td align=”left” valign=”top” width=”50%”>
<![endif]–>
<div class=”span-3″ style=”display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;”>…</div>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
@media only screen and (max-width: ۶۲۰px) {
.span-3 {
max-width: none !important;
width: ۱۰۰% !important;
}
.span-3 > table {
max-width: ۱۰۰% !important;
width: ۱۰۰% !important;
}
}

تصاویر در ایمیل‌های ریسپانسیو
یک نکته در مورد استفاده از تصاویر در ایمیل‌ها این است که شما علاوه بر صفحه‌نمایش‌های مرسوم و گوشی‌های استاندارد، باید به فکر نمایش مناسب تصاویر روی گوشی‌های با قابلیت نمایش Retina نیز باشید. در گوشی‌های جدید (مثلا آخرین نسخه‌های iPhone) تصاویر با کیفیتی خیلی بیشتر از گوشی‌های موبایل مرسوم نمایش داده می شوند. برای اینکه بهترین کیفیت نمایشی را بگیرید، پیشنهاد می‌کنیم از رزولوشنی بالاتر از حد مرسوم استفاده کنید. مثلا تصاویر را به جای اینکه با رزولوشن ۷۲ پیکسل بر اینچ در فتوشاپ ذخیره کنید، آنها را با رزولوشن حداقل ۱۵۰ پیکسل ذخیره کنید. در این حالت البته کمی سایز تصاویر بیشتر می‌شود، ولی ارزش نمایش با کیفیت‌تر روی گوشی‌های موبایل با قابلیت Retina را دارد.

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

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

برای دستگاه‌های Apple Watch یک MIME type به شکل text/watch-html وجود دارد که شما را قادر می‌سازد که نسخه‌ی متفاوتی از ایمیل را برای نمایش در ساعت‌های هوشمند اپل آماده کنید و در این دستگاه‌ها نمایش دهید.

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

جمع‌بندی
طراحی HTML ایمیل کار سختی است نسبتا. طراحی HTML ایمیل به صورت ریسپانسیو کار سخت‌تری است. ولی همان‌طور که در مقدمه‌ی این یادداشت نوشتیم، توجه شما به طراحی ریسپانسیو امر اجتناب‌ناپذیری است و باید با سختی‌های آن کنار بیایید.

• برای نمایش بهینه‌ی دکمه‌ها در دستگاه‌های اپل بهتر است ارتفاع دکمه‌هایی که در داخل ایمیل طراحی می‌کنید، حداقل ۳۳ پیکسل باشند.
• فراموش نکنید که تصاویر استفاده شده در داخل ایمیل را تا حد ممکن فشرده کنید که حجم بالایی نداشته باشند.
• در عنوان ایمیل، سعی کنید که تعداد کاراکترها از ۵۰ تا تجاوز نکند تا نمایش بهینه‌ای روی گوشی موبایل داشته باشد.
• استفاده از متن‌های زیرعنوان (Preheader) در دستگاه‌های موبایلی اهمیت بیشتری دارند.
• برای اینکه متن‌ها نمایش خوبی روی گوشی موبایل داشته باشند، اندازه‌ی متن را حداقل ۱۳ پیکسل در نظر بگیرید. البته اندازه‌ی پیشنهادی، ۱۶ پیکسل برای متن‌های اصلی و ۲۲ پیکسل برای تیترها است.
• هرگز از navigation bar در داخل ایمیل استفاده نکنید.
• ساده‌ترین کار برای اینکه مطمئن شوید طراحی ریسپانسیو شما روی گوشی‌های موبایل به درستی کار می‌کند این است که طراحی را به صورت تک‌ستونی انجام دهید. ایده‌های زیادی برای طراحی زیبای تک‌ستونی وجود دارد و با کمی خلاقیت می‌توانید ایمیل‌های زیبایی حتی در این حالت طراحی کنید.
• فراموش نکنید که لندینگ‌پیج مرتبط با کمپین ایمیلی را هم به صورت ریسپانسیو طراحی کنید. کاربری که از روی گوشی موبایل روی لینک‌های CTA شما کلیک می‌کند و به یک صفحه‌ی وب هدایت می شود، انتظار دارد همچنان طراحی بهینه‌ای را برای موبایل شاهد باشد.

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