ウェブサイトを設計し、そのサイトのコンテンツがどのように表示されるかを計画するとき、私たちはしばしば理想的な状況を念頭に置きます。見出しとテキスト領域は一定の長さを持つと想像されますが、そのテキストに付随するイメージは全体のデザインで意図したとおりに動作するように表示されるように設計されています。たとえこれらの要素が応答性の高いWebサイト構築の一部として多少流動的であっても、柔軟性のある方法には限界があります。
WebサイトをCMS（コンテンツ管理システム）に導入し、クライアントがそのサイトを管理して新しいコンテンツを追加できるようにする場合は、あなたが設計した制限が絶対にテストにかけられます。あなたのクライアントが、決して夢にも思わなかったウェブサイトを変更する方法を見つけることを信じてください。設計プロセスで作業した理想的なもの以外の状況を説明していない場合、そのサイトのレイアウトは深刻な危険にさらされる可能性があります。このため、サイトを起動する前に、すべてのウェブサイトのコンテンツとサイトのレイアウトの側面を強調してテストすることが特に重要です。あなたがこれを行う方法のヒントをいくつか紹介します。
イメージサイズのテスト
間違いなく、人々がウェブサイトのレイアウトを破る最も一般的な方法は、不適切なサイズの画像を追加することです（サイトの全体的なパフォーマンスに悪影響を及ぼし、ダウンロード速度が遅くなる方法でもあります）。これには、大きすぎる画像や、あなたのウェブサイトで意図したとおりに動作するには小さすぎる画像が含まれます。
CSSを使用してレイアウト内のこれらのイメージのサイズを強制しても、サイトの元の仕様とは大きく狂ったイメージが問題になります。画像の寸法が正しくないと、CSSが適切な幅と高さを使用して画像を表示することがありますが、画像自体とアスペクト比が歪む可能性があります。それは確かにあなたのサイトの外観に悪影響を及ぼします。小さすぎるイメージは「吹き飛ばされて」品質が低下するためです。サイズが大きすぎてCSSで縮小されたイメージは、見た目がよく見えて品質は維持されますが、ファイルサイズは使用方法によっては不当に大きくなる可能性があります。
あなたのウェブサイトの作品をテストするときは、意図した範囲外の画像を必ず追加してください。不正確なアスペクト比に応じて画像のサイズを変更したり、CSSクリッププロパティのようなものを使用して必要に応じて画像を切り抜くことを検討して、これらの課題に対処するCSSと対応する画像技術を追加します。
他のメディアのテスト
画像に加えて、サイトの動画などの他のメディアもテストして、異なるサイジングとアスペクト比の値を使用してレイアウトにこれらの要素がどのように表示されるかを確認します。もう一度、サイトの応答性と、さまざまなデバイスと画面サイズでどのように機能するかを考えてみましょう。
テキスト見出しのテスト
画像の後には、Web以外のプロフェッショナルが管理するライブウェブサイトで最も問題となる次のウェブサイト領域はテキスト見出しです。これらは、（おそらく）短いテキスト行で、しばしばそのページのページまたはセクションの内容を開始します。この段落の上にある「テキスト見出しのテスト」というテキストは、この例です。
このような見出しに対応するようにサイトを設計した場合：
「テキスト見出しのテスト」
しかし、お客様のクライアントはCMSを使用して、次のような見出しの記事を追加します。
"さまざまなサイズのWebページでテキストの見出しをテストし、サイズ要件とユーザーのニーズが異なる"
その後、あなたのレイアウトは余分なテキストをきれいに収容することができないかもしれません。ちょうどあなたが最初に設計したサイズの外にあるエントリーを追加することでイメージとメディアをテストするようにストレスをかけるのと同じように、テロップのように超長すぎる行を効果的に表示するには、上記の1つ。
テキストの長さをテストする
テキストの主題にとどまらず、ページの主要コンテンツのさまざまなテキストの長さをテストすることも必要です。これには非常に長いテキストと非常に短いテキストが含まれます。これは実際には多くのページレイアウトを破壊する問題です。
ウェブページは、本質的に、その中に含まれるテキストの高さに合わせてサイズが大きくなるので、多くのテキストを含むページは通常、必要に応じて高さを調整するだけです。あなたがページの高さを制限していない限り（あなたは いけない あなたのページをフレキシブルにしたいのであれば）、余分なテキストは問題にならないはずです。テキストが少なすぎるともう1つの問題があります。これは、多くのデザイナーが設計プロセスでテストすることを忘れていることです。
テキストが少なすぎると、ページの外観が不完全または壊れてしまう可能性があります。そのため、ページのコンテンツを縮小して、それらのインスタンスで何が起きているかを確認し、その状況を処理するためにサイトのCSSを調整してください。
テストページの拡大
視力に問題がある人は、WebブラウザのPage Zoom機能を使用してWebページのサイズを拡大している可能性があります。誰かが大幅にズームした場合、レイアウトが壊れる可能性があります。これは、あなたのウェブサイトのフォントサイズとメディアクエリーの測定単位としてEMを使用したい理由の1つです。 EMは相対的な測定単位であるため（ブラウザのデフォルトのテキストサイズに基づいて）、流動的でフレキシブルなWebサイトレイアウトに適しています。
ページズームのためにあなたのウェブサイトをテストし、1つまたは2つのレベルのズームで停止するだけではありません。ページを意図したとおりに反応させるには、サイトをさまざまなレベルで上下にズームします。
ダウンロード速度とパフォーマンスについて忘れないでください
クライアントの意思決定のレイアウトの影響をテストする際に、その決定がサイトのパフォーマンスに及ぼす影響にも注意を払うことを忘れないでください。これらのクライアントが追加する画像やコンテンツは、サイトのダウンロード速度を妨げ、サイト全体のユーザビリティを大きく損なう可能性があります。これらの追加の影響を計画し、これらの影響を最小限に抑えるために開発プロセスに参加してください。
ウェブサイトが成果予算で構築されている場合は、この情報をクライアントと共有し、パフォーマンス指標のウェブページをテストする方法を示します。ページサイズとダウンロード速度にこれらの確立されたしきい値を維持することの重要性を説明し、加えられた追加がサイト全体にどのような影響を与えるかを示します。サイトをうまく機能させ、よく見えるようにする方法を訓練する時間をかけてください。トレーニングのテーマについて…
クライアントトレーニングは必須です
サイトのイメージ、テキスト、その他のページ要素をテストし、極端なインスタンスを考慮に入れたスタイルを作成することは重要ですが、それは決してクライアントのトレーニングに代わるものではありません。あなたの仕事を防護する作業は、自分のサイトを効果的に管理し、管理するためにクライアントを訓練する時間に加えて行われるべきです。結局のところ、責任を理解し、サイト上で行った決定の影響を理解している十分に訓練されたクライアントは、そのサイトを有効にしてそのサイトを維持する努力に非常に役立ちます。
