طراحی HTML ایمیل با طراحی HTML سایت‌های وب چه تفاوت‌هایی دارد؟
طراحی HTML ایمیل کار راحتی نیست؛ و هست!
راحت نیست، به این دلیل که کلاینت‌های ایمیلی از تمام تکنولوژی‌های جا افتاده در فضای وب استفاده نمی‌کنند و محدودیت‌هایی زیادی را پیش روی طراحان ایمیل می‌گذارند.
راحت است، به این دلیل که پایه‌ی کار در طراحی ایمیل، HTML است. همان HTML ساده و تگ‌های شیرینی و دوست‌داشتنی!
خیلی از کارهایی که در طراحی وب‌سایت می‌توانید انجام دهید را در طراحی ایمیل نمی‌توانید انجام دهید، چون سرویس‌های بزرگ ایمیلی مثل یاهو و جیمیل و اوت‌لوک، استانداردهای خاصی دارند. یکی از مهم‌ترین کارهایی که به عنوان طراح ایمیل باید انجام دهید این است که مطمئن شوید ایمیلی که طراحی می‌کنید در همه‌ی کلاینت‌های بزرگ ایمیلی درست نمایش داده شود. واقعیت این است که شما ایمیل را برای کاربران‌تان طراحی می‌کنید، نه برای خودتان. به همین دلیل اگر زیباترین ایمیل را هم طراحی کنید و ایمیل‌تان مثلا در سرویس Yahoo Mail به خوبی نمایش داده نشود، به سادگی ۴۰ درصد مخاطبین‌تان را سرخورده می‌کنید.
حدود ۳۰ کلاینت بزرگ ایمیلی در دنیا وجود دارد و هرکدام از این بزرگواران، از موتورهای رندر (Rendering Engines) مخصوص به خود استفاده می‌کنند، ولی اصولی وجود دارد که اگر آنها را رعایت کنید، می‌توانید اطمینان داشته باشید که ایمیل شما تقریبا در همه جا به درستی دیده می‌شود.
محدودیت‌های طراحی HTML ایمیل
بگذارید خیلی ساده مقایسه‌ای بین تفاوت‌های طراحی HTML برای وب و طراحی HTML برای ایمیل داشته باشیم.
به عنوان یک طراح ایمیل، شما باید:
- به جای div باید از table استفاده کنید.
- به جای margins باید از padding استفاده کنید.
- به جای CSS3 محبوب باید از CSS2 استفاده کنید.
- به جای استفاده از HTML5 قدرتمند باید از HTML4 استفاده کنید.
- به جای استفاده از تگ‌های background باید از background-color استفاده کنید.
- به جای استفاده از CSS باید از HTML attributes استفاده کنید.
- به جای استفاده از stylesheet باید از inline CSS استفاده کنید.
این لیست همچنان ادامه دارد و همانطور که می‌بینید، دست و پای شما را خیلی می‌بندد. ولی چاره چیست؟ شما مجبورید ایمیل‌های طراحی کنید که در کلاینت‌های مختلف ایمیلی درست کار کند. و البته مهم‌ترین کلاینت‌ها، دو سرویس جیمیل و یاهو میل هستند و نمایش بهینه‌ی ایمیل در این دو را باید بیش از دیگر سرویس‌ها مورد توجه قرار دهید.
ایمیل‌های گوناگون
مدل‌های مختلفی از کمپین‌های ایمیلی وجود دارد.
ساده‌ترین مدل، ایمیل‌های Plain Text هستند که شبیه به ایمیل‌های مرسومی است که هر روزه به دیگران می‌زنیم. در این ایمیل‌ها خبری از طراحی‌های پیچیده و پر زرق و برق نیست و حتی می‌توان گفت می‌توانید از HTML نیز استفاده نکنید.
رایج‌ترین مدل ایمیل‌هایی که توسط بازاریابان ایمیلی و شرکت‌ها استفاده می‌شود، ایمیل‌های HTML است که با تمرکز روی گریدبندی و طراحی گرافیکی متفاوت، سعی می‌کنند دل و عقل و هوش مخاطبین را به سمت خود بکشانند. صحبت ما در مورد این ایمیل‌هاست.
مدل دیگری از ایمیل‌ها، ایمیل‌های داینامیک است که در دسته‌های مختلفی می‌توان در موردشان صحبت کرد. مثل ایمیل‌های Transactional که وابسته به یک تراکنش یا اتفاقی در پروفایل شما در یکی از سرویس‌ها هستند. مثل ایمیل‌های اتوماتیکی که بانک‌ها پس از انجام یک تراکنش واریزی برای شما ایمیل می‌کنند یا ایمیلی که اسنپ پس از یک سفر برای شما می‌فرستد. این ایمیل‌ها بر اساس داده‌هایی که از دیتابیس دریافت می‌شود، ساخته می‌شوند و برای مخاطبین ارسال می‌شوند. در این ایمیل‌ها با چیزی فراتر از تگ‌های HTML سروکار داریم و فعلا هم محل بحث ما نیست.
درباره‌ی چه موضوعاتی می‌نویسیم؟
به طور خلاصه در این موارد صحبت می‌کنیم:
- تفاوت موتورهای رندر ایمیل در کلاینت‌های بزرگ ایمیلی / جالب است که یکی از کلاینت‌ها حتی از Word به عنوان یک render engine استفاده می‌کند. باور می‌کنید؟!
- MIME multi-part چیست و چرا اهمیت دارد؟
- چگونه از تکنیک‌های old skool web development استفاده کنید تا مطمئن شوید که طراحی ایمیل‌تان به شیوه‌ی صحیحی انجام می‌شود؟
- چگونه بخش خاصی از مخاطبین را با استفاده از conditional statement و media queries هدف قرار دهید؟
- چگونه از کیفیت لینک‌ها و دکمه‌های داخل ایمیل مطمئن شوید؟
- چگونه از امکانات ویژه‌ی جیمیل استفاده کنید تا بتوانید Gmail actions را در خط عنوان ایمیل استفاده کنید؟
- چرا «متن زیرسربرگ» (Preheader text) اهمیت دارد و چگونه از آن استفاده کنید؟
- چه ابزارهایی برای کمک به طراحی وجود دارد؟
- کاربرد گرافیک در طراحی ایمیل چیست؟
- چه راهکارهایی برای استفاده از تایپوگرافی پیشرفته در ایمیل داریم؟
- گریدبندی ایمیل به چه معنی است؟