ダイナマイト氏のレイアウトが
カーリーブレース氏によって親切に
レイアウトされた後
、それが必要なすべての人のために、完成したレイアウトのある種のテストメカニズムを賞賛、批判、および実行するために、何が起こったのかを少しテストする番でした。
私たちのタスク：
- エラーを見つける
- エラーを修正
- これらの間違いをしなくなりました
- サイトのレイアウトの品質をチェックするための特定のアルゴリズムを作成し、「プル」のプロセスですでに発生する可能性のある問題を防止する
ブラウザー間の互換性：
さまざまなブラウザで、異なる軸の下でこのページの表示を確認してみましょう。これには
http://browsershots.org/を使用します。
このサービスの作業の結果、つまり79個のスクリーンショットをアーカイブします。そのうちのいくつかは、横棒を示しています。
検証ツール：
話すことは何もありません。 パリの最高の家のように、すべてが有効です。 :)
一致する設計とレイアウト：
これを行うには、レイアウトのスクリーンショットを撮り、レイアウトに配置して比較します。 開始点として、原則として、サイトのロゴまたはヘッダーが選択されます。 この場合、ヘッダーを基礎として使用することにしました。
ステージ番号1
レイアウトレイヤーで透明度を30〜50％に設定し、結果の画像を分析します。
ロゴ
引っ越した
RSSフィード
引っ越した
著作権
異なるガイドに配置（デザイン上-左側のブロック内の画像を基準、レイアウト内-ヘッダーの左端を基準）
ヘッダー内のリンク
ヘッダー内のリンク-それらが配置されている緑の背景と完全に異なる垂直方向の配置を持っています。
右の列の配置
再びデザインからの脱却を見る
行間隔
必要未満
地下のフォントサイズ
必要以上に大きい
メニュー
デザインのホームボタン-アクティブ
同様の操作をいくつかのブラウザーで実行する必要があります。 私は次を使用します：
- Internet Explorer 7（この分析は、このブラウザーから取得した画像に基づいて正確に実行されました）
- Internet Explorer 6
- Mozilla Firefox 3.x（最新バージョン）
- Opera 9.6x（最新バージョン）
- Safari 3.1.x（最新バージョン）
技術的ポイント：
- IE6-7では、フォントサイズを大きくする方法はありません（総誤差）
- 写真については、タイトルも書くことをお勧めします
- リンクについては、タイトルを書くことをお勧めします
- アイコンのヘッダーにはピクトグラムの署名はありませんが、絵自体の下の署名によって既に定義されています。
- ロゴのリンクについては、タイトルを書く必要があります
- リンクには、ホバー状態だけでなく、訪問済み、アクティブ、フォーカスの状態があります
- コードに関するコメントをチェックします;この例では、
- フォントサイズをピクセル単位で示したり、emまたはパーセントを使用したりすることはできません
タイポグラフィ：
次に、タイポグラフィを確認します。 ほとんどすべてのサイトで、クライアント（管理者）はテキストを挿入する権利を持っています。 確認してみましょう。かなり複雑ですが、正しくフォーマットされたテキストに遭遇するとどうなりますか？
この目的のために、さまざまな要素とタグを含むテストをコンテンツ領域に挿入します。これには、
http：//loremipsum.banzalik.ru/からテキストを取得し、レイアウトテキストのスタイルをチェックするために必要な構造を使用します。
比較のために、「参照」レイアウトがVerskaの画面に添付されました。
最後のスクリーンショットからどのような結論を導き出すことができますか？
- クライアントはサイトを埋めるときに苦しみます
- テーブル、リストなどの要素は、このプロジェクトでの使用に完全に適合していません
- サイトがいっぱいになると、レイアウトデザイナーが表示されます
印刷可能なバージョン。
最初に注意したいのは、印刷の最適化がないことです。
順番にすべて：
- 上からの大きなインデント
- 会社のロゴの欠如
- ヘッダーのグラフィック要素-印刷版では不要です。おそらくヘッダー全体を安全に非表示にできます。
- リンク、見出し、テキスト-私たちは白黒でそれを行います、私たちはレーザー白黒プリンターの時代に住んでおり、それらのカラーテキストはくすんで見えます
- Rssアイコンを紙に
- 左の列のその他のリンクは不要です