Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (37,927Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (19,377Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (18,869Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (16,908Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (16,154Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,998Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,591Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,969Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (11,321Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,307Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (11,303Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,757Views)
  • 翻訳機能をWebサイトに埋め込む方法 (10,642Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,335Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,956Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,923Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,899Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,614Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (6,198Views)
  • 【Featherlight.js】テキストをライトボックスに表示できるjQueryプラグイン【jQueryプラグイン】 (6,197Views)
  • Webサイトをレスポンシブで構築するか判断する基準について

    2013年04月03日(水)

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    レスポンシブなWebサイト構築、かなりスタンダードになってきていますよね。
    ひとつのhtmlコードで、PC・タブレット・スマートフォンに最適化されたWebサイトを構築できる、たいへん魅力的な構築手法。
    でも、だからといって、どんなWebサイトもレスポンシブで構築するのが正解なのでしょうか?

    私が購入した書籍、「Responsive Web Design with HTML5 and CSS3: Learn Responsive Design Using Html5 and Css3 to Adapt Websites to Any Browser or Screen Size」に、どんなシチュエーションでレスポンシブが有効な手段となり、どんなシチュエーションでふさわしくないのかということを、解説している箇所がありましたので、引用します。

    ・Does the client want to support the largest growing market of Internet users? If yes , responsive methodology is suitable.

    ・Does the client want the cleanest, fastest , and most maintainable code base? If yes, responsive methodology is suitable.

    ・Does the client understand that experience can and should be subtly different across different browsers? If yes, responsive design is suitable.

    ・Does the client require the design to look identical across all browsers, including IE 8 and lower versions? If yes, responsive design is not suitable.

    ・Are the 70 percent or more of the current or expected visitors to the site likely to use Internet Explorer 8 or lower versions? If yes, responsive design is not best suited.

    意訳
    ・クライアントが、インターネットユーザーの最大成長市場をターゲットにしたいと考えている場合、レスポンシブなWebサイト構築方法が適しています

    ・クライアントが、コードについて、簡潔さ、速さ、メンテナンスのしやすさを求めている場合、レスポンシブなWebサイト構築方法が適しています

    ・クライアントが、レスポンシブなWebサイト構築方法を用いると、ブラウザ間で微妙な差異が出てしまうことを認識している場合、レスポンシブデザインが向いています

    ・クライアントが、IE8と下位バージョンを含むすべてのブラウザーで同じようにデザインが表示されることを要求する場合、Webサイト構築にレスポンシブデザインは向いていません

    ・現在の(もしくは将来的に予想される)、70%以上のサイトの訪問者の使っているブラウザが、IE8か下位バージョンの場合、レスポンシブデザインは向いていません

    こんなかんじですね。

    もし、サイト構築依頼時に、レスポンシブなサイト構築の提案が出た場合は、上記を参考にして導入を決めると良いかもしれません。

    まとめ

    それぞれのサイトに合った構築方法で、費用対効果の高いWeb制作を。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.