ایمیل حدود 10 سال قبل از وب است (بسته به روی با چه کسی صحبت می کنید) و در آن زمان وب به یک موجودیت پویا و تعاملی تبدیل شده است. با این حال، هیجان‌انگیزترین چیزی که این روزها احتمالاً در یک ایمیل می‌بینید، یک گیف متحرک زیبا است، و ما آن‌ها را در دهه 90 دریافت کردیم. خوب اکنون همه چیز در حال تغییر است، این طلوع ایمیل تعاملی است. اگر می‌توانید از گالری‌های تصویر در ایمیل، طرح‌بندی‌های زبانه‌دار یا چندتایی استفاده کنید، چه می‌شد page طرح بندی؟ اگر می‌توانید یک بازی انجام دهید، یک فید زنده توییتر بخوانید، یا حتی خرید کنید، آیتم‌ها را انتخاب/ویرایش کنید و مستقیماً در ایمیل خود پرداخت کنید، چه؟ آیا کلاینت‌های ایمیل شروع به پشتیبانی از جاوا اسکریپت کرده‌اند؟ نه. و این افزونه، دانلود افزونه یا حتی برنامه جدید نیست. این همه HTML و CSS است! و بیشتر CSS2!

کدگذاری کارت پانچ شده

بنابراین چگونه می‌توانید تعاملات کاربر را شناسایی کنید و عملکردهای پیچیده را بدون جاوا اسکریپت ایجاد کنید؟ من تکنیکی را ایجاد کردم که در حال فراخوانی آن هستم کدگذاری کارت پانچ شده این اساساً از تعداد زیادی دکمه رادیویی استفاده می کند و بر اساس CSS استایل می دهد روی را :بررسی شد مقادیر آن دکمه ها یک مثال ساده از این طرح بندی زبانه ای است:

HTML

<input type="radio" name="tabs" id="tab1" checked> 
<input type="radio" name="tabs" id="tab2"> 
<input type="radio" name="tabs" id="tab3">
<input type="radio" name="tabs" id="tab4"> 
<label for="tab1">Tab 1</label> 
<label for="tab2">Tab 2</label> 
<label for="tab3">Tab 3</label> 
<label for="tab4">Tab 4</label> 
<div class="tab tab1">Content for tab 1</div>
<div class="tab tab2">Content for tab 2</div> 
<div class="tab tab3">Content for tab 3</div> 
<div class="tab tab4">Content for tab 4</div> 

CSS

input { display:none; } 
label { 
 display:block; 
 float:left; 
 width:148px; 
 border:1px solid #ccc; 
 text-align:center; 
 padding:1em 0; 
} 
.tab{ 
 width:598px; 
 height:1em; 
 padding:2em 0; 
 border:1px solid #ccc; 
 text-align:center; 
 display:none; 
 clear:both; 
} 
#tab1:checked ~ .tab1, 
#tab2:checked ~ .tab2, 
#tab3:checked ~ .tab3, 
#tab4:checked ~ .tab4 { 
display:block; 
}

این مثال را در محل کار ببینید: http://codepen.io/anon/pen/WQwagL

وقتی دکمه رادیویی برای #tab1 بررسی می شود، سپس .tab1 نشان داده شده است. هنگامی که دکمه رادیویی علامت زده نمی شود، به مقدار پیش فرض خود باز می گردد. از آنجایی که این دکمه‌های رادیویی همگی در یک آرایه قرار دارند، تنها یکی را می‌توان در یک زمان بررسی کرد، این امر مانع از نمایش همزمان چندین تب می‌شود. این یک مفهوم کاملا سازگار است. برچسب های برگه ها را با تصاویر کوچک و محتوا را با تصاویر جایگزین کنید و یک گالری تصاویر ساده خواهید داشت. یا، برای ایجاد یک طرح چند صفحه ای جعلی، برگه ها را به یک طرح ناوبری منتقل کنید. هنگام رفع برخی از اشکالات روی ایمیلی که داشتم می ساختم، دکمه های رادیویی را تنظیم کرده بودم نمایش دادن، و متوجه شباهت به دکمه های رادیویی کارت پانچ شده قدیمی IBM / تصویر کارت پانچ شده قدیمی شد. وقتی این را فهمیدم، به من این امکان را داد که تفکرم را گسترش دهم: این فقط یک سری مقادیر چک شده یا پیش فرض است. شما می توانید آن را درست / نادرست یا یک / صفر در نظر بگیرید. پتانسیل بسیار زیاد است.

بازی ها در ایمیل

اولین آزمایش من ساختن یک بازی بود. تئوری این است که بازیکن برای کسب امتیاز باید روی یک برچسب کلیک کند. هنگامی که علامت بزنید، همچنین برچسب دکمه رادیویی بعدی و غیره را نشان می دهد روی. من همچنین یک برچسب برای دکمه رادیویی قبلی اضافه کردم تا بتوانید امتیاز را نیز از دست بدهید. سپس، برای تبدیل آن به یک بازی، برچسب‌ها را متحرک کردم تا در اطراف حرکت کنند و ضربه زدن به آن‌ها را سخت‌تر می‌کردم و آن را به یک بازی از نوع ضربت زدن به مول تبدیل کردم. بازی را در اینجا انجام دهید: http://codepen.io/M_J_Robbins/full/jpCKH/

سبد خرید در یک ایمیل

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

مفهوم اینجا این است که وقتی روی «اکنون خرید کنید» کلیک می‌کنید، به‌عنوان ارسال فرم کار می‌کند و جزئیات همه دکمه‌های رادیویی علامت‌خورده را حمل می‌کند. سپس کارت انتخاب شده شارژ می شود و محصولات انتخابی بدون مراجعه به وب سایت به آدرس انتخاب شده ارسال می شود.

پشتیبانی و محدودیت ها

همانطور که در ایمیل انتظار دارید، چند محدودیت برای این وجود دارد. اولاً یک محدودیت وجود دارد روی حجم فایل. اگر حجم ایمیل از 102 کیلوبایت بیشتر شود، در Gmail، Yahoo و Outlook.com بریده می شود. همچنین، خطر بسیار بالاتری برای علامت گذاری به عنوان هرزنامه دارد. باید توجه داشته باشم که محدودیت فقط برای HTML و CSS ارسالی شما است. دارایی های بارگیری شده مانند تصاویر و فونت ها در این گنجانده نمی شود. برای کمک به حل مشکل، کد خود را زشت و کوچک می کنیم. اما این به نوبه خود می تواند منجر به برخی خطاها شود، بنابراین مراقب باشید. سپس تمام مشکلات رندر متفاوت در مشتریان مختلف ایمیل وجود دارد، روی دستگاه های مختلف، سیستم عامل های مختلف و مرورگرهای مختلف. برای ساده کردن همه اینها، ما دوست داریم تمام سرویس گیرندگان ایمیل را به 3 گروه Static، Limited و Interactive تقسیم کنیم.

مشتریان ثابت: Outlook (Windows)، Outlook.com، برنامه Gmail این کلاینت‌ها CSS کاربردی را حذف می‌کنند، بنابراین ایمیل به یک طرح‌بندی ساده و ثابت بازمی‌گردد. کاربر نهایی نباید تفاوتی بین این ایمیل‌های تعاملی و ایمیل‌های معمولی که هر روز دریافت می‌کند، متوجه شود.

مشتریان محدود: جیمیل (وبمیل)، یاهو، AOL این مشتریان محدودیت های متفاوتی دارند روی CSS برخی از موارد پیشرفته تر توسط پیش پردازشگرهای سرویس گیرنده ایمیل حذف یا ویرایش می شوند. اما آنها هنوز از برخی تعاملات پشتیبانی می کنند.

مشتریان تعاملی: Applemail، iOS، Android، Mailbox اینها زنگ ها و سوت های کامل را دارند. آنها از همه چیز فوق پشتیبانی می کنند، و برخی از ایده های جدید بسیار جالب من در حال کار هستم روی هم. خبر خوب این است که، بر اساس روی آمار از emailclientmarketshare.comاز 1.05 میلیارد ایمیل باز شده در ماه آگوست، 57 درصد از ایمیل ها در مشتریان تعاملی و 20 درصد دیگر باز شده است. روی مشتریان محدود بنابراین، 77٪ از کاربران توانایی دیدن برخی از سطوح ایمیل تعاملی را دارند.

پس آینده چه چیزی در انتظار شماست؟

همانطور که می بینید، پست الکترونیکی این پتانسیل را دارد که بسیار بیشتر از متن و تصاویر ثابت باشد. قبلاً شرکت‌هایی مانند Nest و B&Q را دیده‌ایم که از گالری‌ها در ایمیل‌های خود استفاده می‌کنند، و Litmus آزمایش‌های بسیار خوبی را انجام داده است (آزمایش‌هایی مانند پس‌زمینه ویدیو، فید زنده توییتر، و هدایایی “یافتن بلیط طلایی”). این زمان بسیار هیجان انگیزی برای ارسال ایمیل است، ما فقط با عمق تخیل خود محدود شده ایم… چشم انداز هنوز هم دردسری است که باید با آن کنار آمد… و زمان. همانطور که می توانید تصور کنید، ساخت این ایمیل ها بسیار بیشتر از یک ایمیل معمولی طول می کشد. ما فقط با عمق تخیل خود، ارائه سرویس گیرنده های ایمیل قدیمی تر، و زمان لازم برای ساخت ایمیل ها محدود شده ایم.

استفاده از تصویر ویژه تصویر ایمیل از طریق Shutterstock.