インタラクティブな電子メールの可能性は無限です。」 アニメーションを追加し、モバイルデバイスのユーザーの関心を考慮するだけで十分です。ニュースレターは新しい色で輝きます。
インタラクティブなタブ、ホバー効果、ページネーション-インタラクティブな電子メールの開発における主な傾向を調査しました。
1. ページネーション
ページ区切り（別名、ページごとのテキストナビゲーション）は、モバイルメーリングレターでの使用に非常に便利です。 文字のアダプティブデザインの導入により、コンテンツのスクロールが避けられなくなりました。文字が長くなるほど、モバイルデバイスのユーザーが行う必要のある不必要な動きが多くなります。
タッチデバイスの普及が「 無限スクロール 」をサポートしているという事実にもかかわらず、すべての加入者が長いメッセージを読む準備ができているわけではありません。 一部のユーザーは遅いスクロールに苦しむことさえあります。 そのため、ページネーション（コンテンツを個別のページに分割するメカニズム）が「未読の手紙」の問題に対する優れたソリューションになります。
仕組み：
特別なボタンをクリックすることで、ユーザーはメッセージのテキストを読みやすいように変換することができます。通常の「シート」は複数のページに分割され、各ページをクリックするとアクセスできます。 この場合の「リーダーモード」開始ボタンは、ナビゲーションセルのIDを使用してチェックボックスを切り替えるラベルでラップされます。
ページネーションを機能させるには、コンテンツを簡単に論理的に別々の記事に分割し、各記事を2つのコンテナにラップする必要があります。 チェックセレクター（ユーザーが閲覧バージョンを選択した場合に発生します）をアクティブにした後、外部コンテナーは、メッセージの最初のフラグメントを画面の表示領域の幅と高さ全体に表示し、記事メニュー用の空きスペースを残します。
内側のコンテナは、可視領域の幅に記事の数を掛けたものを占有します。 記事は水平位置に配置されます。これは、「重複」を避けるのに役立ちます-一度に表示されるのは、文字の断片1つだけです。 さらに、個々の記事ごとに必要なラジオ要素が作成されます。特定のラジオ要素に対してセレクター要素がトリガーされると、内側のコンテナが1つ以上のスキャンされた記事の幅だけシフトされます。 別々の記事間を簡単に移動するには、矢印マークを作成する必要があります。矢印マークを押すと、目的のラジオ要素をアクティブにできます。
スクロール時に生じる「スライド効果」により、ユーザーは必要な素材をすばやく見つけることができます。 レターの個々の部分に関連付けられたラベルのリストを含む記事のインデックスメニューが役立ちます（ユーザーがホバーセレクターを使用してメニューをクリックすると表示されます）。
動作する場所：メールアプリケーションMail for iPhone（開発中のAndroidバージョン）
2. CSSを使用してインタラクティブな電子メールを作成する
メール購読者にとってメールをより魅力的にするには、 ホバー効果 が役立ちます。ホバーするとコンテンツが変更されます。 この技術はサイトで積極的に使用されていますが、「画像の変更」は手紙の本文を有機的に見ることができます。
仕組み：
画像を背景とするセルを含むテーブルを作成する必要があります。 ホバー効果を実装するには、背景画像とホバー効果の2つの画像が必要です。 次に、メイン画像を割り当てる必要があります。 追加されたクラス「img-swap」とのリンクに変わり、display：blockプロパティが画像自体に適用されます。
動作する場所： Yahoo! メール、Outlook.comおよびOutlook2003。Gmailに変更があります。
別のオプションも可能です：別のホバーベースの技術により、サポートされているもの（iOSメール、Android 4.xメール、Yahoo！メール、Outlook.com、Gmail.com）とサポートされていないもの（デスクトップOutlook、Gmailモバイルアプリケーション）に集中できますおよびビジネス向けGmail）クライアント：後者は元の画像を表示しませんが、すぐに表示される画像を表示します。
メールプログラムが双方向性をサポートしていない場合、ユーザーは基本情報を見逃すことはありません。 手紙はそれほど印象的ではありませんが、購読者は強調された画像を正確に見ることができます。
添付画像をすぐに表示するには、手順を変更する必要があります。カバー画像が背景になり、開いた画像がオーバーレイとして使用されます。
3.インタラクティブタブのレイアウト
インタラクティブなタブを使用すると、よりコンパクトで構造化された方法で情報を文字で表示できます。ユーザーは、興味のないセクションをバイパスし、テキストをスクロールすることなく、必要な情報にアクセスできます。
仕組み：
タブヘッダーはラベルで「ラップ」され、スタイルによって非表示になっている関連するラジオ要素の下に配置されます。 各タイトルは、for属性を使用してラジオ要素に関連付けられています-これが、ヘッダーをクリックすると、for属性の値と一致するidを持つラジオ要素がアクティブになる理由です。
ただし、モバイルおよびWebkitベースの電子メールプログラム（iOSおよびAndroid用のアプリケーションなど）で適切に機能するこのテクノロジーには、Webとのやり取り時に多くのエラーがあります。 インターネット上のCSSのインタラクティブタブのレイアウトに関する多くの慣れ親しんだ資料を見つけることができるという事実にもかかわらず、それらのすべてが電子メールWebクライアントのCSSプロセッサの機能を考慮しているわけではありません（たとえば、GmailはクラスとIDをカットし、Outlook.comは擬似クラスをサポートしていません：オンにすると、Yahoo！Mailはセレクター（〜）を切り取り、レンダリング時にidとクラスをレンダリングします。この場合、for属性は使用できなくなります）。
したがって、Web上で動作します。
電子メールクライアントのいくつかのWebバージョンでサポートされていないfor属性を完全に放棄するために、ラジオ要素とタブのコンテンツをラベル内に配置できます。 ユーザーがラベルをクリックすると、ラベルに埋め込まれたラジオ要素が自動的にアクティブになります。
「入れ子人形法」を使用することは許可されています。ラベル、入力、コンテンツは一緒に入れ子にできます。 これにより、アクティブ化された要素とターゲット要素を相互に接続する必要があるセレクタ（+）を実装できます。Webバージョンでは、ラジオ要素とスパンラッパーが接続されます。
さらに、サポートされていないメールプログラムのユーザーには、「壊れた」メッセージが表示される場合があることに注意してください。 これを回避するには、ページ上のタブに関連するすべてを完全に非表示にするか、タブの内容をdivコンテナでラップします。これは非表示になります。 同時に、セレクターがスタイルブロックに追加されます。セレクターが一致する場合、チェックボックスをオンにすると、divコンテナーが表示されます。
PSブログPechkin-mailのその他の資料：