ノートPCユーザーの身になってWebサイトを作らねば。

自分は普段27インチのディスプレイ+外付けでWebサイトの開発をしているのですが、それだとノートパソコンで見たときにユーザビリティ(使い勝手)が悪いサイトになってしまいます。そこで、そのヒストリーと、ササッとブラウザの解像度を変更する方法を紹介します。

僕は普段、27インチの液晶と、さらに23インチの外付けディスプレイを繋げて作業しています。

usually-workspace

その環境で作業すると、(勿論横もですが)縦がものすごく長い液晶に慣れてしまうので、ノートPCで見た場合を何も考えずに作ってしまうことがよくあります。

小野曰く、これをデザイナー病と言うらしいです。

実際にあったこと

着物ドレス絢爛着せ替えシミュレーターで・・・

kisekae-simulator-1

着せ替えの女性とデザインがほんの一部しか表示されません。デザインや素材を表示させようとすると・・・

kisekae-simulator-2

スクロールが必要になってしまいます。
デザインや素材を選ぶ度にスクロールが必要になるという手間の掛かるページになってしまいました。

普段の大画面でしか見ていないとこんなことになってしまいます・・・

kisekae-simulator-3

※今ではスクロールが極力不要になるように直しています。

kisekae-simulator-4

さて、ブラウザ幅を固定しようか・・・

ノートパソコンを開いてチェックするのもいいのですが、デスクトップ上でブラウザ幅を固定できたらいいなーと思って。おまじないのこのコードをアドレスバーに入れます。

smartfield-javascript-doesnt-allowed

あ、あれ・・・いかないですか・・・
(むかしIEで開発してたときによく重宝していたコードです)
Safariの開発メニューから、スマートフィールド検索からのJavaScriptを許可します。

そして今度こそ!

1280-by-720-safari-retina

固定できたー!
あとはこの大きさでウェブページをチェックしていくだけです。
あるいはさっきのおまじないをお気に入り登録してもいいかも知れませんね。

ほかにも…【resizeMyBrowser】

ブログ執筆時は上手く行きましたが、実は実作業段階ではうまくいきませんでした(^^;)

そこで、resizeMyBrowserというWebツールを使っていました。

resizeMyBrowder.com

プリセットでいろんな大きさのモードが登録されているほか、カスタムサイズを追加することもできます。

本来は、おなじまいで何も起こらず真っ白になり、真っ先にこれを紹介したかったのですがw

いろんなユーザーが居ることを忘れないこと。自分のパソコン・端末の解像度基準だけで考えたりしないこと。です。

投稿者: STAFF

Hello World.

コメントを残す

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