レスポンシブ対応のHTMLメール作成のコツ
様々な画面サイズにワンソースで対応するレスポンシブWebデザインは、多くのサイトで使用されていますが、HTMLメールをレスポンシブ対応するにはどうしたらいいのでしょうか？ Webサイトの場合、ブラウザで表示しますが、メールは、メーラーで表示します。メーラーは、CSSのサポート対応状況がブラウザと異なる為、従来のレスポンシブWebデザインのテクニックをそのまま流用する事は出来ません。 では、どのようにHTMLメールをレスポンシブ対応させるのか、その方法のひとつをご紹介いたします。 HTMLメールをレスポンシブ対応させる方法 まず、HTMLメール制作の基本的なポイントは「HTMLメールの制作時に気をつけたい9つのポイント | コリス」でご確認いただければと思います。 主要メーラーごとのCSSサポート状況を「Guide to CSS support in email | Campaign Mon
利用者視点で見るレスポンシブウェブデザイン - Nothing ventured, nothing gained.
最近、個人的に不便に感じているのが、同じコンテンツにも関わらずアクセスするデバイスに応じてURLを変えているコンテンツだ。スマートフォンからのアクセスだと、"m"*1などの文字が前後いずれかに付与されたURLなどにリダイレクトされる。 そのデバイスからのみコンテンツをアクセスしている分にはさほど不便を感じないのだが、私はChromeのデバイス間タブ同期機能のヘビーユーザーであるため、頻繁に同じコンテンツをMacやWindows、そしてAndroidデバイスで見る機会に遭遇する。結果、何が起こるかというと、Androidからアクセスしていたスマートフォンに最適化されたコンテンツをMacやWindowsで見ることになり、なんとも不恰好なデザインで見させられることになる。 悪い例として出すことになってしまい申し訳なく思うが、このブログを再配信しているBLOGOSというブログメディアがある。このB
レスポンシブWebデザインの“現実的な”ワークフロー
レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。 でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない…… という、恐らく受託サイト制作では一般的であろうシチュエーション。 そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。 ■最初にレイアウトパターンを絞る 画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。 3パターンに収まるのが理想です。 メインページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ ┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き 一覧系ページ：ヘッダ／フッタ、ナビゲーション、メイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
