タグ

ブックマーク / parashuto.com (5)

  • レスポンシブ・イメージがもうすぐネイティブ実装!いまから使える?ポリフィル「Picturefill 2.x」を検証

    レスポンシブ・イメージがもうすぐネイティブ実装!いまから使える?ポリフィル「Picturefill 2.x」を検証 レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。しかし、多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日でもより多くの人に広まればと思い、いまの状況をまとめてみました。 目次 レスポンシブ・イメージのいま レスポンシブ・イメージで解決できる3つの課題 Pic

    レスポンシブ・イメージがもうすぐネイティブ実装!いまから使える?ポリフィル「Picturefill 2.x」を検証
    taky1973
    taky1973 2015/04/27
    まとめ「残念ながら、picture要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです」。実際検証して同意、本当に残念。
  • レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由

    レスポンシブWebデザイン(RWD)で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いたでもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要?」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています(FirefoxやMobile Operaにもついてるそうです)。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。(以下はiPhone

    レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由
    taky1973
    taky1973 2013/02/14
    どう実装すればよいのか悩む。切替えボタンは一番下でいいものなのだろうか(一般認識になっているのだろうか?)。実装案はviewportのinitial-scaleを外す必要がある。
  • レスポンシブWebデザインが必要な理由を分かりやすく伝える画像3つ

    なぜ、レスポンシブWebデザインのような手法で、これからはウェブサイトを作っていく必要があるのか?それを手っ取り早く説明するのに使えそうな3つのイメージのセットをご紹介。「百聞は一見にしかず」ではないですが、言葉だけで説明するよりイメージがあったほうが、伝わりやすい場合もあります。 これからの「ウェブ」は、未知の端末や未知の方法でアクセスされるようになる。それなのに、いままでのやり方で、いままでの「固定」された「ウェブ」制作をしていて良いのか?手法は必ずしもレスポンシブWebデザインである必要はないと思います。しかし、Frost氏が言うように「未来に優しい(Future-friendly)」ウェブサイトを作り始めることが、ユーザにとって一番の利益になる。そして、ユーザの利益は直接サイトオーナーの利益にもつながる。 テーブルレイアウトがCSSになり、ウェブ標準が広まり、そして、こんどはレスポ

    レスポンシブWebデザインが必要な理由を分かりやすく伝える画像3つ
  • レスポンシブWebデザインで使えそうな2つのテーブル実装例

    以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも!」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは?と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース(GPL License)で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています

    レスポンシブWebデザインで使えそうな2つのテーブル実装例
  • レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

    昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました: 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし

    レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
  • 1