設計上の問題が発生した場合の手順
あなたがウェブサイトを構築したことがあるなら、おそらく、計画どおりのものになるとは限りません。 Webデザイナーとは、構築したサイトでデバッグされた問題に慣れていく必要があることを意味します。
時には、あなたのWebデザインに何が間違っているかを理解することは非常にイライラとなることがありますが、分析について体系的であれば、問題の原因を突き止めてより迅速に修正することができます。 それを実現するために使用できるヒントをいくつか紹介します。
あなたのHTMLを検証する
自分のWebページに問題があるときは、最初にHTMLを検証するしかありません。 HTMLを検証するには多くの理由がありますが、問題が発生した場合は、最初に行うべきことがあります。 すべてのページを自動的に検証する人はすでにたくさんいます。 しかし、あなたが習慣にあっても、問題があるときにHTMLの妥当性をチェックすることは良い考えです。 そうすれば、間違ったHTML要素やプロパティのような単純なエラーではなく、問題を引き起こすことになります。
- HTMLバリデーター
あなたのCSSを検証する
問題が発生する可能性が最も高い次の場所は、 CSSです。 CSSの検証は、HTMLの検証と同じ機能を果たします。 エラーがある場合は、CSSが正しいことが問題の原因ではないことを確認します。
- CSS検証ツール
JavaScriptや他の動的要素を検証する
ページがJavaScript、PHP、JSPなどの動的要素を使用する場合は、HTMLとCSSの場合と同様に、それらが有効であることを確認する必要があります。
複数のブラウザでのテスト
表示されている問題は、表示しているWebブラウザーの結果である可能性があります。テストできるすべてのブラウザーで問題が発生した場合は、問題を解決するために何をする必要があるかを示します。 たとえば、問題が特定のブラウザでのみ発生していることが分かっている場合は、そのブラウザが問題を引き起こしている理由を詳細に調べることができます。
ページを簡略化する
HTMLとCSSの検証が役に立たない場合は、ページを絞り込んで問題を見つける必要があります。 これを行う最も簡単な方法は、問題のある部分が残されるまで、ページの部分を削除または「コメントアウト」することです。 同様に、CSSを下げる必要があります。
単純化の背後にあるアイデアは、固定要素だけをページに残すのではなく、問題の原因を特定して修正するということです。
減算してから後ろに追加
サイトの問題領域を絞り込んだら、問題がなくなるまで設計から要素を差し引いて開始してください。 たとえば、問題を特定の
すべての取り外しの後でテストしてください。 修正を削除した場合や問題を完全に削除した場合は、修正する必要があることが分かります。
問題の原因を正確に把握したら、アイテムを変更して追加し直してください。 すべての変更の後で必ずテストしてください。 あなたがWebデザインをしているとき、小さなものがどれほど頻繁に違いを生むかは驚くべきことです。 しかし、たとえ小さな変化であっても、ページがどのように変化するかをテストしないと、どこに問題があるのかを判断できない場合があります。
最初に標準準拠のブラウザのための設計
Webデザイナーが直面する最も一般的な問題は、ほとんどのブラウザでページが同じに見えるようにすることです。 私たちは、すべてのブラウザでWebページを同じに見せることは、不可能ではないにしても非常に難しいと話しましたが、それはまだほとんどのデザイナーの目標です。 したがって、最初に、標準に準拠したブラウザを含む最良のブラウザを設計する必要があります。 それらを動作させたら、他のブラウザと一緒にプレイして、サイトのオーディエンスに関係のある古いブラウザを含めて、それらを動作させることができます。
コードをシンプルにする
問題を見つけて修正したら、後でそれらが再作成されないように注意してください。 問題を避ける最も簡単な方法は、HTMLとCSSをできるだけシンプルに保つことです。 HTMLやCSSが複雑であるため、丸みのあるコーナーを作成するようなことを避けるべきではないということに注意してください。 より単純な解決策が提示されるときには、複雑なことを避けるべきです。
助けを得る
あなたがサイトの問題をデバッグするのに役立つ人の価値は、誇張することはできません。 あなたが同じコードをしばらく見ていると、簡単な間違いを逃すことは容易になります。 そのコードにもう一組の目をすることは、しばしばあなたのためにできることです。
ジェレミージラール編集：2/3/17