By Tara Hornor
Mar21,2014
webデザインである素晴らしく複雑な世界の中で、専門家は間違いなくズキズキ頭痛の最大の原因の一つで、いくつかの非常に困難 時には、この一見小さな問題は、解像度やデバイスが絶えず変化して改善するので、絶望的に解決策がないように見えることがあります。, ただし、webデザイナーや開発者がwebサイトをデザインするために従うことができるベストプラクティスがいくつかあり、デバイスの解像度を詳細に調
多くは、実際の画面サイズを参照するために用語を間違えます。 しかし、ハイテクに精通したwebデザイナーが知っているように、画面解像度は、画面が水平および垂直に含まれているピクセルの数に使用される用語であり、1024×768のように、前者の数は水平ピクセルを指し、後者は垂直ピクセルを指す。
フォトクレジット：Design215。,com
同じ画面サイズの二つが異なる画面解像度を持っているときに混乱する部分が来ます。 これは、異なる画面サイズが同じ解像度を持つことも意味します。 たとえば、13インチの画面は、1280×800の解像度を17インチの大きな画面と同じにすることができます。
ウェブサイトが画面に表示される方法は、画面解像度によってかなり異なります。 例として、二つの17インチのデスクトップモニタは、1024×768と他の1280×800であると、異なる解像度を有することができます。, 低解像度（1024×768）は、ディスプレイをできるだけ鮮明に保つために、より大きなサイズの要素を表示しますが、これはまた、ページの少ないが、画面に収まるこ 高解像度のモニターは、このような全体の倍プラス少し下などのウェブサイトのページの多くを表示することができるようになり、ページ上の要素は小さいが、よりシャープに見えます。
デザインにおけるデバイス解決のベストプラクティスに関する彼のアドバイスでは、Neilson Norman GroupのJakob Neilsonは、モニターサイズのウェブサイトを設計したくない, 一つには、30インチなどのuberスクリーンを持つユーザーは、異常に広いモニターのためにウィンドウを最大化することはありません。 また、画面サイズは、あまりにも多くの形やサイズで来ます。 解像度に焦点を当てる方がはるかに効率的です。
これまでは、どの解像度を設計するかを知る方がはるかに簡単でした。 高解像度は非常に高価だったので、ほとんどのユーザーは640×480、800×600、または1024×768のいずれかの安価な解像度のいずれかしか余裕がありませんでした。
フォトクレジット：ホルヘ。,Compfight cc経由コレア
しかし、今日、消費者の大半は余裕ができる価格で利用可能な、より多くの高解像度の画面があります。 そして、モバイルデバイスの追加の考慮事項があります。 とタブレット端末やスマートフォンユーザーの指数立ち上がり、ウェブデザイナーが考えるこれらの小さい画面解像度です。
しかし幸いなことが一のためのベスト-プラクティスの選択は、解像度をデザインします。, また、奇妙なまたは昔ながらの画面解像度を持つ誰かがあなたのウェブサイトを訪問した場合、彼らはまだ肯定的な視聴体験を持っていることを確
一般的な解像度とWebデザインのための最高のサイズ。
ほとんどのwebデザイナーや開発者は、ベストプラクティスの一つは、あなたの聴衆に最も人気のある解像度のために設計を最適化することであ しかし、これは今日では非常に多くの異なる解像度で定義するのが難しくなる可能性があります。,
2012年の初めに、ほとんどのwebユーザーは1366×768、1024×768、または1280×800の画面解像度を持っていました。 これは、しかし、今日はかなり変更され、最適な解像度のサイズは、webデザインのための時間をかけて変更されますどれだけ迅速に表示するために行
最小画面解像度。
たとえば、W3Schoolsは2014年の時点で、”訪問者の99％が1024×768ピクセル以上の解像度を持っています。”これは、1024×768の最小値にケータリングするための非常に強い引数を提供します。, 政府アンダーソンもわかる統計的証拠になるwebサイト訪問者の決議にこのサイズ以上です。
世界中のトップ画面解像度。しかし、Andersonが提示する統計について興味深いのは、世界中で9％だけが1024×768を使用し、30％が1366×768の解像度を使用し、約15％が”その他”と指定されたデバイス
Mobifyの調査では、2012年のMobifyクラウドネットワーク（Mobifyを搭載したeコマースウェブサイト）上の200万人の買い物客の活動を分析しました。, この研究では、いくつかの興味深い知見が示されました：
1。 訪問者の19.5％が1280×800のネットブック解像度を使用していました。
2. 13.5%1366×768を使用しました。
3. 11.4％がiPhoneのサイズを使用しました：320×480。
4. 7.8％が1024×768を使用し、四位にもたらしました。
5. 7.3％が768×1024を使用しており、ipadと水平10インチネットブックの一般的です。
6. 7.3%は1440×900サイズの大型ノートパソコンを使用した。
7. 6.5%は1280×1024、共通のLCDのデスクトップのモニターを使用しました。
8. 6.1％が1080p HDディスプレイ（1920×1080）を使用していました。
9. 5.1%は1680×1050の共通のワイドスクリーンの決断を使用した。
10. 3.,8％がHD+1600×900の画面サイズを使用しました。
Mobifyからの完全なインフォグラフィックを表示するには、画像をクリックしてください。
最高のサイズは何ですか？
すでに述べたように、多くの人は、少なくとも1024×768のウェブサイトデザインを最適化する必要があると主張しています。 これを是正しなければならないサイトを見てもほとんど決ます。 しかし、これが原因かなりの数の問題、特に、モバイルデバイスにアクセスするためのインターネット。 これは網デザイナーが実際に彼らの聴衆を知り、この聴衆のために最終的に設計しなければならない,
オーディエンスがわからず、デザインを特定の解像度に制限したくない場合はどうすればよいですか？
デバイスとwebデザインのベストプラクティスをいくつか見てみましょう。
SVG（スケーラブルベクターグラフィックス）の紹介。
Adam Fairheadは、WebDesignerDepotに関する彼の記事で興味深いアイデアを提示し、適切に”画面解像度を追いかけるのをやめる”というタイトルで、彼のポイントはまさにこ Fairheadは、WEBデザイナーは、もはやSVGやスケーラブルなベクターグラフィックスのために画面解像度を心配する必要, SVGはHTML5技術で、ユーザーの画面の解像度にかかわらず、画像（正確にはベクトルのもの）をコードを使用して表示できるようにします。
PPIと網膜グラフィックス。
のは、瞬間を停止し、画像の解像度を指すPPI（インチあたりのピクセル）を、議論してみましょう。 PPIは、DPILoveのこのPPIツールで示されているように、画面の解像度とインチ単位の対角線の長さによって決定される実際の画面サイズの影響を受けます。, ウェブデザイナーは、72ppiがウェブサイト内で鮮明に見えるが、ほとんどのモニターサイズが解像度と相関しているため、適切な速度でロードされることを
AppleがiPhone4で出てきたので、画面解像度の大きな問題はretinaグラフィックスです。 Retinaグラフィックデバイスは、従来の画面以上の解像度を持つものです。 なぜこれが問題なのですか？, 72ppiで最適化された画像は、200ppiより上に表示される小さな画面でぼやけて表示されるためです。
Retinaグラフィックスは解像度に依存します。
ウェブサイトをretinaに変換するためのさまざまな方法が登場しました。CSSスプライトや元のサイズの2倍の網膜画像を使用して、解像度に関係なく画像を鮮明に見せ続けるなど。 しかし、Fairhead氏は、解像度が増加し続けるにつれて、これらの方法は依然として解像度に依存していることを指摘しています。,
そして、これはまだiPhoneなどのwebページでズームインする問題を解決しません。 ユーザーがズーム可能なサイズでwebページを表示しようとすると、画像が再びぼやけます。
SVGソリューション。
SVGはベクターグラフィックスを使用するため、解像度に関係なく見栄えが良くなります。 ビットマップ画像（網膜画像）はピクセルに基づいているため、ビットマップ画像が最適なピクセル解像度を超えて引き伸ばされると、ぼやけたり”ピクセ”ベクトルは、一定量のピクセルではなく、数式に基づいているため、任意のサイズにスケーラブルです。, そこでスケートベクトル表示されクリーンで任意のサイズにより、式調整するには理由のデザイナーを使用して作成に対応。
画像クレジット：arrashthearcher.org
ビットマップではなくベクターグラフィックスを使用する他の利点は、ベクター画像の読み込み時間がサイズに関係なく同じであることです。 2000px×2000pxのビットマップイメージの読み込みに時間がかかりすぎます。 2000pxのベクター画像では、個々のピクセルを読み込む必要はないため、ベクターが20pxの小ささか4000pxの大きさかは関係ありません。
SVGの制限。,
では、SVGが完全な解像度のソリューションとして宣伝されていないのはなぜですか？ まあ、それはビットマップ画像をまったく含むことはできません。 そして、それらは設計が複雑すぎることはできませんし、ベクトルとしても負荷時間に影響します。
SVGの最後の大きな複雑さは、学習するのがかなり難しいコードであることです。 Adam Fairheadは次のように説明しています：
SVGコードは、HTMLを読むときのように”あなたの心の中で”見ることができるものではありません。 これは、要素ごとに、要素ごとに、レイヤーごとに、それぞれマップされた一連の命令です。,
したがって、webデザイナーがすでにコードの知識を持っていない場合、SVGの設計はほぼ不可能になる可能性があります。
フルスクリーンのウェブサイト。
デバイス設計に関するその他のベストプラクティスは、画面解像度に関係なく、ブラウザウィンドウ全体を埋めるデザインであるフルスクリーンwebサイトなどのwebサイトのデザインのタイプを参照しています。 このタイプのwebデザインでは、2560×1290、CSS、HTMLなどの超大型画像を使用して、大小の画面解像度でもウェブサイトがよく見えるようにします。, いくつかの絶対に美しいウェブサイトのデザインは、この練習から浮上している：
メイドインデイズのウェブサイトを訪問
キーカーのウェブサイトを訪問
グローブメイドのウェブサイトを訪問
グローブメイドのウェブサイトを訪問
cssチュートリアル。
CSSを使用すると、背景をフルスクリーンブラウザの幅に伸ばすのは非常に簡単です。 多くのチュートリアルでは、ヘッダーやナビゲーションメニューを表示するときなど、画像の上にHTMLを配置する, 以下は、いくつかの優れたtutsです：
素晴らしいフルスクリーンモバイル体験を構築-ポールKinlan
CSSフルスクリーンの背景（クイックヒントコード）-ジョンSurdakowski
ウェブサイトのフルスクリーンの背景を作成する-Webデザインビュー
ページトランジションとフルスクリーンレイアウト-メアリールー
フルスクリーンの制限。
解像度ではなくブラウザの設計における大きな悩みの一つは、ブラウザ間の互換性をテストする必要があることです。, そして、これは非常に身近な問題に戻って私たちをもたらします：解像度と同様に、あなたはあなたの聴衆と彼らの最も一般的なブラウザを知って 画面解像度と同様に、時代遅れのブラウザを使用するウェブサイト訪問者のほんの一部を常に失望させるでしょう。
応答ウェブサイトのデザイン。
非常に熱く議論された解決策は、応答性の高いウェブサイトのデザインを作成することです。 いくつかは、それがウェブサイトの外観を作ることができるので、応答性の高いウェブサイトは、解像度のためのベストプラクティスの究極であ,
レスポンシブデザインは、興味深いことに、googleのお気に入りのレイアウトですマートフォン、。
アダプティブデザインはより良いオプションですか？
一部のデザイナーは、要素を制御するために、ほとんどのウェブサイトでは適応設計が優れていると信じています。 このオプションを使用し固定レイアウトの変化に基づくデバイスへのアクセスに使用する。,
VentureBeatのRavi pratapが説明しているように、アダプティブデザインの利点は、ウェブサイトをより簡単にカスタマイズできることです”モバイル顧客の特定の意図のために構築された高度に差別化されたエクスペリエンス。”しかし、再び、私たちは適応設計によるデバイス解決の問題に遭遇しています。
ピクセル-完璧な応答Webデザイン。,
レスポンシブウェブサイトのデザインは、多くのウェブサイト、特にデバイス間で同じ経験を提供したい人にとって素晴らしい流動的であるという点で、適応的なデザインの問題を解決します。 あるウェブサイトは適用範囲が広く、カスタマイズされた経験を必要とするとき適応性があり、敏感余り ピクセルパーフェクトレスポンシブデザインは、両方のタイプのデザインの最良の側面を組み合わせることにより、レスポンシブウェブサイトまたは,
ScreenflyのProStoryウェブサイトを見てみると、レスポンシブデザインの柔軟性が示されています。
適応設計のように、ピクセル完璧な応答設計は、ウェブサイトが特定のサイズに適応することができます。 このデザイナーを精密に制御それぞれのピクセルのウェブサイトの機能を正確に希望する異なる。 レスポンシブデザインと同様に、pixel-perfect designは柔軟で流動的で、デザインのあらゆる部分（画像、コンテンツなど）をデバイスのサイズに関係なくスケーリング, デザイナーだけで指定の投資を維持しながら、生産性のためのピクセル-正確なサイトになる方は受付にお申し出ください ボーナス? かに該当するGoogleの好デザイン
どのように画面解像度に影響するプロのデザイナー。
画面解像度は、より高い解像度が作成され、web技術が進化するにつれて、webデザイナーがwebサイトを作成するときに心に留めておく要因であり続け このため、webデザイナーは、クライアントの聴衆だけでなく、いくつかのベストプラクティスを知ることが,
異なるクライアントは、ユニークな方法で聴衆に到達し、彼らの聴衆がそれらに遭遇する場所に応じて合わせた経験を提供したいです。 多くのお客様は、平均組み合わせ機能などのク対応のウェブサイトデザインSVGます。
webデザイナーとして、それはあなたのクライアントがこれらの目標を達成するのを助けるための最良の方法について知らされるためにあなたの仕事
