web-dev-qa-db-ja.com

表示画面サイズに基づくブラウザウィンドウサイズの統計または調査

デスクトップ(およびモバイル)の画面解像度と表示サイズに関するレポートには多くの出典と参照があり、ブラウザウィンドウのサイズに関する情報はあまりありません。どちらの情報も、デスクトップ向けのアダプティブデザイン戦略を決定する必要があるWebアプリケーションの設計に役立つと思います。多くの人はおそらくブラウザーウィンドウを最大サイズで実行していると思いますが、実際にはワイドスクリーンモニターやテレビではユーザーがそうする可能性が低くなっていると思います。レスポンシブデザインを備えたほとんどのWebサイトは、ワイドディスプレイの解像度では空けて見えるからです。

画面の解像度とブラウザウィンドウのサイズの比較に関する情報源や調査について知っている人はいますか?調査では、ユーザーがブラウザのウィンドウサイズとモニターのサイズを一致させていないことがわかっているユーザーのサブセットや特定のコンテキストであっても、インターネットの人口に関するものである必要はありません。

質問に対する明確な回答はないかもしれませんが、使用しているWebアプリケーションに応じてブラウザーウィンドウのサイズを変更するか、そのままにしておくことが既知のユーザーの動作であるかについてのシナリオまたはコンテキストは、知っておくと興味深いでしょう設計者が設計戦略を作成するときに考慮する必要があります。

更新:Google Analyticsが画面/ブラウザーサイズの比較のための視覚化を提供するようになったため、おそらくここでの回答の一部は廃止されているか、更新される可能性があります。

16
Michael Lai

私はこの質問が大好きで、あなたが質問したのも大好きです。与えられたポイント。

私はまた、アダプティブ/レスポンシブデザインへのアプローチ方法が根本的に誤解されていると思います。これは、製品デザインボードではなくUXボードを使用しているため、驚くことではありません。 UXデザイナーは、ほとんどの場合、フロントエンドエンジニアではありません。

これには賞金があるため、私はあなたが使いやすい答えを必要としていると仮定しています-それで私はそれを提供するために最善を尽くします。最後に説明しますが、探しているデータが実際に必要だとは思いません。詳細については後で説明します...まだ意味がなさそうです。

これの一部が冗長または修正である場合は許してください。それはあなたの知性や経験にわずかなものではありません。単に概念的に読み書きができる人だけでなく、将来のすべての読者に役立つ方法でこれに答えることを好みます。 Googleはこれらのことを後で見つけ、新しい知識の探求者にそれらを提供する習慣を持っています。それを念頭に置いて、少しバックアップして、レスポンシブデザインの基本的なテナントのいくつかを検討しましょう。

  1. まずモバイルからのアプローチから始め、次に プログレッシブ拡張 を練習します。通常、これは私たちのサイトが320 CSSピクセル 幅で見栄えがよくなることを確認し、画面が大きくなるにつれてレイアウトを変更することを意味します。
  2. 基本的に、ユーザーの画面のサイズを予測することはできません。スマートフォンやタブレットでポートレートモードで閲覧している人もいれば、ランドスケープモードで閲覧している人もいます。全画面モードで閲覧するすべての人を保証できたとしても、モバイルデバイスだけに基づいて何百もの置換が行われます。幅1920pxで28pxのスクロールバーを除いて全画面を閲覧している人もいれば、ウィンドウフレームで閲覧している人もいます。これに対処するために、可能な限り流動的なパーセンテージベースの幅(場合によっては高さ)で作業し、さらにレイアウトシフトを大きくするには ブレークポイントで考える を使用します。 FoundationBootstrap などのCSSフレームワークは、新しいクライアントを取得するたびに流体システムを再設計する必要を回避するように設計されていますが、ここで検討しているのと同じロジックに従います。
  3. したがって、レスポンシブデザインではメディアクエリのビューポートに既に方向付けられているため、ユーザーの画面解像度が何に設定されているかは問題ではありません。合計画面解像度に。私自身の仕事では、多くのデザイナーから見落とされがちな垂直メディアクエリを頻繁に使用しています。垂直方向のスペースが約500 CSSピクセルしかないことがわかった場合は、display:none300pxヘッダーグラフィックを表示して、コンテンツ+行動を促すフレーズがプッシュされないようにしますページ外(使いやすさ抜群!)。これは、古いタブレットや横向きのスマートフォンを使用する訪問者の方が一般的ですが、識字率の低いユーザーがサイトにアクセスして 40 IEツールバーを使用すると発生することがあります。インストール済み (buh-dum-tss)。

したがって、適切に設計されたCSSメディアクエリがすでに「水平/垂直方向のスペースはどれくらいあり、要素をどのように配置する必要があるか」を尋ねているという事実を考慮すると、ユーザーエクスペリエンスの向上という観点から、ピクセルは、消えるときに正常に劣化するのではなく、使用可能になります。レスポンシブデザインは既にウィンドウサイズで機能していることがわかります。メディアクエリは画面サイズを考慮していません。これは、極端な状況でどの程度の大きさになるかを示すだけです。

実際の静力学自体は非常に変動しやすいでしょう。全画面ウィンドウで入力していますが、右側のモニターのさまざまなブラウザーにランダムなサイズのウィンドウがいくつかあります。 ChromeのWeb開発者向け拡張機能 を介して、事前に構成された一連のレスポンシブサイズを開いたタブさえあります。ここでの私のポイント-この1つのシステムでも、11の異なるウィンドウサイズをポーリングできることです。統計結果は標準のセットではなく、ヒストグラムになります。

結果として、統計学者が記述的データよりも予測可能で実用的なデータを好むからといって、探しているデータを見つけることができるかどうかはわかりません。メディアクエリがどのように&なぜ機能するかを十分に理解すれば、知る必要がないようにすることができます。

12
Imperative

この記事には、いくつかの統計とこの問題を調査するためのアプローチがあります http://css-tricks.com/screen-resolution-notequalto-browser-window/

ここの古い統計 http://mentalized.net/journal/2009/02/19/size_still_matters/ Jacok Nielsonの提案に異議を唱える元の議論から http://mentalized.net/journal/2006/10/24/browser_size_does_matter _-_ actual_numbers /

それはcss-tricks.comユーザーのみからの統計であるため、一般の人々よりも、設計/開発コミュニティーである可能性が高いです。他のソースからGoogleアナリティクスデータを取得できた場合は、テストを繰り返すことができます。

多くのウェブサイトは現在、大きなワイドスクリーンに対応しておらず、ほとんどが960px以下に対応しています。より大きなディスプレイに適応することの技術的な問題は、潜在的な利点をある程度上回っています。ただし、これは変化しています。複数列コンテンツ用のCSS列やレイアウトをより詳細に制御するためのCSS Flexなどの新しいレイアウト機能が利用可能になったためです。

Www.remotecontroltourist.comで「ブラウザのサイズを変更してください」というページが小さすぎる場合、サイトは大きなモニターでフルスクリーンを最大限に活用するための合理的な努力をしています。

この件については、引き続き最新のホワイトペーパーを探し、理想的には見つけます。

2
Thurstan

あなたはオンラインで市場の規模を測ろうとしています...せいぜい24億人がオンラインで存在している可能性があり、そのオーディエンスをいくつかの定性的な統計的内訳にピン留めできると仮定すると...

言い換えると、Microsoft Silverlightの市場のサイズを設定しようとしましたが、基本的にはAdobe Flashで使用されているような方法論で終わりました。つまり、サンプリングに基づいて推定される潜在的な市場の割合です。たとえば、Flashは1日平均800万回ダウンロードされていましたが、98%のユビキタス性がありましたが、サンプル自体は少し臭いでした... 8ミリオン* 365 = 20億????

私のポイントは、「信頼できる」情報源を求めた元の著者であり、誰もまだ市場を適切にサイジングしていないため、実際には存在しません(チームのチームが何百万もの市場調査に費やした人から)

0
Scott Barnes