ساختار پیاده سازی HTML Email Templates

لینک مستقیم تصایر

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

                
<img src="https://blog.mailtrap.io/wp-content/uploads/2018/11/blog-illustration-email-embedding-images.png?w=640" alt="img" />
                
            

رمزگذاری Base64

تعبیه داخلی (Inline Embedding) یک روش ساده و سریعتر برای استفاده از تصاویر است. پس از رمزگذاری تصویر، با استفاده از یک تگ تصویر استاندارد HTML ، می توانید تصاویر خود را درون کد HTML به صورت یک رشته base64 قرار دهید.

                
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB" alt="img" />
    

CID image embedding

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

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

<img src="cid:some-image-cid" alt="img" />

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

Font

به طور معمول استفاده از فونت های استاندارد وب (Web safe fonts) ساده ترین کار است. این فونت ها شامل Arial ، Helvetica و غیره است، در حالی که همچنان می توان از فونت های وب (Web Fonts) نیز استفاده کرد.

گرچه Web Fontها بصورت جهانی پشتیبانی نمی شوند، در اینجا سرویس گیرنده های ایمیل که Web Fonts را پشتیبانی می کنند نام بردیم:

• AOL Mail
• Native Android mail app (not Gmail app)
• Apple Mail
• iOS Mail
• Outlook 2000
• Outlook.com app

پیشنهاد شده است به جای Web Fonts از Web safe fonts استفاده کنید. به منظور جلوگیری از Overwrite شدن سرویس گیرنده های ایمیل از استایل های انتخاب شده، باید از Font families ، font sizes و font colors برای هر <td> استفاده شود.

هنگام استفاده از Web Fonts ، تعریف stack-font مهم است. این باید شامل برخی از Fontهای استاندارد سیستم باشد تا از نمایش صحیح ایمیل خود در سایر سرویس گیرنده های ایمیلی که Web Font‌ را پشتیبانی نمی کنند، اطمینال حاصل کنید. 

     font-name, Helvetica, Arial, sans-serif

برای میزبانی (Host) از فونت های وب سفارشی (Custom Web Font) خود، می توانید از سرویسی مانند Google Fonts استفاده کنید، یا اینکه خود آنها را میزبانی کنید.

مانند کد زیر شما باید فونت را در داخل تگ <style> موجود در Head سند HTML خود قرار دهید:

    
        @font-face {
            font-family: {font-name};
            src: url({http://www.website.com/font-url}) format('woff'),
                 url({http://www.website.com/font-url}) format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    
    

هنگام کار با Outlook، باید font-face@ را در تگ media@ قرار دهید. به این دلیل است که Outlook 2007/ 2010/2017 از آنها پشتیبانی نمی کند. 

    
        @media screen {
            @font-face {
                font-family: {font-name};
                src: url({http://www.website.com/font-url}) format('woff'),
                     url({http://www.website.com/font-url}) format('truetype');
                font-weight: normal;
                font-style: normal;
            }
        }
        
    

در بسیاری از مقالات آمده است هیچ راهی برای نمایش یک فونت وب سفارشی (Custom Web Font) در وب Gmail ، Yahoo یا نسخه های جدیدتر Windows Outlook و همچنین نسخه دسکتاپ آن وجود ندارد.

در نهایت از فونت در سند HTML خود استفاده کنید.

<td style=”font-family: 'OpenSansBold', Helvetica, Arial, sans-serif;”>

Embedded CSS

به طور کلی، سرویس گیرنده های ایمیل از External Stylesheets مانند سبک های بخش <head> پشتیبانی نمی کنند. CSS باید Inline درون سند HTML شما قرار بگیرد. کلاینت های اصلی ایمیل از تگ <link> پشتیبانی نمی کنند، به این معنی که External Stylesheets قابل استفاده نیستند.

Responsive Email Designs

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

    
        @media screen and (max-width:600px) {
            .mobile-text {
            
            font-size: 18px !important;
           
            }           
            }
     

   

بطور کلی طراحی عالی و بدون نقص که در تمامی Client‌ها نمایش صحیح و دلخواه شما را داشته باشند کاری دشوار است بنابراین موارد زیر به شما پیشنهاد می شود:

• استفاده از HTML4‌ به جای HTML5
• استفاده از CSS2 بجای CSS3
• استفاده بیشتر از ویژگی های HTML‌ (HTML attributes) بجای CSS
  

همانطور که مشاهده کردید تمامی ویژگی های موجود در طراحی یک صفحه در تمامی سرویس گیرنده ها یکسان نیست بدین منظور برای کسب اطمینان از نمایش درست المان های استفاده شده در صفحه حتما باید از پشتیبانی آنها توسط سرویس گیرنده های ایمیل اطمینان حاصل نمایید و یا از یکسری Trick‌ ها برای نمایش طرح های خود استفاده کنید. بطور مثال Border-radius در بسیاری از سرویس گیرندگان ایمیل پشتیبانی نمی شود و با استفاده از تصویر و یا طراحی Table می توان به این خصوصیت CSS در طرح های HTML خود دست یافت.

منابع:

https://medium.com/@andrewlaurentiu/html-emails-4de656a6b7ef
https://mailchimp.com/help/limitations-of-html-email/
https://www.campaignmonitor.com/dev-resources/guides/coding-html-emails/
https://www.campaignmonitor.com/css/
https://stackoverflow.com/questions/43452202/how-to-import-custom-fonts-in-html-mailers-html-email/43456604
https://css-tricks.com/kinda-can-use-custom-fonts-html-emails/
http://get.taxi.support/en/articles/2703024-using-custom-fonts-in-an-email
https://blog.mailtrap.io/embedding-images-in-html-email-have-the-rules-changed/
https://medium.com/@emailmonks/top-expert-tips-on-how-to-embed-images-in-html-emails-4f13b3784472