web-dev-qa-db-ja.com

テーマがすべてデザインに関するものである場合に、さまざまな画面サイズに対処する方法

すべての人がコンピュータモニタの画面解像度が同じであるとは限りません。 15インチのワイドスクリーンディスプレイを好む人もいれば、17インチ以上のコンピューターエクスペリエンスを好む人もいます。

私のモニター(17 '' 1280w x 1024h)で見栄えのするWebページをデザインしています。

ラップトップでテストした場合(モニターよりも高さの解像度が低い)、ページが分割されて感じがよくなるためスクロールする必要があるため、見栄えがよくありません。一度にすべての良い部分を手に入れることはできません。これは、設計から失われることを意味します。

私の質問は、これが私のモニターに慣れているので私の心のゲームであるかどうかです。そうでない場合、どうすればそれを処理できますか?

私は自分のページを表示したくないが、ここでテンプレートモンスターの意味の例を見つけた http://livedemo00.template-help.com/joomla_35840/

2
EnexoOnoma

そのため、さらにモバイルの画面サイズにも、レスポンシブウェブデザインと呼ばれる新しい手法があります。 CSSメディアクエリと追加のサーバーサイドテクニックを使用して、画面サイズに応じてコンテンツとレイアウトを調整することについてです。深く掘り下げていませんが、HTML5とCSS3に基づいていると思います。

ただし、現在のサイトにはまったく新しいレイアウトアプローチが必要です。

リンク: レスポンシブWebデザインの概要レスポンシブWebデザイン:それの概要と使用方法実用的なレスポンシブデザイン適応:レスポンシブデザインが実際にサーバーで始まる理由Golden Grit System

重要なリンク: レスポンシブデザインがクールでない11の理由!レスポンシブWebデザインか別のモバイルサイトか?ええと、それに依存します。CSSメディアモバイルのクエリはFool's Goldです

5
FrankL

ここでFrankLに同意する必要があります。現在の傾向は、HTML5とCSS3(特にメディアクエリ)を使用したレスポンシブWebデザインです。ただし、この機能の多くは新しいブラウザでのみ機能することに注意してください。現在サイトにアクセスしているユーザー(使用しているブラウザー)に関する統計情報がある場合は、HTML5/CSS3が最適な方法であるか、または古いブラウザーで機能する同様の効果を作成する他の方法を検討する必要があるかがわかります。

応答ウェブデザインに関するリンク:

http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

1
Sheff

(残念ながら)2011年に画面で使用されている大部分の解像度は最近確認していません。ただし、少なくとも1024 x 768に対応する必要があるという考えに固執します。デザインでは、潜在的なオーディエンスの大多数に対応していない場合、作成しているのは虚栄心のプロジェクトだけです。

私のアドバイスは...ビジターの解像度の過半数(つまり、90%以上)が何であるかを見つけ出し、最低限の共通点として少なくとも許容可能な外観に対応することです。私はそれが苦痛であることを知っていますが、あなたが取り組むべきあなたのユーザーです。

0
Steve Malone

実際にはすべてのデザインの場合は、さまざまな画面サイズに調整できるように流動的にデザインしてみてください。同様のウェブサイトの例がたくさんあります。

グーグルは半流動的なインターフェースで本当に良いことをしました(縮小するいくつかのステップがあるので、私はセミという用語を使用しました、それはブラウザのすべてのサイズでスムーズに減りません)-あなたのグーグルドキュメントを開いて、そして始めてくださいブラウザウィンドウのサイズを縮小して、何が起こるかを確認します。

この種の作業に使用できるフレームワークさえあります。

0