ابزارهای بازاریابی از طریق ایمیل, بازاریابی ایمیلی, وبسایت و پروفایل شخصی داود جمیری

راهنمای ساده ایجاد ایمیل HTML [+ الگوی رایگان]

هنگامی که با استفاده از کشیدن و رها کردن یا ابزار مبتنی بر ماژول ایمیل می سازید ، در حقیقت یک ایمیل HTML ایجاد می کنید.

دو نوع ایمیل اصلی وجود دارد که می توانید ارسال و دریافت کنید: ایمیل های متنی ساده (این دقیقاً همان چیزی است که به نظر می رسد – هر ایمیل حاوی متن ساده و قدیمی بدون قالب بندی) و ایمیل های HTML که با استفاده از آنها قالب بندی و سبک می شوند HTML و CSS آنلاین .

تشخیص ایمیل های HTML آسان است – بیشتر ایمیل های بازاریابی چندرسانه ای سبک وار در صندوق ورودی شما ایمیل های HTML هستند.

Download Now: Email Marketing Planning Template 

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

اینجا به نظر می رسد که یک HTML در قسمت جلویی چیست. بر روی دکمه HTML کلیک کنید تا کد پشت آن را مشاهده کنید.

به قلم الگوی ایمیل HTML از HubSpot توسط کریستینا پریکون (hubspot ) در CodePen .

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

نحوه ایجاد ایمیل HTML

خبر خوب: در واقع نیازی به دانستن نحوه کدگذاری برای ایجاد ایمیل HTML ندارید.

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

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

هنوز می خواهید یک ایمیل HTML از ابتدا ایجاد کنید؟

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

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

برای ایجاد ایمیل HTML کاملاً از ابتدا ، باید دانش پیشرفته ای در مورد HTML داشته باشید (یا با توسعه دهنده ای که این کار را انجام می دهد کار کنید). این راهنما در حال توسعه یک ایمیل HTML به طور خاص برای HubSpot؟

اگر در حال ساخت یک الگوی ایمیل HTML به طور خاص برای استفاده در HubSpot هستید ، می خواهید مطمئن شوید که نشانه های HubL مورد نیاز (این اطمینان می دهد که ایمیل های شما سفارشی می شوند و با می تواند- spam ). می توانید یک راهنمای کدگذاری HubSpot ویژه نامه های ایمیل HTML در اینجا یا به صورت جایگزین ، فقط از آنچه ما می بینید چیست-می بینید-چه-شما-دریافت می کنید ویرایشگر ایمیل .

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

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

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

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

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

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

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

می توانید راهنمای عمیق تر را پیدا کنید به بهترین شیوه های ارسال نامه الکترونیکی تلفن همراه در اینجا .

2. مطمئن شوید که استایل شما در سرویس گیرنده های ایمیل مختلف کار می کند.

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

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

همچنین می توانید مقاله ای را که در مورد بهینه سازی ایمیل ها برای سرویس گیرنده های ایمیل مختلف .

3 از مدت زمان بارگیری ایمیل های HTML خود آگاه باشید.

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

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

از تصاویر به میزان کم استفاده کنید.

به این ترتیب پیامی را که می خواهید برای مشترکان ارسال کنید تقویت می کنید. همیشه از كمپرسور تصویر استفاده كنید (مانند Compressor.io ) تا آنجا كه ممكن است اندازه پرونده را كاهش دهید. اکثر کمپرسورهای تصویر می توانند به میزان قابل توجهی اندازه پرونده یک تصویر را کاهش دهند بدون اینکه کیفیت را تحت تأثیر قرار دهند ، بنابراین برداشتن این مرحله اضافی به سلامت بصری ایمیل شما آسیب نمی رساند.

از قلم های استاندارد وب استفاده کنید.

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

مشتری ایمیل بیشتر قسمتهای خود را بررسی کنید و بررسی کنید مشترکانی که استفاده می کنند از قلم خاصی پشتیبانی می کنند.

یک کوچک کننده HTML را امتحان کنید.

یک کوچک کننده HTML (مانند minifycode.com و smallseotools.com ) به طور خودکار کدی را که در یک فایل HTML مورد نیاز نیست حذف می کند. عناصر تکراری و اضافی از بین می روند ، اما ارائه واقعی ایمیل شما باید ثابت بماند (همیشه آن را امتحان کنید!). هر خط کد بر زمان بارگیری یک ایمیل تأثیر می گذارد ، بنابراین اختصاص دادن زمان برای حذف کد ناخواسته می تواند تأثیر مثبتی در زمان بارگیری داشته باشد.

پیام خود را بر روی یک هدف متمرکز نگه دارید.

بهترین راه برای کاهش زمان بارگذاری ایمیل ، کاهش میزان محتوایی است که به هر ایمیل ارسال می کنید. ممکن است بدیهی به نظر برسد ، اما بسیاری از بازاریابان سعی می کنند محتوای بیش از حد را در ایمیل های خود وارد کنند. این امر نه تنها منجر به تجربه کاربری مبهم (کسی نمی خواهد رمان را به صورت ایمیل بخواند) ، بلکه می تواند زمان بارگیری شما را از نمودارها خارج کند و باعث شود کاربران ایمیل شما را رها کنند. این کار را ساده انجام دهید و کاربران شما از شما تشکر خواهند کرد.

4 برای ناسازگاری کاربر نهایی (تا آنجا که می توانید) برنامه ریزی کنید.

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

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

اما لازم نیست در برابر این متغیرها کاملاً درمانده باشید – فقط باید کمی پیش برنامه ریزی کنید.

ایجاد یک صفحه وب از ایمیل خود را در نظر بگیرید.

این نوعی مانند دادن دکمه ایمن به خطای ایمیل است. اگر به دلایلی – به دلیل یکی از فاکتورهای فوق الذکر که در بالا ذکر شد – ایمیل شما با محبت و عشق طراحی شده کاملاً بهم ریخته است هنگامی که مشترک آن را باز می کند ، حداقل گزینه “مشاهده به عنوان صفحه وب” و مشاهده ایمیل به عنوان شما در نظر داشتید که باشد.

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

یک نسخه متن ساده از ایمیل خود ایجاد کنید.

نسخه متنی دقیقاً همان چیزی است که به نظر می رسد – یک نسخه جایگزین از ایمیل HTML شما که به صورت کاملاً ساده ارائه می شود. افزودن یک نسخه متن ساده از ایمیل HTML شما مهم است زیرا برخی از سرویس گیرندگان ایمیل و تنظیمات کاربر نمی توانند HTML را بارگیری کنند (یا انتخاب نکنند).

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

بیشتر ابزارهای ایمیل مانند HubSpot به طور خودکار یک نسخه متنی ساده را ارائه می دهد که در صورت نیاز سرور ایمیل گیرنده به آن ، نمایش داده می شود ، اما اگر از ابتدا ایمیل یک HTML را کد می کنید ، باید چیزی به نام یک پیام MIME چند بخشی

.

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

اطمینان حاصل کنید که اگر تصاویر بارگیری نمی شوند ایمیل شما هنوز منطقی است.

بارگیری خودکار تصویر در برخی از کاربران خاموش است ، به این معنی که وقتی ایمیل شما را باز می کنند بدون تصویر آن را می بینند. به همین دلیل ، برای انتقال معنای پیام خود کاملاً به تصاویر اعتماد نکنید و همیشه alt-text به تصاویری که شامل می شوید. متن Alt بارگیری می شود حتی در صورت عدم وجود تصاویر ، بنابراین مشترکان شما می توانند ایده کلی آنچه شامل تصاویر می شود را بدست آورند.

5. آزمایش کامل انجام دهید.

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

برخی از ابزارهای ایمیل (مانند HubSpot) برای ایجاد سهولت روند ، تست درون برنامه ای را در سازندگان ایمیل خود ارائه می دهند. اگر از ابتدا کار می کنید ، می توانید از ابزاری مانند بررسی ایمیل HTML HTML یا PreviewMyEmail تا ایده بهتری از شکل ظاهری ایمیل شما در سرویس گیرنده ها و دستگاه های مختلف ایمیل بدست آورید.

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

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

1 الگوی ایمیل HTML رایگان HubSpot

Free HTML email template by HubSpot

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

2. الگوی ایمیل HTML اخبار شرکت توسط Campaign Monitor

Free HTML email template by Campaign Monitor این الگوی مدرن پیچیده و حداقل است. پالت رنگی ظریف و طراحی ساده آن را به گزینه ای متنوع برای بسیاری از صنایع و اهداف مختلف تبدیل کرده است و برای اطمینان از تجربه کاربری مداوم در سیستم عامل های مختلف ، در رایانه های مختلف ایمیل و دستگاه های مختلف آزمایش شده است.

3 الگوی ایمیل HTML رایگان توسط Unlayer

Free HTML email template by Unlayer

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

4 الگوی ایمیل HTML رایگان MINImalist

Free HTML email template by Mail Bakery

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

5. الگوهای ایمیل HTML رایگان از Bee Free

Free HTML email template library by Bee Free

این مجموعه از الگوهای منبع آزاد رایگان کاملاً پاسخگو بوده و در کلاینت های رایج محبوب آزمایش شده اند. می توانید آنها را در بستر Bee Free ویرایش کرده و بر روی آنها بسازید ، سپس فایل HTML را به درایو محلی خود صادر کنید.

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

6. الگوی ایمیل HTML رایگان توسط Campaign Monitor Free HTML email template by Campaign Monitor advertising a discount code

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

برای افزایش تعداد مشترکین خود ایمیل های HTML ایجاد کنید

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

یادداشت سردبیر: این پست در ابتدا در ژوئن 2019 منتشر شد و برای جامعیت به روز شده است.

New Call-to-action دهانه>

نوشته ها مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *