۱۳ نکته مهم برای طراحی بهترین ایمیل های HTML

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

 

از چه پیشرفت هایی صحبت می کنیم؟

بزرگترین پیشرفت، شکل گیری پروژه استاندارد ایمیل (Email Standard Project) است. در این پروژه گروه های مختلف درگیر در مبحث ایمیل با هم همکاری می کنند تا با کمک توسعه دهنده ها و طراحان، روش نمایش ایمیل ها توسط برنامه ها و سیستم های مختلف استانداردسازی و هماهنگ شود. این به آن معنی است که ما به سمت ایجاد یک استاندارد هماهنگ برای نمایش HTML و CSS در ایمیل حرکت می کنیم و دردسرهای مربوط به تهیه ایمیل های HTML زیبا را باید به خاطره ها بسپاریم. یکی دیگر از پیشرفت های مهم در این عرصه، ارائه سرویس هایی است که امکان تست کمپین های ایمیل مارکتینگ در برنامه های دسکتاپ، موبایل و همچنین برنامه های مبتنی بر وب را فراهم می کنند. به خاطر داشته باشید که آزمودن یا همان تست کردن ایمیل ها برای کسب اطمینان از اینکه در همه محیط ها و رابط های کاربری به درستی به نمایش در می آیند ضروری است. بسیاری از این سرویس ها حتی امکان بررسی احتمال شناسایی هر ایمیل به عنوان اسپم را نیز مهیا می کنند که برای هر کمپین ایمیل مارکتینگی لازم و کارساز است. مورد دیگری که در دسترس طراحان و بازاریاب ها قرار گرفته، قالب های استاندارد و جذاب HTML است. از این طریق، حتی بدون اینکه از کدنویسی سررشته ای داشته باشید می توانید به راحتی ایمیل های جالب و جذابی را تهیه کنید.

استفاده از قالب به جای کدنویسی

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

 

  1. از طراحی واکنشگرا یا ابعاد بزرگ استفاده کنید

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

 

  1. عرض ایمیل را در مرز ۶۰۰ پیکسل یا کمتر حفظ کنید

این مورد تقریباً به یک استاندارد برای طراحی قالب تبدیل شده است، اما قبلاً به این دلیل توصیه می شد که با محدود کردن نیاز به اسکرول به دو طرف در بخش نمایش ایمیل برخی از برنامه های ایمیل خوان، مانند Outlook و Thunderbird، نمایش ایمیل را تسهیل می کند.

 

  1. به جای <div> از <table> و <td> استفاده کنید

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

 

  1. کاهش حجم فایل ها

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

 

  1. فقط از فایل های PNG، JPEG و GIF استفاده کنید

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

 

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

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

 

  1. همیشه از display: block برای تصاویر استفاده کنید

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

 

  1. هرگز از حاشیه استفاده نکنید

هاتمیل و سایت Outlook، پشتیبانی از حاشیه (Margin) در همه مولفه های HTML را متوقف کرده اند. اگر چه استفاده از قابلیت padding دقیقاً مثل حاشیه عمل نمی کند، اما برای نیل به منظور مورد نظر می توانید از آن در td ها استفاده کنید.

 

  1. از فونت های web-safe استفاده کنید

برخی از برنامه های ایمیل خوان از همه فونت ها پشتیبانی نمی کنند، بنابراین در مبحث فونت ها از فونت های به اصطلاح web-safe  و رایج استفاده کنید.

 

  1. ALT text اهمیت دارد

از اتکای بیش از حد به تصاویر خودداری کنید و بیشتر به متن و متن جایگزین یا alt text از تگ ویژگی های تصویر توجه داشته باشید. بسیاری از برنامه های مدیریت ایمیل در حالت پیشفرض اصلاً تصاویر را بارگذاری نمی کنند و بسیاری از مردم هم اصلاً برای دانلود تصاویر به خودشان زحمت نمی دهند، بنابراین قسمت alt text تصاویر را خالی نگذارید. توجه داشته باشید که حتی امکان استایل دهی به این بخش هم وجود دارد.

 

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

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

 

  1. از استایل های درون خطی (inline styles) استفاده کنید

این استایل ها بر استایل های لایه های بیرونی تقدم پیدا می کنند و علاوه بر این، برنامه های ایمیل خوان مرورگر محور، مانند جیمیل و هاتمیل که تگ های DOCTYPE، BODY و HEAD را حذف می کنند را دور می زنند.

 

  1. یک pre-header یا متن پیش نمایش اضافه کنید

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

 

  1. قانون طلایی: امتحان کنید و به اجرای تست روی ایمیل های خود ادامه بدهید

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

چک لیست نهایی تست ایمیل ها

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

  1. آیا آدرس فرستنده قابل مشاهده است؟
  2. آیا یک لینک به نسخه اینترنتی ایمیل در بالای آن وجود دارد؟
  3. آیا از عنوان مناسبی استفاده کرده اید؟
  4. آیا متن را برای پیداکردن غلط های املایی احتمالی بررسی کرده اید؟
  5. آیا یک لینک لغو اشتراک در انتهای ایمیل وجود دارد و آیا این لینک به درستی کار می کند؟
  6. آیا طراحی شما کاملاً واکنشگرا است؟
  7. آیا همه لینک های ایمیل به درستی کار کرده و کاربر را به صفحات فرود مربوطه هدایت می کنند؟
  8. آیا برای همه تصاویر از alt text یا متن جایگزین استفاده کرده اید؟
  9. آیا برای اطمینان از نمایش درست ایمیل خود در برنامه ها و پلتفرم های مختلف، آن را تست کرده اید؟
  10. آیا ایمیل شما عاری از ویژگی های رایج ایمیل های اسپم است؟

 

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

 

برای کار در حوزه تکنولوژی باید این دو زبان برنامه نویسی را یاد بگیرید

اگر می خواهید در حوزه تکنولوژی کار کنید باید این دو زبان برنامه نویسی را یاد بگیرید: HTML  و CSS

توسعه دهنده ی وب در حال حاضر به عنوان سومین شغل برتر در حوزه ی تکنولوژی و به طور کلی ۲۰ امین شغل برتر در ایالات متحده رتبه بندی شده است. با حقوقی متوسط رو به بالا، بازار کار زیاد و توانایی برای بروز خلاقیت دور از انتظار نیست که روز به روز به تعداد متقاضیان این حرفه و کسب و کار افزوده شود.

اگر می خواهید در حوزه تکنولوژی کار کنید باید این دو زبان برنامه نویسی را یاد بگیرید: HTML  و CSS

پاسخ به این سوال که “اول از همه کدام زبان برنامه نویسی را باید یاد بگیرم؟” به طور گسترده ای مورد بحث قرار گرفته و عمدتا به این بستگی دارد که با این کد می خواهید چه کاری انجام دهید. اگر شما به دنبال ساخت یک وب سایت از ابتدا و توسعه ی دانش و پایه ای قوی از مفاهیم برنامه نویسی هستید و بدین ترتیب می خواهید یادگیری زبان های دیگر برنامه نویسی را برای خودتان ساده و روان کنید، HTML5 و CSS3 دو زبان ارزشمند هستند که می توانید یادگیری زبان های برنامه نویسی را با آنها شروع کنید.

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

بدین ترتیب می توانید گام های اولیه برای شروع کسب و کار اینترنتی خود را بردارید.

.

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

.

منبع: businessinsider


عصر تکنولوژی، تکرا

نوشته برای کار در حوزه تکنولوژی باید این دو زبان برنامه نویسی را یاد بگیرید اولین بار در عصر تکنولوژی - تکرا پدیدار شد.

مرورگر مایکروسافت Edge در برابر رقبا؛ کدام‌یک برای وب‌گردی بهتر است؟!

 


edge-logo-full-02_storyهنگامی‌که در حال مرور صفحات اینترنت هستید، چند موضوع حائز اهمیت است؛ برای‌مثال، اینکه مرورگرها چه‌قدر می‌توانند سریع صفحات را بارگذاری نمایند. نزدیک به‌نیمی از کاربران، انتظار دارند سرعت بارگذاری صفحات 2 ثانیه یا کم‌تر باشد. به‌همین دلیل است که مرورگر گوگل‌کروم در بین کاربران، طرفداران زیادی دارد.

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

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

در اولین سری از بنچمارک‌ها، ما برروی این‌که مرورگرها چگونه جاوا اسکریپت‌ها را مدیریت می‌کنند، تمرکز کرده‌ایم. جاوا اسکریپت، هسته اصلی وب مدرن است. هنگامی‌که سایت سنگینی را باز می‌کنید، ده‌ها اسکریپت اجرا می‌شود. هنگامی‌که مرورگر شما در جاوا اسکریپت‌ آهسته باشد، بارگذاری صفحات اینترنتی بسیار آهسته خواهد بود. برای همین، بخش اول را به “جاوا اسکریپت” اختصاص داده شده است. بررسی عملکرد مرورگرها را در مدیریت جاوا اسکریپت به‌عهده‌ بنچمارک‌های Octane، JetStream و Kraken سپرده شده. جالب است بدانید که برخی از این بنچمارک‌ها توسط رقبای مایکروسافت و نه‌خود مایکروسافت (!) به‌منظور ارزیابی عملکرد مرورگرها در مدیریت جاوا اسکریپت ایجاد شده است؛ Octane توسط گوگل و  Kraken توسط سازنده فایرفاکس یعنی موزیلا به‌تولید رسیده است.

07c9c02f22a8e00947e7b438e7db15bb

017a8c295051cb621df341d285ff787f

image-13

به‌طرز جالبی، Edge مایکروسافت توانسته گوگل‌کروم را در JetStream پشت سر بگذارد. البته در سایر بنچمارک‌ها، نتیجه متفاوت است؛ این، نشان می‌دهد که هردو مرورگر نقاط قوت و متمایزی برای مدیریت جاوا اسکریپت‌ها دارند.

cf8848acd7c91aa377222dbd3abe1199

البته سرعتی که یک صفحه‌وب بارگذاری می‌شود، در عملکرد کلی تاثیرگذار است. برای بررسی این مورد، از WebXPRT استفاده شده است که به‌بررسی عملکرد یک مرورگر در مدیریت HMTL و جاوا اسکریپت پرداخته و توانایی هر مرورگر را در اجرای وظایف به‌چالش می‌کشد. در این آزمون‌کلی، ‌ Edge مایکروسافت سایر رقبای خود را کنار زده است. هم‌چنین این مرورگر، 30 امتیاز بیشتر از گوگل‌کروم دریافت کرده که برای اثبات توانایی Edge کافی به‌نظر می‌رسد.

194203d2479fa822f5f3ee4e991a7981(2)

سرانجام، نوبت آزمون HTML 6 فرارسیده؛ آزمونی که نشان می‌دهد یک مرورگر تا چه‌حد می‌تواند از آخرین فناوری‌ها به‌منظور اجرای وظایف دشوار نظیر تماس تصویری و یا انجام بازی‌های سه‌بعدی پشتیبانی می‌کند. نتایج این بررسی، نشان می‌دهد مایکروسافت موفق شده تا حد زیادی عملکرد Edge را در پشتیبانی از آخرین فناوری‌ها ارتقا دهد. البته این مرورگر در مقایسه با رقبا، حرف چندانی برای گفتن ندارد!

در نهایت، به‌نظر می‌رسد گوگل‌کروم و مایکروسافت Edge در ویندوز 10، عملکرد بسیار مشابه‌ای را ارایه می‌دهند. باید امیدوار بود که مایکروسافت توانسته Edge را به‌گونه‌ای توسعه دهد که در برخی بررسی‌ها، بر گوگل‌کروم چیره شود.

متاسفانه، باید عنوان کرد که بررسی و بنچمارک همه‌چیز نیست. بسیاری ترجیح می‌دهند عملکرد یک مرورگر را در استفاده روزمره از اینترنت به‌چالش کشیده و به‌ارقام و اعداد، اعتماد نکنند. در بررسی عملکرد روزانه، متوجه شدیم مرورگر مایکروسافت Edge تاحد زیادی از مشکلی به‌نام “کندی” رنج می‌برد؛ موردی که باعث خواهد شد تا بارگذاری صفحات وب با سرعت آهسته‌تری صورت گیرد. در صفحاتی که تعداد زیادی جاوا اسکریپ دارند، مرورگر مایکروسافت Edge شما را مجبور خواهد کرد تا بارگذاری کامل جاوا اسکریپت‌ها منتظر بمانید. این، خود باعث می‌شود تا فرآیند وب‌گردی با مایکروسافت Edge، به‌کندی صورت پذیرد. اما بقیه مرورگرها در ویندوز 10، چنین مشکلی ندارند. به‌هرحال، نمی‌شود این مشکل را جامعیت داد!

توجه داشته باشید برای بررسی عملکرد مرورگرها از سیستم زیر استفاده شده است:

  • لپ‌تاپ Portege توشیبا با مشخصات سخت‌افزاری نظیر پردازنده اینتل Core i7 4600U با فرکانس 2.4 گیگاهرتز، 8 گیگابایت رم و 256 گیگابایت حافظه SSD

نوشته مرورگر مایکروسافت Edge در برابر رقبا؛ کدام‌یک برای وب‌گردی بهتر است؟! اولین بار در -آی‌تی‌رسان پدیدار شد.