インタラクティブメール
5638 ワード
TLDr :私はJavaScriptを使用せずにラジオボタンを使用して私の最初の対話型電子メールをオン/オフ状態に切り替える.
私は最初に、私はボストンのリトマスライブでマークロビンズのプレゼンテーションに出席した2015年にインタラクティブな電子メールに導入されました.
JavaScriptはどんな電子メールクライアントでもサポートされていないので、その時点まで私は電子メールで行った唯一の対話的なものは
しかし、彼のプレゼンテーションにおいて、マークは私にパンチカードのコーディングの概念に私を紹介しました:チェックボックスと電子メールのラジオボタンタグを使って、JavaScriptが典型的にウェブ上で可能に機能的にオン/オフを模倣してください.
吹き飛ばされた.私は自分が仕事で学んだものを使う機会を探すようにと言いましたが、「普通の」仕事が前座をとったので😬.
パイロット
我々は国家を維持できるか?私は電子メールで投票した場合、何が起こるか、電子メールを閉じ、それを再オープン?矢印はまだアクティブですか?それがそうでないならば、そして、私は再び投票します、何が起こりますか?
どのようなセキュリティ?私の電子メールを転送する場合は、他の誰かが私に代わって投票することができますか?
テストはどうですか.リトマスのようなエミュレータは静的スクリーンショットを生成するだけです.私はテストするすべてのメールクライアントの作業バージョンが必要になります. あなたがスタックオーバーフローユーザーであるならば、私はいつ我々がこれを理解するかについて、わかりません、しかし、私はそれに取り組んでいます!これは、インタラクティブな電子メールを使用して何が可能かの探査です.
あなたがパンチカードのコーディングや“チェックボックスハック”を使用してマークアップを書いた場合は、私はどのように改善し、これを最適化することができます入力を愛している.
スタックオーバーフローユーザーなら、これは役に立つでしょうか?
💌 ✌️
私は最初に、私はボストンのリトマスライブでマークロビンズのプレゼンテーションに出席した2015年にインタラクティブな電子メールに導入されました.
JavaScriptはどんな電子メールクライアントでもサポートされていないので、その時点まで私は電子メールで行った唯一の対話的なものは
:hover CSSを使ったボタンへの影響.しかし、彼のプレゼンテーションにおいて、マークは私にパンチカードのコーディングの概念に私を紹介しました:チェックボックスと電子メールのラジオボタンタグを使って、JavaScriptが典型的にウェブ上で可能に機能的にオン/オフを模倣してください.
吹き飛ばされた.私は自分が仕事で学んだものを使う機会を探すようにと言いましたが、「普通の」仕事が前座をとったので😬.
パイロット
2019年まで早速、私は今、スタックオーバーフローのプライベートQ & A製品に取り組んでいます.チームは、プライベートな設定で最高のものに質問、ポスト答え、および投票をすることができます.
しかし、一部のチームは、彼らが投票の彼らの文化を改善したいと言いました.チームは有用な回答を投稿するが、人々は上告しないか、チームの残りに高品質の答えを信号に最適なものを受け入れる.
人々は、スタックのオーバーフローをブラウザのタブで開いて一日を過ごすことはありませんので、どのように我々はすでに彼らがいる人々を満たすことができますか?
“What if you could vote on questions right from your email, without even visiting the site? I bet that’s something an interactive email would be able to do!”
パンチカードのコーディングについての学習の4年後、私は最終的に良いパイロットプロジェクトを発見し、ビジネスの必要性に結び付け、私の最初の対話的な電子メールをコードするために一日を脇に設定します.
我々が構築
「ハッピーパスUX」は、誰かが質問に答えを表示し、オプションで投票したり、受信トレイを残さずに最善の答えとして受け入れることができます.
左側のアイコンをクリックしてみてください!
暗号
HTMLはラジオ入力と共に:checked 属性を表示し、CSSを使用してコンテンツを非表示にします.
HTML
<input type="radio" name="vote" id="ArrowUpLg" style="display: none !important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLg" class="ArrowUpLg" style="cursor: pointer;">
<img src="ArrowUpLg.png" height="36" width="36">
</label>
<input type="radio" name="vote" id="ArrowUpLgactive" style="display: none!important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLgactive" class="ArrowUpLgactive" style="cursor: pointer; display: none;">
<img src="ArrowUpLgactive.png" height="36" width="36">
</label>
実際のラジオボタンを視覚的に隠しているとのリンクから<label> 使用するタグfor and id 属性.イメージファイルは<label> クリックして/エリアをニースと大きなをタップします.
各々のアイコンのために、私はコードの2つのほぼ同一のバージョンをつくりました:「初期の」状態のための1と「アクティブな」状態のためのもう一つ.「アクティブな」状態はインラインCSSでデフォルトで隠されます(インラインCSSはまだ電子メールのスタイルHTMLへの最も一般的な方法です).
したがって、ベースのHTMLとCSSは、電子メール内の各アイコンの状態を挿入し、配置し、各アイコンの“アクティブ”画像を非表示にします.この基盤で、CSS<head> 機能を追加します.
CSS
#ArrowUpLg:checked + .ArrowUpLg {
display: none !important;
}
#ArrowUpLg:checked ~ .ArrowUpLgactive {
display: block !important;
}
#ArrowDownLg:checked + .ArrowDownLg {
display: none !important;
}
アイコンをクリックすると<label> タグ、それは隠しラジオボタンをチェックします.
CSSでは:checked セレクターはdisplay 隣接するプロパティ<img> の間block and none . アイコンがクリックされたり、タップされたとき、最初の状態を隠しますdisplay: none !important ) 「アクティブ」状態を表示するdisplay: block !important ). The !important インラインCSSスタイルを上書きする必要があります.
ハッピーパス
最終的な結果は、電子メールをup投票し、矢印を下書き、およびチェックマークの答えを受け入れることです.
私たちは、答えを上告するか、または断ち切ることができなければなりません.だから我々はラジオボタンを使用して、1つのグループでは、UPDATEとダウン矢印を含むname 属性.これは、up票矢印がアクティブであるならば、下りの矢印が選択されるならば、up投票矢印はプロセスの未選択であることを意味する.
「受け入れられた」チェックマークは投票の矢から独立していますname .
電子メールクライアントフォールバック
私は理想的な状態を記述するために“ハッピーパスUX”という用語を使用している.残念ながらすべての電子メールクライアントのサポートthis level of interactivity , それで、私はフォールバックについて考えなければなりません.
たとえば、Windows上のデスクトップの外観は、メールでHTMLフォームのタグをサポートしていません.単独で、Outlookは各アイコンを表示しますが、何も彼らがクリックしているときに発生します.両方の混乱とユーザーのためのイライラ.
このようなケースでは、我々の目的のUXとコードをサポートしていないメールクライアントをターゲットにすることができます.
この例では、<!--[if mso]><![endif]—> タグは、Outlookからインタラクティブなフォームのコンテンツを非表示にするが、他のメールクライアントで表示します.
How to Target Email 別の電子メールクライアントをターゲットにする方法の長いリストが含まれます.私はそれをサポートし、残りの部分から非表示にクライアントに対話性を表示するためにこれを使用します.
パンチカード符号化
これはパンチカードのコーディングに私の最初の進出だった.それはかなり急な学習曲線ですが、私は巨大な“A - HA!”瞬間私はコンセプトの作業を証明した初めて.
パンチカードのコーディングは、物事の数を達成するためにラジオボタン、チェックボックス、またはボタンのタグを含むことができます.JavaScriptはまだ任意の電子メールクライアントではサポートされていませんが、我々はまだ状態をトグル、タブを構築し、隠されたメニューを明らかにし、カルーセルを構築し、さらに.
More on punched card coding
既知の問題と質問
上の例はHTMLとCSSの外にいくつかの質問をします.
“What if you could vote on questions right from your email, without even visiting the site? I bet that’s something an interactive email would be able to do!”
「ハッピーパスUX」は、誰かが質問に答えを表示し、オプションで投票したり、受信トレイを残さずに最善の答えとして受け入れることができます.
左側のアイコンをクリックしてみてください!
暗号
HTMLはラジオ入力と共に:checked 属性を表示し、CSSを使用してコンテンツを非表示にします.
HTML
<input type="radio" name="vote" id="ArrowUpLg" style="display: none !important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLg" class="ArrowUpLg" style="cursor: pointer;">
<img src="ArrowUpLg.png" height="36" width="36">
</label>
<input type="radio" name="vote" id="ArrowUpLgactive" style="display: none!important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLgactive" class="ArrowUpLgactive" style="cursor: pointer; display: none;">
<img src="ArrowUpLgactive.png" height="36" width="36">
</label>
実際のラジオボタンを視覚的に隠しているとのリンクから<label> 使用するタグfor and id 属性.イメージファイルは<label> クリックして/エリアをニースと大きなをタップします.
各々のアイコンのために、私はコードの2つのほぼ同一のバージョンをつくりました:「初期の」状態のための1と「アクティブな」状態のためのもう一つ.「アクティブな」状態はインラインCSSでデフォルトで隠されます(インラインCSSはまだ電子メールのスタイルHTMLへの最も一般的な方法です).
したがって、ベースのHTMLとCSSは、電子メール内の各アイコンの状態を挿入し、配置し、各アイコンの“アクティブ”画像を非表示にします.この基盤で、CSS<head> 機能を追加します.
CSS
#ArrowUpLg:checked + .ArrowUpLg {
display: none !important;
}
#ArrowUpLg:checked ~ .ArrowUpLgactive {
display: block !important;
}
#ArrowDownLg:checked + .ArrowDownLg {
display: none !important;
}
アイコンをクリックすると<label> タグ、それは隠しラジオボタンをチェックします.
CSSでは:checked セレクターはdisplay 隣接するプロパティ<img> の間block and none . アイコンがクリックされたり、タップされたとき、最初の状態を隠しますdisplay: none !important ) 「アクティブ」状態を表示するdisplay: block !important ). The !important インラインCSSスタイルを上書きする必要があります.
ハッピーパス
最終的な結果は、電子メールをup投票し、矢印を下書き、およびチェックマークの答えを受け入れることです.
私たちは、答えを上告するか、または断ち切ることができなければなりません.だから我々はラジオボタンを使用して、1つのグループでは、UPDATEとダウン矢印を含むname 属性.これは、up票矢印がアクティブであるならば、下りの矢印が選択されるならば、up投票矢印はプロセスの未選択であることを意味する.
「受け入れられた」チェックマークは投票の矢から独立していますname .
電子メールクライアントフォールバック
私は理想的な状態を記述するために“ハッピーパスUX”という用語を使用している.残念ながらすべての電子メールクライアントのサポートthis level of interactivity , それで、私はフォールバックについて考えなければなりません.
たとえば、Windows上のデスクトップの外観は、メールでHTMLフォームのタグをサポートしていません.単独で、Outlookは各アイコンを表示しますが、何も彼らがクリックしているときに発生します.両方の混乱とユーザーのためのイライラ.
このようなケースでは、我々の目的のUXとコードをサポートしていないメールクライアントをターゲットにすることができます.
この例では、<!--[if mso]><![endif]—> タグは、Outlookからインタラクティブなフォームのコンテンツを非表示にするが、他のメールクライアントで表示します.
How to Target Email 別の電子メールクライアントをターゲットにする方法の長いリストが含まれます.私はそれをサポートし、残りの部分から非表示にクライアントに対話性を表示するためにこれを使用します.
パンチカード符号化
これはパンチカードのコーディングに私の最初の進出だった.それはかなり急な学習曲線ですが、私は巨大な“A - HA!”瞬間私はコンセプトの作業を証明した初めて.
パンチカードのコーディングは、物事の数を達成するためにラジオボタン、チェックボックス、またはボタンのタグを含むことができます.JavaScriptはまだ任意の電子メールクライアントではサポートされていませんが、我々はまだ状態をトグル、タブを構築し、隠されたメニューを明らかにし、カルーセルを構築し、さらに.
More on punched card coding
既知の問題と質問
上の例はHTMLとCSSの外にいくつかの質問をします.
<input type="radio" name="vote" id="ArrowUpLg" style="display: none !important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLg" class="ArrowUpLg" style="cursor: pointer;">
<img src="ArrowUpLg.png" height="36" width="36">
</label>
<input type="radio" name="vote" id="ArrowUpLgactive" style="display: none!important; max-height: 0; visibility: hidden;">
<label for="ArrowUpLgactive" class="ArrowUpLgactive" style="cursor: pointer; display: none;">
<img src="ArrowUpLgactive.png" height="36" width="36">
</label>
#ArrowUpLg:checked + .ArrowUpLg {
display: none !important;
}
#ArrowUpLg:checked ~ .ArrowUpLgactive {
display: block !important;
}
#ArrowDownLg:checked + .ArrowDownLg {
display: none !important;
}
最終的な結果は、電子メールをup投票し、矢印を下書き、およびチェックマークの答えを受け入れることです.
私たちは、答えを上告するか、または断ち切ることができなければなりません.だから我々はラジオボタンを使用して、1つのグループでは、UPDATEとダウン矢印を含む
name 属性.これは、up票矢印がアクティブであるならば、下りの矢印が選択されるならば、up投票矢印はプロセスの未選択であることを意味する.「受け入れられた」チェックマークは投票の矢から独立しています
name .電子メールクライアントフォールバック
私は理想的な状態を記述するために“ハッピーパスUX”という用語を使用している.残念ながらすべての電子メールクライアントのサポートthis level of interactivity , それで、私はフォールバックについて考えなければなりません.
たとえば、Windows上のデスクトップの外観は、メールでHTMLフォームのタグをサポートしていません.単独で、Outlookは各アイコンを表示しますが、何も彼らがクリックしているときに発生します.両方の混乱とユーザーのためのイライラ.
このようなケースでは、我々の目的のUXとコードをサポートしていないメールクライアントをターゲットにすることができます.
この例では、<!--[if mso]><![endif]—> タグは、Outlookからインタラクティブなフォームのコンテンツを非表示にするが、他のメールクライアントで表示します.
How to Target Email 別の電子メールクライアントをターゲットにする方法の長いリストが含まれます.私はそれをサポートし、残りの部分から非表示にクライアントに対話性を表示するためにこれを使用します.
パンチカード符号化
これはパンチカードのコーディングに私の最初の進出だった.それはかなり急な学習曲線ですが、私は巨大な“A - HA!”瞬間私はコンセプトの作業を証明した初めて.
パンチカードのコーディングは、物事の数を達成するためにラジオボタン、チェックボックス、またはボタンのタグを含むことができます.JavaScriptはまだ任意の電子メールクライアントではサポートされていませんが、我々はまだ状態をトグル、タブを構築し、隠されたメニューを明らかにし、カルーセルを構築し、さらに.
More on punched card coding
既知の問題と質問
上の例はHTMLとCSSの外にいくつかの質問をします.
これはパンチカードのコーディングに私の最初の進出だった.それはかなり急な学習曲線ですが、私は巨大な“A - HA!”瞬間私はコンセプトの作業を証明した初めて.
パンチカードのコーディングは、物事の数を達成するためにラジオボタン、チェックボックス、またはボタンのタグを含むことができます.JavaScriptはまだ任意の電子メールクライアントではサポートされていませんが、我々はまだ状態をトグル、タブを構築し、隠されたメニューを明らかにし、カルーセルを構築し、さらに.
More on punched card coding
既知の問題と質問
上の例はHTMLとCSSの外にいくつかの質問をします.
我々は国家を維持できるか?私は電子メールで投票した場合、何が起こるか、電子メールを閉じ、それを再オープン?矢印はまだアクティブですか?それがそうでないならば、そして、私は再び投票します、何が起こりますか?
どのようなセキュリティ?私の電子メールを転送する場合は、他の誰かが私に代わって投票することができますか?
テストはどうですか.リトマスのようなエミュレータは静的スクリーンショットを生成するだけです.私はテストするすべてのメールクライアントの作業バージョンが必要になります.
あなたがパンチカードのコーディングや“チェックボックスハック”を使用してマークアップを書いた場合は、私はどのように改善し、これを最適化することができます入力を愛している.
スタックオーバーフローユーザーなら、これは役に立つでしょうか?
💌 ✌️
Reference
この問題について(インタラクティブメール), 我々は、より多くの情報をここで見つけました https://dev.to/tedgoas/my-first-interactive-email-94テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol