MosaicoはD&Dで作れるHTMLメールビルダーです。OSSとしてソースコードが公開されています 従来のこの手のアプリと同じ操作法で、ブロックを追加しながら編集し、HTMLメールを作る事が出来ます コーディングモードの類は無いみたいなので、どちらかというとWeb制作の技術や知識が無い方向けのアプリとなるので、そういったクライアントや案件がある時に重宝しそうです 公開されたのはかなり前みたいですが普通によさ気だったので備忘録。ライセンスはGPLとの事です Mosaico
HTMLメールのメインエリアの横幅を調べてみました。 600px未満 paidy 460px X(Twitter) 500px chatwork 580px Adobe 600px STORES 600px nuzzel 600px note 600px codepen 620px cakes 640px giftee 640px plesk 640px MFクラウド給与 640px ユニクロ 640px CAMPFIRE 642px ホットペッパービューティー 660px ぐるなび 700px plesk japan team 700px apple 740px 700px以上・リキッド ZOZO 一部リキッド・メイン700px Facebook リキッド Peatix リキッド ぐるなびお取り寄せニュース リキッド 600px台前半にボリュームがある感じです。 最近のものは700px台
listmonkはモダンなダッシュボードのメルマガ/メーリングリストマネージャです。セルフホスト型として提供されていますのでDLして自分の管理するサーバーにセットする事になります。 数百万の購読者のいるメルマガでも対応する事が出来るパワフルなソフトウェアみたいです。管理画面もすっきりしていて肝心のメルマガ、ニュースレター等はWYSIWYGで書けますのでなかなか使いやすそうですね。 注意点としてソフトウェアとしてはα版での提供である点に気を付けて欲しいそうですが、とはいえzerodha.comという所で数か月くらい数千万のメールを処理出来ている実績はあるそうです。 バックエンドはGo、フロントエンドはAnt Designが使われているそう。ライセンスはAGPLとの事です。 listmonk
HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました! 前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。 しかし、前回までの方法ですと、Androidの一部機種で、 画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。 viewportを設定しても無効になってしまいます。 そんな難題に答えてみた本日のサンプルはこちらです。 デザイン上の注意 デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。 横幅600px以上は背景色が見えるようにします。 600px未満では縮められるようにする想定です。 レイアウトは一カラムで メディアクエリやjavascriptなどはきかないので、 横幅に応じて一カラムと二カラムを切り替えるのは難しいです。 なので、ニカラム以上のレイアウ
HTMLメールのお仕事がきて調べたことまとめ htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。 注意点 基本的にテーブルコーディング CSSはインライン 全体のサイズは600pxで作る 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須 pngではなくgifやjpgを使用する 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする 文字の自動調整をしないようにbodyにsize-adjust必須(noneじゃなく100%で) viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる レイアウトで段組やカラム分けしたいときはtableの入れ子で作る メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にす
Posted by NAGAYA on Jun 7th, 2018 HTMLメール制作の基本をご紹介する記事、後編です。 前回の「デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識」ではHTMLメールの制作にあたって事前に知っておきたいポイントを挙げてみましたが、今回はサンプルなども交えて、より実制作に即した内容をお届けしたいと思います。 グランフェアズで実施したHTMLメール初期制作の流れに沿って、下記の3点をお送りします。 今回掲載するサンプルコードは、最大幅640pxのリキッドレイアウトを前提としています。 「ブラウザ表示用HTML」をコーディング 「配信用HTML」に展開 テスト配信を実施 ※前回記事より:配信までの全体の流れ また、HTMLメールが配信できるサービスとして、利用事例があるのは下記です。 ECサイト構築・運用ASPサービス「FutureShop
久しぶりにHTMLメールを作成しました。以前記事を書いた時から状況が変わっており、改めて最新情報をリサーチしてみました! 調査編はこちらから コーディングと文字サイズの関係性 iOS10 標準メールアプリにて、コーディングと文字サイズの関係性を検証しました。 gmailアプリでも同様の傾向でした。 テンプレートはこちらを利用しています。 横幅を固定した実装の場合 横幅XXXpxで固定された実装の場合、スマートフォンから見たときのテキストサイズが変動します。 指定している横幅が大きいほど、縮小して表示されます。 環境によっては横スクロールが出る場合もあります。発生条件は確定していませんが、後から画像を読み込んだ際に発生する傾向があります。 ソースはこのようになります。 [html] <!--外側のテーブル--> <table cellpadding=
メールコーディングをする上で重要なポイント <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メールを作るってこともあるかと思いますが、これがやったことある人はわかると思いますが結構やっかいです。 特にOutlook、、ここでもMicrosoftとかい!って感じなんですが、対応しないわけにはいかないわけで、いろんな人とあーだこーだして試行錯誤した結果、納得したやり方が見つかったので共有したいと思います。 あ、ちなみにここで書くことは、HTMLメールの基本的なところとあとはOutlookでも対応するため用の1つの例と大枠イメージを共有します! まずは基本事項から まずは基本事項から押さえておきたいと思います。 何がなんでもTable構造 もうこれはお決まりです。HTMLメールの基本はTableレイアウトでお願いします。崩れたくなければ。 ちなみにtdの中とかにdivとかpとか書くのいいけど、padding系とかは使わない方がいいと思う スタイルはイン
リキッドとレスポンシブ対応のHTMLメール用gulp開発環境をつくった。 Githubにサンプルメールとともにアップ。ほぼ大抵のメーラーでうまく表示できる。 Githubと対応メーラー Outlook2010(win7): 固定幅表示/リキッドとレスポンシブ非対応のため Gmail(mac): リキッドのみ/レスポンシブ非対応のため thunderbird(mac): リキッドとレスポンシブどちらも正しく挙動する iOS 標準メーラー(iOS10): リキッドとレスポンシブどちらも正しく挙動する Android 標準メーラー(Android4.3): リキッドとレスポンシブどちらも正しく挙動する Android Gmail(Android6): リキッドとレスポンシブどちらも正しく挙動する あるあるバグ&仕様一覧 outlook2010 レンダリングがwordモード 背景画像がひけない リ
普段からテキストメールを利用している人の中には、HTMLメールの送信方法がわからない人も多いのではないでしょうか。HTMLメールの活用は、コンバージョン率の向上にもつながります。本記事では基礎的な知識から送信方法まで、詳しく解説します。 HTMLメールの特徴をおさらい! HTMLメールとは、HTML言語を使用して作成されたメールのことです。テキストメールとは違い、HTMLメールでは、文字のフォントや色、大きさを変えることができ、テキスト内に画像や動画を入れて自由にレイアウトすることが可能です。 HTMLメールを配信することで、文章だけでは伝わりにくいイメージをわかりやすく明示できるため、より顧客に伝わりやすくなります。 HTMLメールの配信は効果的?メリット・デメリット、流れを解説 特徴1.ユーザーの理解度・満足度が向上する Webサイト上で一部の文字が大きく表示されていたり、画像やグラフ
くずれないないHTMLメール レイアウト 使うべきタグと避けるべきタグを意識する. ・paddingやmarginは使わない。 ・インラインCSSを使う。 ・br、hr、heightタグは使わない。 ・全体のレイアウトを作成するときはtableを使う。 ・doctypeを指定する。 ・”wrapper div”でリセットCSSを指定する。 ・フォントはデバイスによって変化することがあるので注意する。 ・基本的なタグや昔から使われているタグを使用する。 ・背景の色は常にリセットする。 https://sendgrid.kke.co.jp/blog/?p=2223 画像 ・pngファイルは使わない。 ・画像のサイズを指定する。 ・alt属性を全ての画像につける。 ・Outlookでは画像の周囲に余白が追加されてしまうことに注意する。 ・floatプロパティは使わない。 どう作るか?テーブルレイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く