10 نکته برای طراحی ایمیل های سازگار با موبایل

طراحی ایمیل برای تلفن های هوشمند

در چند سال اخیر طراحی برای تلفن های هوشمند تغییرات بسیار بزرگی را دیده است. بر اساس اکثر گزارشات حدود 61 درصد از کاربران ایمیل های خود را در تلفن همراهشان باز می کنند و 31 درصد کاربران نیز می گویند که با همان تلفن همراه خرید های ایمیلی را انجام می دهند. این آمار روز به روز افزایش می یابند به همین دلیل بهتر است ایمیل های خود را برای تلفن های همراه نیز بهینه سازی کنیم.

1. طراحی ساده و تک ستونه

بهترین و آسان ترین راه، طراحی یک ایمیل طراحی تک ستونی به همراه عرض واکنش گرا است اما اگر دوست دارید که طراحی هایتان چند ستونه باشد باید به نکته ای توجه کنید؛ طراحی چند ستونه بدین معنا است که در گوشی های موبایل عناصر شما روی هم قرار می گیرند (stack می شوند) بنابراین قبل از ارسال ایمیل ها باید ببینید شکل Stack شده ی آن ها به چه شکلی است. آیا ظاهری قابل قبول دارد یا باعث دوری کاربران از سایت شما می شود؟

برای راحتی کار شما یکی از قالب های طراحی ایمیل برای موبایل را در اختیار شما قرار می دهیم:

نمونه طرح ایمیل سازگار با تلفن همراه (طراحی تک ستونه)

دانلود تمامی کد ها + تصاویر این قالب آماده

2. غیرفعال کردن عناصر خاص

شما می توانید با استفاده از کد زیر عناصر desktop را غیرفعال کرده و عناصر موبایلی را نمایش دهید. به طور مثال می توانید تصویر بهینه شده ای را نشان دهید که با سایز دستگاه های موبایلی سازگار است یا سایز دکمه هایتان را تغییر دهید:

<style>
@media screen and (max-device-width:600px), screen and (max-width:600px) {
      .hide {
        display: none!important;
        width: 0px!important;
        height: 0px!important;
      }      .show {
        display: block!important;
        width: 100%!important;
        max-height: inherit!important;
        overflow: visible!important;
      }
   }
</style>
</head>
<body>
        <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/desktop-image.png" alt="" width="548" height="217" style="display: block;" class="hide">
 <!--[if !mso]><!-->
<div class="show" style="display: none; max-height: 0px; overflow: hidden;">
 <img src="images/mobile-image.png" alt="" width="100%" style="display: block;"> </div>

 <!--<![endif]--></td>
</tr></table>
</body>

3. تغییر سایز فونت ها و تصاویر

استفاده از media query ها و تغییر سایز فونت ها و تصاویر باعث می شود که طراحی شما روی دستگاه های موبایل بسیار بهتر به نظر برسد. روش های زیادی برای این کار وجود دارد که یکی از آن ها تغییر سایز فونت بر اساس viewport است:

<style type="text/css">

@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>

سپس کلاس mobfont را به هر فونتی که بخواهیم سایزش را تغییر دهیم اضافه می کنیم:

<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>

همچنین اضافه کردن width و height به تصاویر باعث می شود سایز آن ها به صورت خودکار تغییر کند. به طور مثال کد زیر تضمین می کند که تصاویر شما همیشه روی 100% عرض عنصر پدر باقی می مانند. ارتفاع (height) را نیز روی auto گذاشته ایم تا نسبت طول و عرض تصویر بهم نریزد:

@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobimage {width: 100%!important;min-width: 100%!important;max-width: 1000px!important;height: auto!important;} }

4. صریح باشید

این روزها کاربران نه حوصله ی خواندن مقالات و ایمیل های طولانی را دارند و نه کاملا روی پیام شما تمرکز می کنند که بخواهید ایمیلی 500 کلمه ای برایشان بفرستید. شما در صفحات موبایل فضای کوچکی دارید که پُر از عوامل مختلف و شلوغ است بنابراین حرفتان را در حد ممکن خلاصه کنید و صریحا به اصل مطلب بروید. مثال خوب از کمپانی آدیداس:

طراحی ایمیل تبلیغاتی عالی و خلاصه از کمپانی Adidas

5. استفاده از دکمه های قابل لمس

دکمه هایتان را مانند مثال آدیداس بالا واضح طراحی کنید. فضای اطراف این دکمه ها باید خالی باشد تا کاربر بتواند آن را لمس کند (توجه داشته باشیم که در گوشی های موبایل موس وجود ندارد). اگر کاربران نتوانند به راحتی ایمیل شما را اسکرول کنند و مدام به اشتباه روی لینک ها کلیک کنند عصبانی شده و ایمیل را رها می کنند. کمپانی Apple برای گوشی های آیفون سایز پیشنهادی دکمه ها را حداقل 44px از عرض در نظر می گیرد بنابراین:

دکمه هایتان را بیش از حد کوچک نکنید.
کاربران باید از ظاهر دکمه بفهمند که این عنصر یک دکمه است.
متن دکمه را تا حد ممکن با عناصر <strong> و underline شده مشخص کنید تا جلب توجه کند.

6. کنتراست بالا در طراحی

کنتراست (contrast) در طراحی های موبایل ضروری است چرا که برخلاف کاربران ویندوز و کامیپوتر های شخصی کاربران موبایل ممکن است ایمیل شما را در فضای بیرون از خانه و زیر نور آفتاب باز کنند. اگر طراحی شما کنتراست بالا نداشته باشد خواندن آن زیر نور شدید بسیار سخت شده و معمولا توسط کاربر نادیده گرفته می شود. همچنین بسیاری از کاربران موبایل برای ذخیره ی باتری تلفن شان نور صفحه را کم می کنند که وضعیت را چند برابر بدتر می کند.

مثال هایی از کنتراست بد (پایین) و کنتراست خوب (بالا)

7. طراحی سبک

کاربران موبایل همیشه به WiFi دسترسی ندارند و اپرتورهای تلفن همراه نیز همیشه آنتن دهی خوبی ندارند به همین دلیل این دسته از کاربران معمولا با مشکلاتی از قبیل نقص اتصال، سیگنال با قدرت کم، سرعت اینترنت پایین و ... دست و پنجه نرم می کنند. این مسئله یعنی طراحی شما و کدهایتان باید در حد ممکن ساده و سبک باشد (قطعا زیر 100kb) بنابراین تا حد ممکن تصاویر خود را بهینه سازی کنید تا از حد مجاز آن تجاوز نکنید. مطمئن باشید اگر بارگذاری ایمیل شما طول بکشد کاربران آن را می بندند.

نکته: همیشه از attribute ای به نام alt استفاده کنید تا در صورتی که به هر دلیلی تصاویر شما در تلفن کاربر باز نشد، کاربر بفهمد آن تصویر چه بوده است. این مسئله در وب سایت ها در زمینه ی سئو نیز موثر است.

8. سایت واکنش گرا

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

9. کدهای موبایلی

دستگاه های iOS (آیفون ها، آیپد ها و دیگر دستگاه های Apple) ممکن است ایمیل شما را کمی تغییر دهند و تصاویر را به شکل عجیب و غریبی نمایش دهند. اضافه کردن کد زیر به head ایمیل باعث جلوگیری از چنین اتفاقی می شود:

<meta name="x-apple-disable-message-reformatting" />

همچنین اضافه کردن کد زیر به کد های CSS خود باعث می شود Apple قسمت های دلخواه ایمیل را highlight نکند:

a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}

دستگاه های سامسونگ هم لینک ها را highlight کرده و رنگشان را به آبی تغییر می دهند. همچنین برخی مواقع به آن ها underline اضافه می کنند که تمامی این موارد با کد CSS زیر حل می شود:

#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}

10. تست ایمیل

شاید مسئله ی تست کردن ایمیل ها، پیش پا افتاده به نظر برسد اما بسیاری از اوقات فراموش می شود. بهتر است قبل از ارسال ایمیل یک نسخه ی آزمایشی از آن را به گوشی خود و چند نفر از دوستانتان ارسال کنید و ببینید ظاهر آن چطور نمایش داده می شود. بهتر است چند client ایمیل نصب کنید (مثلا Gmail و Outlook و ...) تا ظاهر ایمیل را در آنجا نیز ببینید. البته سرویس های آنلاینی نیز برای این کار وجود دارند که در صورت نیاز می توانید با خرید آن ها ایمیل هایتان را در آنجا نیز تست کنید. همچنین هیچ گاه بهینه سازی را فراموش نکنید.

امیدوارم این مقاله به شما کمک کرده باشد.