標準サイトサイズ：機能、要件、推奨事項

Webサイトの開発技術は非常にです多面的なプロセス。しかし、そのすべての段階は、機能シェルと外部シェルの2つの主要コンポーネントに分けられます。または、ウェブマスター、バックエンド、フロントエンドでそれぞれ習慣的です。ウェブ開発スタジオからウェブサイトを注文した人は、しばしば機能性にのみ重点を置く価値があると信じており、これが正しい判断になるでしょう。しかし、これは非常にまれなケースで、通常はベータ段階のスタートアッププロジェクトに当てはまります。他の点では、グラフィックデザインとユーザーインターフェイスは、単にWeb開発標準に準拠し、ユーザーフレンドリーであることが求められます。

最初の礎石インターフェースデザイナー、またはデザイナーが向いているのは、サイトレイアウトの幅です。結局のところ、それのためのインターフェイスを描画する必要があります。純粋に直感的には、一般的な画面解像度ごとに別々のレイアウトを作成する方法と、すべてのマッピング用に1つのバージョンのサイトを作成する方法の2つがあります。そして、両方のオプションは間違っていますが、すべてについては順番になります。

RuNetの標準的な幅（ピクセル単位）

マス現象の適応レイアウトの開発に先立ち幅1000ピクセルのサイトの開発でした。この数字は、サイトがどのスクリーンにも適合するという簡単な理由のために選ばれました。これには独自のロジックがありますが、デスクトップには少なくともHDモニターが搭載されているとします。この場合、レイアウトは画面の中央に小さなストリップのように見えますが、すべてが1つのファイルに積み重ねられ、側面には巨大な占有されていないスペースがあります。ここで、ある人がタブレットから800ピクセル幅のタブレットからあなたのウェブサイトに来て、その設定で「ウェブサイトのフルバージョンを表示」とします。この場合、サイトは単に画面に収まらないため、正しく表示されません。

これらの考察から、我々はレイアウトの幅が固定されているわけではありませんので、別の方法を探す必要があります。画面幅ごとに別々のレイアウトを考えてみましょう。

すべての行事のためのレイアウト

レイアウトを作成する戦略として選択した場合市場で入手可能な画面のすべてのサイズは、その後、あなたのサイトは、インターネットで最もユニークになります。結局のところ、今日では、各オプションの正確な設定を行うための試みでデバイスの全範囲をカバーするだけでは不可能です。あなたが最も人気のあるモニタの解像度と画面のデバイスに焦点を当てた場合でも、アイデアは良いです。その唯一の欠点 - 財務コスト。デザイナー・インタフェース・デザイナーやコーダーは、同じ作業を実行するために5または6回に強制されますときに、すべての後、プロジェクトは当初予算価格で植え不相応に費用がかかります。

したがって、さまざまなバージョンの豊富な1ページのウェブサイトを除き、1つの製品を販売し、それを確実に行うことを目的としています。まあ、あなたがこれらの着陸の1つを持っていないと、マルチページのサイト、それはさらに議論する価値がある。

最も人気のあるサイトサイズ

両極端のトレードオフは、3つまたは4つの画面サイズのレイアウトを描画します。そのうち、モバイル機器のモックアップでなければなりません。残りの部分は、小、中、大のデスクトップ画面に合わせて調整する必要があります。どのようにサイトの幅を選択するには？以下は、2017年5月のHotLogサービスの統計であり、このインジケータの変化のダイナミクスと同様に、デバイス画面のさまざまな解像度の人気の分布を示しています。

表から、サイズの決定方法を学ぶことができますあなたが使用したいサイト。さらに、今日最も一般的なフォーマットは768ポイントのスクリーン1366であると結論づけることができます。このような画面は、予算のラップトップにインストールされるので、その人気は自然です。次に最も普及しているのはフルHDモニタです。これはビデオクリップ、ゲーム、そしてサイトレイアウトを作成するためのゴールドスタンダードです。さらに、この表では、640ポイントでのモバイルデバイス360の解像度と、それに続くデスクトップおよびモバイルスクリーンのさまざまなオプションを示しています。

レイアウトの設計

したがって、統計を分析した後、サイトの最適な幅には4つのバリエーションがあると結論付けることができます。

幅1366ピクセルのノートブックのバージョン。
フルHD版。
小さなデスクトップモニタに表示するための800ピクセル幅のレイアウト。
サイトのモバイル版の幅は360ピクセルです。

何が必要なのかを決めたとしましょうサイトの生成されたソースのサイズを使用します。しかし、そのようなプロジェクトはまだコストがかかるでしょう。今度は固定幅を使わないでもっと多くのオプションを考えてみましょう。

レイアウトをフレキシブルにする

代替のアプローチがあります。それを調整するには画面の最小サイズの下でのみ必要であり、サイトのサイズはパーセントで設定されます。この場合、メニュー、ボタン、ロゴなどのインターフェース要素は、画面幅の最小サイズ（ピクセル単位）に着目して絶対値で設定できます。対照的に、コンテンツを含むブロックは、画面領域の幅の指定されたパーセンテージに従って伸びます。この方法では、デザイナーの限界としてサイトのサイズを知覚するのをやめ、このニュアンスを打ち負かすことができます。

黄金比とは何ですか、そしてそれをWebページのレイアウトにどのように適用するのですか？

ルネサンスでさえ、多くの建築家とアーティストは作品を理想的な形と割合で提供しようとしました。この割合の意味についての質問に答えた後、彼らはすべての科学の女王 - 数学に目を向ける。

古代の時代が発明されて以来私たちの目が最も自然でエレガントなものとして認識している割合は、自然界のどこにでも見られるからです。このような比の式を発見したのは、フィジアスという名高い古代ギリシャの建築家でした。彼は、比の大部分が小を意味する場合、全体がより大きなものを指すように、この比率が最もよく見えると計算した。しかし、これは、オブジェクトを非対称に分割したい場合に当てはまります。この割合は、後にゴールデンセクションと呼ばれ、世界の文化史にとってその重要性を過大評価することはありません。

ウェブデザインに戻る

それは非常に簡単です - 黄金のセクションを使用して、あなた人間の目に最も喜ばれるページをデザインすることができます。ゴールデンセクションの公式の定義によって計算すると、不合理な数1.6180339887 ...が得られますが、便宜上、丸められた値1.62を使用することができます。これは、使用しているサイトのソースコードのサイズにかかわらず、ページのブロックが全体の62％と38％になることを意味します。このスキームで見ることができる例：

新しいテクノロジーを使用する

ウェブサイトデザインの最新技術デザイナーとデザイナーのアイデアを正確に伝えることができるようになり、今やインターネット技術の幕開けよりも大胆なアイデアを実現する余裕があります。サイトがどんな大きさであるべきかを真剣に考える必要はなくなりました。ブロック適応レイアウト、コンテンツやフォントの動的ロードなどのようなものが到着すると、サイトの開発は何度も楽しいものになっています。結局のところ、そのようなテクノロジは制限はありません。しかし、あなたが知っているように、制限なく、芸術は存在しません。デザインに真に創造的なアプローチ、すなわちゴールデンセクションを使用することをお勧めします。これにより、テンプレートに指定するサイトのサイズにかかわらず、効果的かつきれいに作業領域を埋めることができます。

サイトの作業領域を増やす方法

あなたが持っていない可能性がありますすべてのインタフェース要素を小さなレイアウトに合わせるのに十分なスペース。この場合、以前よりも創造的に、あるいは創造的に考え始める必要があります。

サイト上のスペースを最大化することができますが、ポップアップメニューにナビゲーションが表示されません。このアプローチは、モバイルデバイスだけでなく、デスクトップ上でも使用することは理にかなっています。結局のところ、ユーザは、あなたのサイトのどのカテゴリにいつも目を向ける必要はありません。彼はコンテンツのために来ました。そしてユーザーの欲望を尊重する必要があります。

メニューを非表示にする良い方法の例は、以下のレイアウトです（下の写真）。

赤い領域の上隅には十字形が表示されます。このアイコンをクリックすると小さなアイコンでメニューが非表示になり、ユーザーにはウェブサイトのコンテンツだけが表示されます。

ただし、これを行う必要はありません。常に視界に入るナビゲーションを離れる。しかし、サイト上の人気リンクの一覧だけでなく、美しいデザイン要素にすることもできます。テキストリンクに加えて、それらの代わりに直感的なアイコンを使用してください。これにより、サイトでユーザーのデバイス上の画面スペースをより効率的に使用できるようになります。

ベストサイト適応型

サイトに対してどのレイアウトを選択するかわからない場合は、すべてがあなたのために簡単です。開発コストを節約し、デバイスのレイアウトが不十分なために視聴者を失うことがないように、適応設計を使用します。

アダプティブは、異なるデバイスを同じように見せます。この方法では、スマートフォンでも、少なくともタブレットでも、ラップトップでもサイトを理解して便利にすることができます。この効果は、画面の作業領域の幅の自動変更によって実現されます。サイトに適応型スタイルシートを使用することで、最も正しい決定が可能になります。

適応設計と異なるバージョンのサイトの可用性との違いは何ですか

アダプティブデザインはモバイル版とは異なります後者の場合、ユーザは、デスクトップコードとは異なるHTMLコードを受信するという点で、サイトにはありません。これは、サーバーパフォーマンスの最適化と検索エンジンの最適化という点で欠点です。さらに、異なるバージョンのサイトで統計を数えるのがより困難になります。適応的アプローチはそのような欠点を欠いている。

さまざまなデバイスの適応性が達成されています幅のパーセンテージのレイアウトや、ブロックを使用可能なスペース（デスクトップの水平ではなくスマートフォンの垂直面）に転送することや、異なる画面用に個別のレイアウトを作成することができます。

教科書から適応可能なデザインとその開発に関する詳細情報。