タグ

レスポンシブに関するochanoco_naocoのブックマーク (3)

  • HTMLメールのコーディング、デザインで気をつけるポイント | MIFURU

    01/18/2015 / Programming HTMLメールのコーディング、デザインで気をつけるポイント 先日、業務でHTMLメールのコーディングを行ったんだがこれがかなりのくせ者で知らない世界を見た気がした…笑 社長からは全部tableタグで書けばなんとかなるって言われたから参考になるサイト何個も見て進めたんだけど全くなんともならなかったので重要なところをまとめる。 まずは基 【メーラーの依存】 HTMLメールはメーラーの性能によって全く違う崩れ方をする。 有名どころでいうと Outlook gmail Yahoo! mail Apple mail Thunderbird かな ブラウザ系はこれにIE Firefox chromeなどの依存も若干出てくるようだ。 【HTMLは避けよう】 先に書いたメーラーの問題でHTML5で書くとうまくいかないらしい。どうなるかは

  • HTMLメールのレスポンシブ化。 | ネクストページブログ

    HOMEブログウェブ制作HTMLメールのレスポンシブ化。 | ネクストページブログ こんにちは、藤中です。 最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。 パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。 最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。 今回は制作者向けの情報です。 HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。

    HTMLメールのレスポンシブ化。 | ネクストページブログ
  • レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40

    スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor

    レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
  • 1