راهنمای نهایی طراحی ایمیل

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

طراحی ایمیل بسیار شبیه طراحی یک صفحه وب ساده است، اما برخی تفاوت‌های کلیدی وجود دارد که باید در نظر بگیرید. همچنین باید به خاطر داشته باشید که ایمیل یک ارتباط فشاری است نه کششی.

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

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

 

موبایل یا نیم تنه

این روزها افراد زیادی از طریق یک دستگاه تلفن همراه به ایمیل دسترسی پیدا می کنند (تقریباً نیمی از ایمیل ها در برنامه های تلفن همراه باز می شوند)، که صرف زمان زیادی برای طراحی ایمیل های زیبا که به درستی در چنین ایمیل هایی نمایش داده نمی شوند، بسیار بی معنی شده است. دستگاه ها.

بالاخره، اگر وقتی ایمیل را در تلفن خود چک می‌کنند درست به نظر نمی‌رسد، احتمال اینکه مشترکین شما وقتی پشت میزشان هستند دوباره به آن نگاه کنند چقدر است؟ من خیلی باریک شرط بندی می کنم. در واقع، بیشتر آنها احتمالاً فقط ایمیل را حذف می کنند، یا بدتر از آن – لغو اشتراک.

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

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

طراحی‌های واکنش‌گرا برای کدنویسی بسیار پیچیده‌تر هستند و توسط هر مرورگر تلفن همراه پشتیبانی نمی‌شوند (اگرچه پشتیبانی احتمالاً در آینده بهبود خواهد یافت).

 

طراحی واکنشگرا

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

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

1. طرح بندی شما باید نسبتاً باریک باشد: جایی در محدوده 500-600 پیکسل استاندارد است. این باعث می‌شود که آن‌ها هم در دستگاه‌های دسک‌تاپ و هم در دستگاه‌های تلفن همراه خواناتر شوند، و با تغییر اندازه طرح‌بندی شما، شانس کمتری برای خراب شدن طرح‌بندی شما وجود دارد.
2. مطمئن شوید که فونت های شما به اندازه کافی بزرگ هستند. از حداقل اندازه فونت برای پلتفرم های مختلف آگاه باشید تا فونت های شما ارتقا پیدا نکنند (که می تواند روی طرح شما تأثیر بگذارد). برای مثال، iOS از حداقل اندازه فونت 13 پیکسل استفاده می کند.
3. مناطق قابل کلیک باید با ضربه زدن سازگار باشند. این بدان معناست که آنها را به اندازه کافی بزرگ کنید و به اندازه کافی از پیوندهای دیگر جدا کنید تا کاربر بتواند به راحتی آنها را در اولین تلاش فعال کند (زیرا ممکن است دومی دریافت نکنید).
4. دریغ نکنید از display:none برای پنهان کردن عناصر غیر ضروری در طرح‌بندی تلفن همراه خود استفاده کنید. آنچه روی دسکتاپ یا حتی تبلت کاربر پسند است در تلفن هوشمند به آشفتگی آزاردهنده تبدیل می شود. کمتر در صفحه نمایش های کوچکتر قطعا بیشتر است.

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

ملاحظات تایپوگرافی

در حالی که بسیاری از طراحان بر محتوای گرافیکی ایمیل های HTML تمرکز می کنند، تایپوگرافی حتی از بسیاری از وب سایت ها مهم تر است. از این گذشته، با در نظر گرفتن تعداد مشتریان ایمیل از بارگیری اولیه تصاویر، برخی از گیرندگان ایمیل شما ممکن است فقط تایپوگرافی را ببینند.

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

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

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

 

ایمیل های مختلف برای اهداف مختلف

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

خبرنامه

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

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

reel=”lastyex طراحی سرگرم کننده و جذاب است.

اعلان ها

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

این هم یک ایمیل اعلامیه از 

ایمیل های معاملاتی

ایمیل‌های تراکنش زمانی ارسال می‌شوند که کاربر به نحوی با یک وب‌سایت یا شرکت تعامل داشته باشد. این می تواند خرید یا ثبت نام برای چیزی باشد، یا ممکن است با چیزی مانند زمانی که کاربر سبد خرید خود را بدون تکمیل تراکنش رها می کند، ایجاد شود. این ایمیل‌ها یا برای ارائه اطلاعات (در مورد چیزی مانند تأیید سفارش) یا برای جذب بازدیدکننده (مانند یک سبد خرید رها شده) هستند.

در اینجا یک مثال خوب از یک ایمیل تراکنشی از One Eyed Cat. این نمونه خوبی است از اینکه چگونه کسب‌وکارها می‌توانند از بازاریابی ایمیلی استفاده کنند.

ایمیل های بازاریابی

ایمیل های بازاریابی زمانی ارسال می شوند که یک شرکت از شما بخواهد با آنها تجارت کنید. اینها ممکن است به شما اطلاع دهند از یک پیشنهاد ویژه، یک محصول جدید یا چیزی مشابه. اینها اغلب ایمیل هایی هستند که بیشترین “طراحی” را از ایمیل های معمولی که ممکن است یک شرکت ارسال کند را در خود جای دهد.

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

Community ایمیل بازاریابی که مثال خوبی دیگر از این است که چگونه کسب و کارها می توانند از ایمیل برای جذب مشتریان خود استفاده کنند.

 

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

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

همه چیز مربوط به محتوا است

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

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

Call-to-action را پاک کنید

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

Call-to-Action اغلب به شکل دکمه‌ها است. باید فورا قابل شناسایی باشد، و نه چندان دور از ایمیل (در نهایت، شما فقط چند ثانیه فرصت دارید تا توجه آنها را جلب کنید، بنابراین قرار دادن فراخوان خود در جایی که آنها آن را در عرض چند ثانیه ببینند، شانس شما را افزایش می دهد تا توجه آنها را جلب کنید. موثر بودن).

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

اوایل تست کنید، اغلب تست کنید

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

آزمایش اغلب به این معنی است که اگر اشکالات ظاهر شوند، ردیابی سریع‌تر انجام می‌شود، زیرا به یاد آوردن تغییراتی که اخیراً انجام داده‌اید، راحت‌تر خواهید بود.

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

از متن پیش‌هدر استفاده کنید

متن پیش‌هدر در بسیاری از سرویس گیرندگان ایمیل به عنوان پیش‌نمایش پیام نمایش داده می‌شود. این را به اندازه موضوع ایمیل خود مهم ببینید. از آن برای ترغیب خواننده خود برای باز کردن ایمیل استفاده کنید. این می تواند به ویژه مفید باشد زیرا بسیاری از مشتریان ایمیل خطوط موضوعی طولانی را کوتاه می کنند.

پیوند به نسخه میزبان وب

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

ساده نگه دارید

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

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

 

قالب ها و چارچوب ها

در حالی که کدنویسی یک ایمیل HTML کاملاً از ابتدا کاملاً قابل انجام است (مقاله قبلی ما را بررسی کنید ” نحوه طراحی یک ایمیل HTML پاسخگو” برای جزئیات بیشتر در مورد جنبه های فنی)، استفاده از یک فریم ورک یا دیگ بخار برای شروع، یا حتی یک الگوی از پیش ساخته شده، می تواند روند را تا حد زیادی سرعت بخشد و آن را برای کاربران قابل دسترسی تر کند. طراح مبتدی.

سربروس

Cerberus مجموعه ای از الگوهای ایمیل پاسخگو است که حتی در Outlook و جیمیل موبایل می توانید از بلوک های کد با هم یا جداگانه استفاده کنید. دو نسخه وجود دارد: یکی که به پرسش‌های رسانه‌ای متکی است و دیگری که اینگونه نیست.

جوهر

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

الگوهای ایمیل پاسخگو ساخته شده بر روی Ink

این الگوهای ایمیل پاسخگو ساخته شده بر روی Ink مکانی عالی برای شروع هستند با جوهر. چهار الگو وجود دارد: یک ستون اصلی، یک ایمیل با تصویر قهرمان، یک طرح بندی نوار کناری، و یک طرح ترکیبی نوار کناری-قهرمان.

الگوهای ایمیل پاسخگو

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

الگوهای ایمیل پاسخگو

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

الگوی ایمیل بسیار ساده HTML

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

سازنده قالب

CampaignMonitor Template Builder به شما امکان می دهد قالب های ایمیل رایگان HTML را فقط در مدت زمان کوتاه بسازید. دقیقه نتایج برای تلفن همراه آماده هستند، کاملاً آزمایش شده‌اند و می‌توانند مستقیماً در CampaignMonitor استفاده شوند یا برای استفاده در جاهای دیگر دانلود شوند.

الگوهای ایمیل رایگان

این الگوهای ایمیل رایگان از CampaignMonitor برای دانلود و استفاده رایگان هستند آیا از CampaignMonitor استفاده می کنید یا نه. تعداد زیادی سبک و طرح موجود است که در کل بیش از 100 مورد وجود دارد.

HTML Email Boilerplate نسخه 0.5

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

Email Boilerplate

این Email Boilerplate از Emailology شامل تمام اصول اولیه ای است که برای راه اندازی نیاز دارید ایمیل های HTML شما، مانند CSS و HTML. برای ارائه دستورالعمل استفاده به شما نظر داده شده است.

Antwort

Antwort طرح‌بندی‌های پاسخگو ضد گلوله را برای ایمیل‌هایی ارائه می‌دهد که با عرض‌های مختلف کلاینت سازگار هستند. از همه سرویس گیرنده های ایمیل اصلی، از جمله Outlook و Gmail پشتیبانی می کند.

الگوهای خبرنامه GraphicMail

GraphicMail حدود 100 الگوی رایگان خبرنامه را ارائه می دهد. برای استفاده از آنها یک حساب رایگان لازم است.

الگوهای ایمیل ThemeForest

ThemeForest هزاران الگوی ایمیل ممتاز را ارائه می‌کند، از 6 تا 19 دلار استفاده از قالب‌های ممتاز گاهی ساده‌تر است و می‌تواند ویژگی‌های دیگری نیز داشته باشد که در قالب‌های رایگان به سختی به دست می‌آید.

Stamplia

Stamplia یک بازار قالب ممتاز را ارائه می‌کند، جایی که می‌توانید قالب‌هایی را برای خبرنامه‌ها، معاملاتی خرید و فروش کنید. ایمیل‌ها و موارد دیگر.

 

ابزارهای ایمیل

افزونه وردپرس e-Newsletter

افزونه وردپرس e-Newsletter مدیریت حرفه ای را ارائه می دهد از خبرنامه های ایمیل و مشترکین شما درست در رابط مدیریت وردپرس شما. در حالی که خود میزبانی سرویس ایمیل شما می‌تواند مجموعه‌ای از چالش‌ها را به همراه داشته باشد، همچنین کنترل کامل را به شما می‌دهد و هزینه‌های خدمات ماهانه را حذف می‌کند، که ممکن است برای بسیاری از مشاغل بسیار ارزشمند باشد.

تصاویر پس زمینه ضد گلوله

تصاویر پس‌زمینه ضد گلوله از CampaignMonitor یک ابزار ساده برای کدنویسی تصاویر پس‌زمینه ایمیل شما است. فقط URL تصویر پس‌زمینه، رنگ بازگشتی و اینکه آیا برای متن کامل ایمیل است یا فقط یک سلول جدول را وارد کنید، و کد را به شما می‌دهد.

دکمه های ایمیل ضد گلوله

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

لیتلموس

Litmus مجموعه‌ای از ابزارهای ردیابی و آزمایش برای ایمیل است. این شامل پیش نمایش ایمیل، تجزیه و تحلیل، و ابزارهای تست فیلتر هرزنامه است. از 79 دلار در ماه شروع می شود، با برنامه های سالانه تخفیف دار.

دامنه تورنسل

Litmus Scope ایجاد یک نسخه تمیز و مبتنی بر وب را آسان می کند ایمیلی که پس از آن می توانید به اشتراک بگذارید. این برای بارگیری و همچنین به شکل نشانکلت که با هر پست الکترونیکی کار می کند در دسترس است.

 

مثال و الهام

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

نهنگ ها

 

خیابان حراج ترزا

 

بچه ها فروشگاه آنلاین

 

نقطه الهام

 

همه جا

 

کره

 

عملکرد و کلاس فرم

 

بودن