Email Love - Curated Email Inspiration & ResourcesBrowse Email Inspiration, subscribe to our Newsletter, or Submit your emails to get featured.
くずれないないHTMLメール - Qiita
くずれないないHTMLメール レイアウト 使うべきタグと避けるべきタグを意識する. ・paddingやmarginは使わない。 ・インラインCSSを使う。 ・br、hr、heightタグは使わない。 ・全体のレイアウトを作成するときはtableを使う。 ・doctypeを指定する。 ・”wrapper div”でリセットCSSを指定する。 ・フォントはデバイスによって変化することがあるので注意する。 ・基本的なタグや昔から使われているタグを使用する。 ・背景の色は常にリセットする。 https://sendgrid.kke.co.jp/blog/?p=2223 画像 ・pngファイルは使わない。 ・画像のサイズを指定する。 ・alt属性を全ての画像につける。 ・Outlookでは画像の周囲に余白が追加されてしまうことに注意する。 ・floatプロパティは使わない。 どう作るか？テーブルレイ
リキッド＆レスポンシブ対応のHTMLメールをつくる（gulp） - Qiita
リキッドとレスポンシブ対応のHTMLメール用gulp開発環境をつくった。 Githubにサンプルメールとともにアップ。ほぼ大抵のメーラーでうまく表示できる。 Githubと対応メーラー Outlook2010(win7)： 固定幅表示/リキッドとレスポンシブ非対応のため Gmail(mac)： リキッドのみ/レスポンシブ非対応のため thunderbird(mac)： リキッドとレスポンシブどちらも正しく挙動する iOS 標準メーラー(iOS10)： リキッドとレスポンシブどちらも正しく挙動する Android 標準メーラー(Android4.3)： リキッドとレスポンシブどちらも正しく挙動する Android Gmail(Android6)： リキッドとレスポンシブどちらも正しく挙動する あるあるバグ＆仕様一覧 outlook2010 レンダリングがwordモード 背景画像がひけない リ
HTMLメール作成で調べたことまとめ - Qiita
HTMLメールのお仕事がきて調べたことまとめ htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。 注意点 基本的にテーブルコーディング CSSはインライン 全体のサイズは600pxで作る 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須 pngではなくgifやjpgを使用する 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする 文字の自動調整をしないようにbodyにsize-adjust必須（noneじゃなく100%で） viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる レイアウトで段組やカラム分けしたいときはtableの入れ子で作る メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にす
ZURB Foundation for Emailsによるレスポンシブメール作成 CSS編 その1 - Qiita
ZURBはWEBのデザインなど手掛けきた企業で、Foundationというフロントエンド向けのフレームワークを提供しています。「Zurb Foundation 導入前の予備知識」辺りが詳しいです。 このFoundationには大きく次の2種類があり、Webサイト用とメール用があります。 - Foundation for Sites - Foundation for Emails メール用のフレームワークは元々Inkと呼ばれていたようです。MOONGIFTさんで紹介されていました(ちなみに冒頭にある「ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした」という一文はメールに関連する仕事をするようになって痛感する日々。2013年当時よりは変わってるとは思いますが)。 ここでは、メールの「Foundation for Emails」について書きたいと思います。 http:/
コンバージョン率UPにつながる？メルマガデザイン紹介サイト8選 - Benchmark Email
※こちらの記事は2017/9に公開した記事にアップデート情報を追記したものです。 こんにちは、デザイン担当のBEDです。 メルマガのデザインは商品の魅力を伝えることや、購入などのコンバージョン率アップに大きな役割を果たします。 そこで今回は、ありとあらゆるジャンルのメルマガのデザインを集めている海外のサイトを中心に紹介します。ちょっと見るだけでも参考になるので、デザインに迷った時に見てもらえると良いと思います。 サイトごとに個性がありますので、検索機能や掲載事例数も紹介します。 一番使いやすい「Email-Gallery」 Email-Gallery 絞り込みフィルタ： 業界 色 カラム数 掲載数：1700通以上 Email-Galleryの特徴 カリフォルニアのデザイナー、Min Kimさんが運営するサイト。有名企業も含め豊富なデザインを紹介しています。バランスが取れているので慣れていな
プリヘッダーテキストとは何か？メルマガで開封率を向上させるための方法を解説
『MARKETIMES』は、広告収益による運営を行っております。複数の企業と提携し、情報を提供しており、当サイトを通じてリンクのクリックや商品・サービスに関する申し込みが行われた際、提携する企業から報酬を得ることがあります。しかし、サイト内のランキングやサービスの評価について、協力関係や報酬の有無が影響することは一切ありません。 さらに、当サイトの収益は、訪問者の皆様に更に有益な情報を提供するため、情報の質の向上やランキングの正確性の強化に使用されています。 WEB担当者やマーケティング担当者はメルマガやメールマーケティングを行う上で、「プリヘッダーテキスト」を活用しているでしょうか？ 著者自身、業務の中でメールマーケティングを含むデジタルマーケティングのコンサルティングを行っています。プリヘッダーテキストというものを認識しているマーケティング担当者、メール配信担当者が少ない事に危機感を感
Email on Acid - Email Pre-Deployment Checklist
Test without limits Don’t let a simple mistake or rendering issue derail months of hard work on the perfect email campaign. With unlimited email previews on 100+ of the latest devices and clients (including dark mode), you can be certain your messages display as intended—on every device, in every inbox. Deliver error-free messages in less time with the most comprehensive and secure email preview t
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Inline Styler