メールマーケティングと自動化

電子メールのダーク モードが採用され始めています…サポートする方法は次のとおりです

ダークモードは画面のエネルギー使用量を削減し、集中力を高めます。 一部のユーザーは目の疲れが軽減されたと感じていると述べていますが、それは 質問された.

ダークモードの採用は増え続けています。 ダーク モードは、macOS、iOS、Android、および Microsoft Outlook、Safari、Reddit、Twitter、YouTube、Gmail、Reddit を含む多数のアプリで利用できるようになりました。 ただし、それぞれが常に完全にサポートされているわけではありません。 電子メール テクノロジーが進歩することはめったにありません。そのため、電子メールでもダーク モードのサポートが採用されるのは嬉しいことです。

28 年 2021 月には、ユーザーの 2022% がダーク モードで視聴していました。34 年 XNUMX 月までに、その数は XNUMX% 近くまで増加しました。

リトマス

ダーク モードの実装を成功させるには、ベスト プラクティス、実装するコード、クライアント サポートを理解することが重要です。 そのため、Uplers のチームはダークモードに関するこのガイドを公開しました。 メールサポート.

最近では、 DK New Media は、ダーク モードを組み込んだクライアント向けの Salesforce Marketing Cloud テンプレートを開発しました。これにより、電子メール クライアントで表示したときに電子メール セクションが大幅にコントラスト付けされます。 これは、購読者のエンゲージメントとクリックスルー率をさらに高める可能性のある取り組みです。

ダークモードのメールコード

ステップ1:メタデータを含めてメールクライアントでダークモードを有効にする – 最初のステップは、ダーク モード設定がオンになっている購読者の電子メールでダーク モードを有効にすることです。 このメタデータを鬼ごっこ。

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

ステップ2:@mediaのダークモードスタイルを含める(prefers-color-scheme:dark) –このメディアクエリを埋め込みに記述します tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com、Outlook 2019 (macOS)、および Outlook アプリ (iOS)。 メールにアウトラインのロゴを入れたくない場合は、次のようにします。 .dark-img & .light-img 以下に示すようなクラス。

@media (prefers-color-scheme: dark ) { 
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; } 
.light-mode-image { display:none; display:none !important; } 
}

手順3:[data-ogsc]プレフィックスを使用して、ダークモードスタイルを複製します – Android用Outlookアプリのダークモードと互換性があるように、メールにこれらのコードを含めます。

[data-ogsc] .light-mode-image { display:none; display:none !important; } 
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

ステップ3:ボディHTMLにダークモードのみのスタイルを含める –HTMLタグには正しいダークモードクラスが必要です。

<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" /> 
</div><!--<![endif]-->
</a> 
<!-- //Logo Section -->

ダークモードのヒントと追加リソースをメールで送信

私はに取り組んできました Martech Zone ダークモードをサポートするための日次および週次ニュースレター…必ず ここで購読する。 ほとんどの電子メール コーディングと同様、さまざまな電子メール クライアントと独自のコーディング手法があるため、これは単純ではありません。 私が遭遇した問題の XNUMX つは例外でした。たとえば、ダーク モードに関係なくボタン上の白いテキストが必要な場合などです。 コードの量は少しばかげています…次の例外が必要でした。

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

いくつかの追加リソース:

  • リトマス –メールマーケター向けのダークモードの究極のガイド。
  • CampaignMonitor – 電子メールのダーク モードに関する開発者ガイド。

ダーク モード サポート用に電子メール テンプレートを変換したい場合は、遠慮なくお問い合わせください。 DK New Media.

メールのダークモード
情報源: アップラー

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。