iPadでstinger5のレスポンシブデザインを確認できる9つのチェックサイト

レスポンシブwebデザインとは

stinger5はレスポンシブwebデザインに対応しているそうです。

これは、アクセスしたデバイスのディスプレイサイズに応じて、ページの内容を最適な表示内容に変える仕組み。

従来使われているブラウザの種類に応じて複数のファイルを用意する方法に比べて、単一のファイルで済むため、メンテナンスが容易というメリットがあるそうです。

ちゃんとレスポンシブしてるの?

iPadで自分のブログデザインをカスタマイズしていく中で、iPhoneなどで表示させた場合、表示がくずれずにちゃんとレスポンシブされているか、確認したい。

@kyotapyは、まだガラケーなので、自分のスマフォで確認もできず、かといって周りの人に確認してもらうのも気恥ずかしい。

ということで、iPadでレスポンシブデザインを確認できるチェックサイトをいくつか見つけました。

どのチェックサイトも基本的に入力ボックスに確認したいサイトのURLを入力する方式です。

以下は@kyotapyの環境(iPad第3世代、回線3G)で試した感想です。

mattkersley-Responsive Web Design Testing Tool

http://mattkersley.com/responsive/
iPadだと少し端っこが切れて表示されます。
mattkersley


media GENESIS-ResponsiveDesignChecker

http://responsivedesignchecker.com
表示が速く、デバイスの切り替えも分かりやすい。
media genesis


iResponsive

http://www.isresponsive.com
表示はあまり速くないが、見やすい画面表示。
iresponsive


Browser Stack-Responsive Design Testing across Devices

http://www.browserstack.com/responsive
iPadだと表示が遅く使いづらい。
browserstack


Responsivedesigntest

http://www.responsivedesigntest.net
表示は速いが、使いにくいユーザインタフェース。
responsivedesighntest


Photofluid4

http://protofluid.com
“LaunchPhotofluid”ボタンから確認画面へ。表示が速く使いやすい。
photofluid4


Responsivepx

http://responsivepx.com
表示が速く、デバイスのディスプレイサイズを直接入力して確認するタイプ。
responsivepx


quicktools.com

http://quirktools.com/screenfly/
表示が速く使いやすい。
quicktools


responsinator

http://www.responsinator.com
表示速度はまずまず。iPhone6やiPhone6 Plusのディスプレイサイズも最初から用意されています。
responsinator


自分のサイトだけでなく、大手メーカーのホームページなども確認してみると以外な企業が対応していたりします。

今はまだ、ブラウザの種類に応じてアクセスさせるファイルを変えるのが主流のようです。

レスポンシブwebデザインのお手本

以下のギャラリーサイトには、日本の秀逸なレスポンシブwebデザインが紹介されています。
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

こちらで紹介されているサイトを、上記のチェックサイトで確認してみても勉強になると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です