Clever Geek Handbook

チェックリストのレイアウト。 クライアントに提供できるもの、やり直しが必要なもの

完璧なレイアウト あなたは午後です。 調べる方法-レイアウトは実際に使用する準備ができていますか？

あなたは顧客です。 作業が効率的に行われるようにする方法は？

レイアウト品質を評価する方法は？



チームリーダーになり、後のPMになったとき、私の前の仕事はプロジェクトのレイアウトを確認することでした。 公式で簡単に検証可能な基準を開発する必要がありました。コードの対応は、ファカプスがなく、クライアントもプログラマも「WTF？」とは言わないという特定の保証を与える必要があります。



クライアントはあなたのコードがどれほど美しいかを気にしませんが、結果は彼にとって重要です。 会社には品質コードが必要です。なぜなら、 より信頼性が高く、将来的には保守が容易になります。



要件は、govnokodではなく、それらに準拠しやすく、高品質のレイアウトを作成しやすいものでなければなりません。 このようなチェックリストを1年半作成しました。 過去6か月間、何も追加されていません。 そのため、最も重要なことが考慮されます。



それで、このリストは何ですか？



短いバージョンがhtml5checklist.com （github）で利用できるようになりました。ここでプルリクエストを送信できます。



更新履歴：







habrには、「 html面付けの要件 」に関する記事がありました。 しかし、これは請負業者/コーディング契約/マナーのTKですが、チェックリストではありません。作業の準備ができており、受け入れることができます。 彼は良いですが、悲しいかな、彼の遵守は問題がないことを保証しません。




クライアントにレイアウトを提供するためには、最初の5つのポイントに従うだけで十分です。

実動での配信-最初の6。



  1. マッチングレイアウト
  2. クロスブラウジング、エンコード、DOCTYPE
  3. 有効性（CSSLintおよびJSHintを含む）、アクセシビリティ、マイクロフォーマット
  4. CSSブロックの独立性：BEM手法を使用したカスケードの最小化
  5. サイトは、1024以上のすべての標準解像度で正常に見えるはずです。水平スクロールがなく、モバイルデバイスの画面に収まります。
  6. 実際のテキスト、レイアウトの信頼性で運転するときの作業を修正する
  7. プリプロセッサとビルドシステムの使用
  8. ダウンロード速度の確認と最適化： github.com/ihorzenich/WebPerformanceChecklist
  9. Retinaサポート
  10. Win / Mac / Linux-analogフォントの存在
  11. 写真がオフの場合の可用性（読み込み中）
  12. HTML5フォーム、リンク、検証
  13. セマンティクス。 HTMLおよびCSSのナンセンスの欠如、均一性、精度
  14. 正しいヘッダー構造（H1、H2、...などおよびTITLE）
  15. JavaScriptが無効です
  16. Flashがオフのときのパフォーマンス
  17. 大きなフォントでバグなし
  18. 最後のポイント-マイナーチェック（以下で詳細）




アイテム番号1.レイアウトの一致



完璧なピクセル ブロックの位置は、レイアウトと比較して1対1である必要があります。 テキストの最大5pxの不一致が許可されます。 曲がって描かれたブロックのサイズとレイアウトの編集を許可し、歓迎します（ページごとに1〜2ピクセルのサイズの違い）。



コンテンツが変更されると、ブロックのサイズが変更される（高さなど）ことは明らかです。これは正常です。 Pixel Perfectは、ピクセル単位のダーツ処理ではなく（適切なPMがプロジェクトの配信を遅らせて時間を浪費しないため、各ピクセルをなめるために会社のお金を浪費する必要はありません）、すべての基本ブロックが必要な場所にあること、サイズ、インデントが対応していることを確認しますレイアウト。



プラグインを介してFirefoxでチェックイン アドオン ピクセルパーフェクト 。 他のブラウザーでチェックインするには、 ModularGridを使用しますが、原則として、訓練された目で見るだけで十分です。矛盾が目立つ場合は、それらは目立ってしまいます。







2番 クロスブラウジング、エンコード、DOCTYPE



HTML5
  1. エンコード：UTF-8

    必要な理由：UTF-8は汎用性と互換性です。 これは現代の標準であり、それは未来ではなく、現在です。

    確認方法： FFツール→ページに関する情報で、表示されるウィンドウに「エンコード：UTF8」と書き込む必要があります。 このエンコーディングは、すべてのファイルに使用する必要があります：html、css、js（異なるエンコーディングのファイルが問題になる可能性がある場合）
  2. DOCTYPE: HTML5

    : doctype . doctype (canvas, header, article,...) , ( embed). HTML5 — , XHTML-. .



    : , <!DOCTYPE HTML>



    .
  3. :

    • Firefox ()
    • Chrome ()
    • Safari () Mac « Mac'» ( , - ) Preferences→Appearance, «Font Smoothing» Medium ( «Windows Standart»).
    • iPhone ( landscape portrait , .. ) + Android. viewport.
    • Opera () 12- Presto, —
    • IE7+ ( IE6 Google Frame, - )
    • Opera Mini ( Opera Developer Tools→Opera Mini Simulator, Java , : Opera 9.64→- , 9.64 JS Opera Mini, )


    .






№3. ( CSSLint JSHint), ,



Microformats
  1. js-!
  2. Valid HTML5 . :

    • Word’ ;
    • - ( HTML5 «data-*»).
  3. Valid CSS3CSS 3.0, ( ), ( margin: 10xp) .
  4. . – hCard. hCalendar, XFN, hAtom.
  5. : CSSLint JSHint
IE JavaScript error

js IE – « js-».



? : . , , , … : , , , … — .
© rossomachin



HTML5 , , . «data-» — ! !



SEO, . . ! entry-content, :)



-:





(2012 ) microdata, .



WCAG2 Conformance : WCAG.

, WCAG1 A (Priority 1) – . – WCAG2 Priority 3 (AAA). WCAG1 Priority A — www.cynthiasays.com ( addon Web Developer → → WAI). « »? WCAG . :



WCAG2:





.




CSSLint:



:

<pre // We didn't support IE7!

«box-sizing»: false,

«adjoining-classes»: false,



// Allow Safety CSS Hacks

«star-property-hack»: false, // IE8-

«underscore-property-hack»: false, // IE7-



// Stupid rules

«box-model»: false, // Developers know what is box model!

«empty-rules»: false, // Empty rules are useful for describing the layout

«floats»: false, // Grids can't fully replace floats



// OOCSS didn't suitable for real life. BEM does.

«qualified-headings»: false,

«unique-headings»: false,

«font-sizes»: false





JSHint:



( !) :

— When code is not in strict mode



:

+ jQuery






№4. CSS: ,



css FF addon Firebug

, ( ).

, , : , MCSS SMACSS.






№5. 1024 ,



Mobile viewport FF addon Web Developer→Resize

:



( ).



. Viewport. : « . ».




№6. ,



Wysiwyg , . , <p>



..

! , , — , — .

  1. .

    : , – « ?», « ?».

    , (- ).
  2. .

    : (! - ), , .


.

FF addon Firebug: HTML→Edit – // . normalize.css test.html <body>



</body>



.



html5- : header, footer, aside, nav, section, article



.. , , «» . div



. — html5-, «» html5-.




№7.



CSS (LESS/Sass/Stylus).

: .less, .sass, .scss, .styl — - .



(Grunt/Gulp) (PostCSS/Autoprefixer).

Gruntfile.js Gulpfile.js




№8.



Page Speed , base64 , CSS3 , JPG PNG JS html .

: https://github.com/ihorzenich/WebPerformanceChecklist

:
( , ), ( ) ( ).
© sunnybear.

:



: , headers, minifying – ,



: JPG PNG, Progressive JPG, ( 200-300kb ).



, base64 encode css3- ( ).




№9. Retina






№10. Win/Mac/Linux-



Alternative fonts , , . , .

Myriad Pro, Arial Narrow.



css “Helvetica”,“Liberation”, “DejaVu”,”Meera”,”Monaco”, “ Century Schoolbook L”,” Nimbus Mono L”, “URW”. .



(css font stack) http://cssfontstack.com/



OS:







№11. ()



Disabled Images ( ) , (, img font – alt-, ).

, (GPRS, ).



FF addon Web Developer→Images→Replace Images With Alt Attributes.




№12. HTML5 , ,



HTML5 Forms
  1. Label input/select .

    . .

    label – .
  2. HTML5 .

    - , ( ajax), . — javascript, , .

    Opera: javascript, , Submit – .
  3. JS- .

    . , , .

    Opera/Safari/Chrome: javascript, , Submit – .
  4. frontend — .

    Firefox 3.6: javascript, , Submit – .
  5. input type=”email/url/tel”.

    - , iPhone .

    iPhone — : // web/email-.




js-alert’, !

, id — label (a , id ).




№13. . html css, ,



Semantics , . , « » ( 2008 ).



:





:






№14. (H1,H2,… .. TITLE)



Document Outline , , . Document Outline SEO.



FF addon Web Developer→Information→View Document Outline. !






№15. JavaScript



Disabled JavascriptJS . Opera Mini .

— , 3G js- !



JS. ( ) – JS .



/ JS, - ( <noscript>



).



FF addon Web Developer→Disable→Disable JavaScript→All JavaScript.






№16. Flash



Disabled Flash Flash. :



Flash iOS-. Flash .



FF flash-: Tools→Add-ons→Plugins→Shockwave Flash→disable.






№18.



Big fonts FF:



120dpi 96 «120 dpi em».





, , :



Device Access








№19. :



Small Issues





17? , , , , - , !

, – “WTF?” — :)



:





- . ,


More articles:


All Articles