📊 رویکرد غیر تصویری به داده Viz در ایمیل

ایمیل های HTML جعبه ابزار محدودی برای تجسم داده ها دارند. ابزارهای پیچیده ای مانند D3.js برای استفاده در توسعه ایمیل در دسترس نیستند. در نتیجه، تصاویر به رایج ترین رسانه برای نمایش داده ها در ایمیل ها تبدیل شده اند. این مسیر دارای معایبی است:

• برای صفحه خوان ها قابل دسترسی نیست (مگر اینکه <alt> برچسب به درستی استفاده می شود)
• بارگیری خودکار تصویر غیرفعال شده است از دیدن تصاویر بصری داده توسط کاربران جلوگیری می کند
• با حالت تاریک سازگار نیست
• به کل زمان بارگذاری ایمیل کمک می کند، به خصوص زمانی که تصاویر بهینه نشده باشند

آیا راه دیگری برای نمایش داده ها در قالب های ایمیلی که به تصاویر متکی نیستند وجود دارد؟ آیا ایمیل ها می توانند تصاویری واضح، رنگارنگ و جذاب را بدون تصاویر ارائه دهند؟

بله، از طریق استفاده از <table> عناصر، می توانید نمودارهای میله ای افقی همه کاره، نمودارهای میله ای عمودی و میله های پیشرفت ایجاد کنید. این روش در مقایسه با استفاده از تصاویر دارای مزایا و معایب مشخصی است.

بیایید با استفاده از نمودار میله ای بسازیم <table> عناصر ┳━┳

با a شروع کنید <table> عنصر و <td> سلول ها برای نام نوار داده، نوار داده و برچسب انتهایی. در این مثال نمودار، نام و برچسب پایان در خارج از نوار داده قرار می گیرند.

<table width="600">
  <tr>
    <td>Data bar #1</td> <!-- Data bar name -->
    <td></td> <!-- Data bar -->
    <td>Label #1</td> <!-- End label -->
  </tr>
</table>

را تعریف کنید height و width برای هر <td> سلول.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 65%;" height="24" width="65%"></td>
    <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #1</td>
  </tr>
</table>

مقادیر عرض را برای تغییر اندازه نوار داده تنظیم کنید. از آنجایی که هر سه ستون درصد عرض را به اشتراک می گذارند، مطمئن شوید که همه <td> سلول ها تا 100٪ جمع می شوند.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td> <!-- The data bar width was reduced from 65% to 35%. The difference is added to the `<td>` cell below. -->
    <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
  </tr>
</table>

برای ایجاد نوار داده دوم، کد را در new قرار دهید <table>، <tr>، و <td> عناصر. این به شما امکان می دهد تا کنترل بیشتری بر فاصله بین هر نوار داده افقی داشته باشید. فاصله را با استفاده از بالشتک در قسمت بیرونی تنظیم کنید <td> سلول.

<table>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
          <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #2</td>
          <td style="background-color: #0d5fbd; height: 24px; width: 65%;" height="24" width="65%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

حالا تکرار کنید <tr> بخش ها را برای هر نوار داده جداگانه و تنظیم کنید background-color، عرض و برچسب برای هر کدام <td> سلول برای این نمودار میله ای.

این یک نمونه از چگونگی <table> عناصر را می توان برای ایجاد نمودار میله ای افقی استفاده کرد.

مزایای نمودارهای نواری HTML/CSS

نمودارهای ساخته شده با استفاده از <table> عناصر چندین مزیت نسبت به تصاویر دارند:

• نمودارها می توانند از طریق استفاده از پرس و جوهای رسانه ای و تنظیم اندازه فونت پاسخگوی تلفن همراه باشند
• زمان بارگذاری نمودارها در مقایسه با دانلود تصاویر سریعتر است
• نمودارهای کدگذاری شده HTML/CSS از متن، اعداد و برچسب‌های زنده استفاده می‌کنند که توسط صفحه‌خوان‌ها قابل دریافت هستند.
• نمودارها را می توان بدون نیاز به دانلود هیچ تصویری مشاهده کرد
• می تواند پویا باشد از آنجایی که عرض نوار داده، اعداد نمودار، متن برچسب و رنگ‌ها در HTML/CSS کدگذاری شده‌اند، این فیلدها را می‌توان به‌عنوان متغیر در ESP تنظیم کرد و با استفاده از داده‌های به‌روزرسانی‌شده JSON به‌صورت پویا ارائه شد.
• نمودارها در حالت تاریک در مقایسه با تصاویر سازگارتر هستند

معایب نمودارهای نواری HTML/CSS

با این حال، برخی از معایب با نمودار میله ای کدگذاری شده وجود دارد:

• از این روش فقط نمودارهای میله ای افقی و عمودی و میله های پیشرفت ایجاد می شود. برای نمودارهای پیچیده تر (یعنی نمودارهای دایره ای، نمودارهای بسیار دقیق و پیچیده)، تصاویر عبارتند از تنها گزینه
• به وزن فایل ایمیل می افزاید و خطر قطع شدن 102 کیلوبایت جیمیل را به همراه دارد
• کدنویسی و ساخت نمودارهای فردی زمان بر و خسته کننده است*

*از ابزار Email Chart Builder برای کاهش زمان مورد نیاز برای ساخت نمودارهای میله ای استفاده کنید.

نتیجه

تصاویر تنها راه برای نمایش داده های تصویری واضح، رنگارنگ و جذاب در ایمیل نیستند. از طریق استفاده از <table> عناصر، ایمیل ها می توانند نمودارهای نواری افقی و عمودی همه کاره و نوارهای پیشرفت داشته باشند.