مقایسه طراحی مقیاس پذیر (Scalable) با طراحی واکنشگرا (Responsive) در ایمیل
در روزگاری نه چندان دور، تنها کاری که بازاریاب های فعال در حوزه ایمیل مارکتینگ باید انجام می دادند این بود که اطمینان پیدا کنند که قالب HTML ایمیل شان در رایانه های رومیزی یا دسکتاپ شکل و شمایل خوبی دارد. همین و بس.
اما امروزه اوضاع کاملاً فرق کرده است. با توجه به افزایش روزافزون کاربران موبایل و دستگاه های همراه، نیاز به ارائه بهترین تجربه در هر دو محیط دسکتاپ و موبایل به یک ضرورت غیرقابل انکار تبدیل شده است. در عین حال، هنگامی که به دنبال راه اندازی کمپین ایمیل مارکتینگی هستید که در همه صفحات نمایش دستگاه های مختلف به بهترین شکل ممکن به نمایش در می آید، باید ملاحظات بیشتری را مد نظر داشته باشید.
به طور کلی، برای نمایش درست محتوا در دستگاه های مختلف، از دو روش می توان استفاده کرد: طراحی مقیاس پذیر (Scalable) و طراحی ریسپانسیو یا واکنشگرا (Responsive). اما این دو روش چه تفاوتی دارند و شما باید کدامیک را انتخاب کنید؟ در ادامه این مطلب از مجموعه مقالات آموزش ایمیل مارکتینگ مجله گویا آی با ما همراه باشید تا به پاسخ به این سوالات بپردازیم:
-
طراحی مقیاس پذیر
ساده ترین و آسان ترین روش برای اطمینان از اینکه شکل و شمایل پیام شما از حالت دسکتاپ به درستی به حالت موبایل انتقال پیدا می کند و امکان خواندن و کلیک همچنان به راحتی وجود دارد، همین روش طراحی مقیاس پذیر است. همانطور که از نام این روش بر می آید، در این حالت اندازه کلی ایمیل شما متناسب با اندازه صفحه نمایشی که در آن نمایش داده می شود تغییر می کند. این تغییر با استفاده از طراحی تک ستونه و استفاده از فونت ها و تصاویر بزرگتر برای خوانایی بهتر امکانپذیر می شود. این نوع از طراحی بر پایه یک سیستم مشبک (Grid) انجام می گیرد که کوچک و بزرگ شدن بدون مشکل اندازه و چارچوب طرح را امکانپذیر می سازد.
-
طراحی واکنشگرا
طراحی واکنشگرا روش بسیار حرفه ای تری است که به کار بیشتری هم نیاز دارد. در این روش، از طراحی و کدنویسی پیشرفته تری استفاده می شود و برای تغییر اندازه و تنظیم طرح و جایگزینی فونت ها و تصاویر با توجه به صفحه یا پلتفرمی که از آن برای مشاهده ایمیل استفاده می شود از مدیا کوئری (media queries) استفاده می شود.
طراحی واکنشگرا برای تعریف نحوه نمایش مولفه های HTML از مدیاکوئری های درون استایل شیت بر طبق دستگاه مورد استفاده کاربر استفاده می کند. به طور ساده و خلاصه، با توجه به اندازه صفحه نمایش، از استایل های متفاوتی برای اندازه های مختلف استفاده می شود تا HTML به درستی و به تناسب پیاده سازی شود.
احتمالاً این سوال برای شما مطرح شده که با توجه به حرفه ای تر بودن روش طراحی واکنشگرا، اصلاً نیازی به مقایسه این دو روش نیست و بدون هیچ تردیدی باید طراحی واکنشگرا را انتخاب کنید. اما هر کدام از این روش ها مزایا و معایب خاص خودشان را دارند که اطلاع از آنها احتمالاً می تواند تصمیم شما برای انتخاب آنها را تحت تاثیر قرار بدهد:
طراحی مقیاس پذیر
مزایا
- در همه دستگاه ها کار می کند
- در همه دستگاه ها به یک شکل به نمایش در می آید
- کار طراحی و کدنویسی آن ساده تر است
- مدیریت، تست و ویرایش آن هم آسان تر است
معایب
- اصالتاً مخصوص طراحی برای محیط موبایل نیست
- امکان پیاده سازی پیچیدگی ها و ظرافت های خاص در طراحی، محدود است
اگرچه استفاده از این طراحی مخصوصاً برای افرادی که به تازگی به حوزه ایمیل مارکتینگ قدم گذاشته اند می تواند انتخاب خوبی باشد، اما به منظور بهره برداری حداکثری از این نوع از طراحی باید به چند مورد توجه داشته باشید:
- سادگی طراحی را حفظ کنید – استفاده از طرح تک ستونه اجباری است؛
- با استفاده از فونتهای بزرگتر (فونت ۱۴ بهترین گزینه است) و حتی فراخوان به عمل های واضح تر و بزرگتر، محیط و محتوا را ساده تر کنید؛
- به منظور جلوگیری از طویل شدن ایمیل در بُعد طولی، از تصاویر کمتر و متن خلاصه تری استفاده کنید.
طراحی واکنشگرا
مزایا
- گزینه های بسیار بیشتری را در اختیار شما قرار می دهد؛
- می تواند باعث افزایش تعامل و واکنش مخاطبان شود؛
- تجربه کاربری بهتری را رقم می زند؛
- بهترین گزینه برای افرادی است که ترافیک ارسال بالایی دارند.
معایب
- کدنویسی آن پیچیده تر است؛
- تولید کار نهایی به زمان بیشتری نیاز دارد؛
- تکنولوژی خاصی دارد و روی همه دستگاه ها به شکل مطلوب پیاده نمی شود. به علاوه، برخی از برنامه های مدیریت ایمیل اصلاً از مدیاکوئری پشتیبانی نمی کنند.
این نوع از طراحی برای بازاریاب هایی که محتوای زیاد یا چندین پیشنهاد در خبرنامه ایمیلی خود دارند بهترین گزینه است، چرا که با توجه به دستگاه مورد استفاده کاربر، آیتم های مورد نظر فرستنده با چارچوب مورد نظر به درستی به نمایش در می آیند. طراحی قالب ایمیل واکنشگرا به شما امکان می دهد تا بدون تغییر محتوا، برای نمایش یا عدم نمایش آیتم های محتوایی شرط بگذارید. با استفاده از مدیاکوئری، کنترل خارق العاده ای بر نمایش محتوای مورد نظر در دستگاه های موبایل خواهید داشت، از جمله:
- طرح و چارچوب نمایش
- تغییر فونت
- تغییر رنگ ها
- تغییر اندازه تصاویر
- امکان انتخاب نمایش یا عدم نمایش یک آیتم در صورت کوچکتر شدن صفحه نمایش و مواردی از این قبیل.
استفاده از کدام مورد برای کسب و کار شما مناسب تر است؟
تصمیم گیری در رابطه با انتخاب یکی از دو روش مقیاس پذیر یا واکنشگرا کار آسانی نیست و بیشتر به این بستگی دارد که چقدر در طراحی HTML مهارت دارید، چه محتوایی را می خواهید ارائه کنید و مایلید که سبک و سیاق نمایش آن محتوا به چه نحوی باشد. در طرح های ساده که افزایش اندازه فونت و استفاده از چارچوب یک ستونه، تمام آن چیزی است که برای نمایش مناسب محتوا در موبایل به آن نیاز دارید، استفاده از طراحی مقیاس پذیر گزینه مناسبی است. از طرف دیگر، محتوای متراکم و پیچیده به گزینه های بیشتری برای خوانایی مناسب نیاز خواهد داشت که طراحی مقیاس پذیر نمی تواند آنها را در اختیار شما قرار بدهد، مخصوصاً برای قالب هایی که بیش از یک ستون دارند.
تنها هشداری که باید در رابطه با کار کردن با کد واکنشگرا و مدیاکوئری به شما بدهیم این است که اگر مرتباً قالب یا ساختار طرح خود را ویرایش می کنید، احتمال به هم ریختن HTML شما بیشتر خواهد بود و همین باعث می شود که محتوا در برخی از دستگاه ها یا سیستم ها به درستی به نمایش در نیاید.
بنابراین کاری که باید انجام بدهید این است که بیشتر و بیشتر تست کنید. البته به خاطر داشته باشید که ابتدا باید تحقیق کنید و ببینید که مشتریان بازار هدف شما برای مشاهده ایمیل ها بیشتر از چه دستگاه هایی استفاده می کنند تا بیشتر روی همان دستگاه ها و پلتفرم ها تمرکز کنید.
در هر صورت، اگر می دانید که اغلب ایمیل های شما در محیط موبایل خوانده می شوند و به دنبال آن هستید که بهترین تجربه کاربری را برای مشتری رقم بزنید، بدون شک طراحی واکنشگرا چیزی است که باید آن را مد نظر قرار بدهید. چنانچه باز هم تردید دارید، قالب های مختلف HTML را امتحان کنید تا پیش از انتخاب نهایی یک گزینه برای استراتژی ایمیل مارکتینگ خود ببینید که مخاطبان شما چگونه به آنها واکنش نشان می دهند.