ITを表現する

再サイクリングにBuzzwordであり、Web開発では、それは別のことを意味します。 それは努力の面で、エネルギーを節約！

CSSを記述し、デザインからHTMLを作成するための年間で、私は "車輪の再発明"として我々は一般に長期ものに時間とエネルギーを節約するの追求で、いくつかのベストプラクティスに従っています。 時間と時間が再び、私は私の将来の仕事に箱から出して使用することが、私はいくつかのテンプレートを作成する必要があり、いくつかの標準的な再利用可能なCSSを自分に語った。 完全ではないけど、私は目標の一部を達成するために管理しました。

これらはしようとしたテストの結果、自分よりもはるかに経験豊富な開発者によって作成されるので、CSSの再利用を促進で、私は、私たちに一般的に入手可能ないくつかのCSSのフレームワークを見ていたし、それらを使用するようにすることを決めた。 さらに重要なことは "再発明を避ける"。

ベテランに共通する知識が、私はペンにいくつかの重要な概念/ CSSのRE-サイクリングを可能にするために、これらのフレームワークを作成することになっているベストプラクティス/思考をしようとしている。 これはちょうど約であり、最近ではCSSの時流に乗っいくつかのCSSの開発者を助けることを願っています！

CSSのキーは、再循環：

命名規則を使用します。

これは、CSS / HTML再利用可能なを行う際に最も重要な要因である必要があります。 ページ要素に一貫性のある名前を与​​えることはほとんど、あるいは修正を加えたページのコンポーネントとそのスタイルの再利用を可能にします。 この引数に沿って、あってもHTML5は、前任者以上に大きな変化の変化では、いくつかの構造的なタグVIZを導入することである。 <article>、<section>の、<HEADER>、<aside>、と<nav> [ HTML5とは何をもたらすのだろうか？ ]。 でも、HTML 4（または低い）と、それはcon​​sistanly以下の簡単な例のようにページの標準セクションの名前を指定するのが最適です...

、あなたのプロジェクトのほとんどのページを覚えて、同じコア構造要素を有する終わる。 これらの共通のコアのページ要素を識別する....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV> 

デフォルトのスタイル（CSSリセット）をリセットします：あなたがフレームワークを使用するか、または独自に作成するかどうかは、CSSのリセットを提供しなければならない[ CSSリセットは何ですか？ ]、それらが軽減または、時には様々なブラウザ間で発生する視覚的な不整合をなくすように。 簡単な言葉でCSSのリセット機構は、このように、彼らがもたらす可能性があり、任意のブラウザのデフォルト値をオーバーライドして、ゼロまたはNULL値にHTML要素のスタイルを設定します。 これは、任意のUser-Agentのデフォルトのこれらの要素はvoid [のプロパティを設定するには、白紙の状態を提供CSS2.1ユーザーエージェントのスタイルシートのデフォルトを 。 すべてのCSSフレームワークは、リセットメカニズムの必要もありません。 あなたが自分のCSSをリセットし記述している場合は、注意の単語は、キープロパティをリセットするのを忘れてしまった場合、それはデバッグが非常に困難であるクロスブラウザの問題につながるかもしれないということです。 、覚えているリセットスタイルのコピーを保持し、作成するそれぞれの新しいプロジェクトにドロップします。

 ボディ、DIV、DL、DT、DD、UL、OL、LI、
  H1、H2、H3、H4、H5、H6、
 事前に、フォーム、フィールドの入力、選択し、テキストエリア、
  P、BLOCKQUOTE、テーブル、TH、TD
  {
   国境：0px;
   マージン：0;
   パディング：0;
  } 

要素への設定のデフォルト（ベースラインスタイル）：

あなたは（ゼロまたはnullに）特定のHTML要素の特定の属性のデフォルト値を設定した後、それはこれらの要素のすべてのインスタンス間でいくつかのスタイルを適用する必要があります。 これらのデフォルト設定では、デザインごと、またはあなたが従うベストプラクティスによると異なる可能性があります。

ほとんどのCSSフレームワークは、常にデフォルトのブラウザのスタイルをリセットすることに加えて、いくつかの新しいデフォルト値を導入しています。
これらのデフォルト値は、User-Agentのデフォルト設定（CSSリセットによって取り除か）の空隙である、これらは、ブラウザ間で一貫性があります。

覚えておいて、ベースラインのスタイルは、デザイン全体で使用することが予定されているスタイルを設定するために使用されています。 例えば、。

  htmlの{フォントサイズ：77％;フォントファミリー：MS Pゴシック、サンセリフ;}
強い、H1、H2、H3、H4、H5、H6 {フォントウェイト：大胆な; 

共通のHTMLコンポーネントと一般的なクラスの抽象的なスタイル：

そのようなコンポーネントはプロジェクト間で繰り返し使用されているので、複数ページから成るほとんどのプロジェクトは、フォーム、アラートおよびエラーは、カスタムポップアップ、ライトなどの、例えばある種のサイト全体で使用される一般的なHTML要素を持つようになり、それは提供するために有用であろうこれらのコンポーネントの定義済みのスタイルに関連付けられたクラスのセットとあなた自身に多くの時間を節約することができます。

離れて一般的なHTMLコンポーネントの再利用可能なスタイル定義を定義することから、我々は抽象的なスタイルのクラスは、タイポグラフィ、カラー、あるいはレイアウトに関連する可能性があります。 私自身は、使用する傾向がある... Clearfix、Font08、FontGrey、AlignL、DisplayBなどのような一般的なクラスを

 フォームの入力{国境：0px;背景：＃000000;パディング：0px 10pxの; _padding：のでしました。高さ：26px;色：＃000000;行の高さ：30pxの、フォントサイズ：1.1em;}
フォームのtextarea {国境：0px;背景：＃000000;色：＃000000;フォントサイズ：0.9 EM、行の高さ：1.5em;オーバーフロー：目に見える;}
 。fbold {フォントの太さ：太字、カラー：＃CCCCCC;}
 。fgrey {色：＃666666;}
 。flightgrey {色：＃BBBBBB;}
 {クリア：両方;} clearfix
 。分圧器{国境トップ：1px固体＃647B06、ボーダー底：＃9CC00A 1px固体;高さ：0px;}
 。displayb {表示：ブロック;} displayn {表示：なし;}
 。alignr {テキストが整列：右} alignc {テキストが整列：センター}
 。floatr {フロート：右;} floatl {フロート：左;} 

一般的なブラウザの癖の修正

さまざまなブラウザは、CSSのコードを実装し、CSSの仕様のサポートの様々なレベルを提供しています。 この結果、.... 我々の開発者が取り組むために残されている "ブラウザの癖"。 特に、IE6は満たすために締め切りで最もCSSコーダーを見物。 良いニュースは、これらの問題（多くの場合、と呼ぶに一緒に可能な限り再利用可能な修正を経験をもたらしているされているCSSハック ）。

覚えている、これらのハック/修正は手元に置いておいてください

  / *次のズーム1ルールはIE6 + IE7専用です。  * /
    * HTML。clearfix、
    *：第一子+ HTML clearfix {
          ズーム：1;
      } 

あなたのCSSの調整に保つ

• 再循環の習慣は一日にあなたに来ることはありません。 それを開発する必要があります。 だからあなたの再サイクリングを計画しています。 あなたは抽象的なデフォルトのスタイル、タイポグラフィの定義、レイアウト、HTML要素のスタイルなどが先に考えてみることは、このことを念頭においてください。
• また、あなたの過去のプロジェクトを振り返って、それはあなたがporjectsにわたって頻繁に使用する傾向があるスタイルを識別するのに役立ちます。 それは抽象的。
• 任意の未使用のスタイルを削除します。 この練習は "加熱発泡"と呼ばれる一般的な症状からあなたのCSSのフレームワークを維持します -
• 反復的なスタイルを削除します。
• プロジェクトを横断して移植するのに十分柔軟であるスタイルのセットを構築します。

CSSフレームワークルック·アット·

最後に。 あなたがインスピレーションとCSSのフレームワークのいずれかまたは複数を使用する予定されている場合は、HERESには、いくつかの一般的なものの簡単なリストです。....

• 960グリッドシステム ：960グリッドシステムは、960ピクセルの幅に基づいて、一般的に使用されるディメンションを提供することにより、Web開発のワークフローを合理化するための努力です。 個別に、またはタンデムで使用することができる12、16、24列：3つのバリアントがあります。 あなたは簡単に十分なあなた自身のための1つを作成することはできません何も考えず、フレームワークは、PDF形式で印刷するためのグリッドテンプレートを提供するものがあなたのページdesigns.Betをスケッチするために使用できる、あなたがたときにいくつかのシートを運ぶ場合、それは、プロフェッショナルな印象になるだろうあなたは、UI要件の収集のためにクライアントに移動します。 それはまたあなたの設計作業を開始する "10のためのスターター"を提供花火、フラッシュ、InDesignでは、イラストレーター、フォトショップ、Visioのような人気のデザイン·ソフトウェアの基本的なグリッドのテンプレートなどを提供しています。
• 青写真 ：青写真がはっきりと分類されたCSSリセット用のファイル、グリッド、フォーム、印刷、タイポグラフィ、用のプラグインボタン、タブ、スプライトなどまた含まれる独立したとして、IEのサポートを提供しています。
• SenCSs ：上記の2つとは異なり、SenCSs（発音センス）は、レイアウト用のCSSの定義を持っていません。 これは、フォント、パディング、マージン、表、リスト、ヘッダー、ブロック引用blockquote、フォームなどが含まれていません。
• BlueTrip ：名声へのオリジナルの主張は、それはブループリント、 旅行 OLIのような他の他のフレームワーク...それは、その名前を取得し、そこからが提供する最高の機能を組み合わせたということでした。 その機能セットは、24列のグリッド、タイポグラフィスタイル、ORMスタイル、印刷、ボタンなどが含まれます。
• YUIグリッド ：Yahoooデベロッパーネットワークによってあなたに持って来られては、750px、950px、974pxとで流体幅（100％）のレイアウトと同様にプリセット固定幅のレイアウトをサポートしており、容易に任意の数に合わせてカスタマイズする能力。 あなたが見ることができるように、その技術的にだけレイアウトコンポーネント。 YUIは、他のページ要素のHTML / CSSのセットを提供
• YAML（もう一つのマルチカラムレイアウト）
• Emastic

覚えておいて、CSSのフレームワークを使用すると、あなた自身のいずれかを作成するには怠惰であることを意味するものではありません...それはあなたが他の経験と失敗から学ぶことがスマートであることを意味し、TIME、および生産性の向上を救え！！

PhotoshopやIllustratorなどのツールを使って私の限られたスキルセットで、私は正直なところ私はデザイナーの私よりその私は優れた開発者に告白することができます。 しかし、Java / PHP / COBOLでコア（サーバ側）の開発と私の背景には、私のUI開発スキルに非常に肯定的な影響を与えた。 私はデザインを作成中であり、何を意味するか、私はデザインを行うすなわちたびに、私はHTML-CSSをしながら、デザインが最高のHTML-CSSに変換する方法を考え、私は、バックエンド技術についての思考を与えると合理的に確認してくださいHTMLは簡単にXSLループやPHPスニペットなどに実装することができます

長年にわたり、私はおそらくdonot HTMLやCSSとは何か手がかりを持っているのUIデザイナーがデザインに頭をスローしています。 これらすべての年私は私はちょうど私の喉デザイン彼の "コードに不可能"をshovしようとしているデザイナーが、彼のデザインが変換されるものだけを少し理解することが予想される場合、私はあまりを求めるだろうと考えてきましたに。 それは正しい助けるでしょうか？

その後、私はこのポストは本日...出くわしコーディングすることはできませんWebデザイナー ...ありがとう主！ 私はちょうど同じを感じる多くの人々の一人です...上記artitleは、ビット長ったらしいです。.. しかし、読み取り、それのすべての単語価値があります。

エリオットジェイの株式をありがとう...私はホッと！

ここからの抜粋ですElliots記事が 。

うわー、何の日！ それは1つの小さなつぶやきから始まり、全体のWebデザインコミュニティを越えて掃引するように見えた議論で終わった。 それは、Webデザイナーは、コードにできるようにするかどうかの対象に開催されたいくつかの非常に強い意見があるが表示されます。
...
我々はこの中に取得する前に、私はすぐに私がTwitterで、この朝に言ったことを要約することができます：

正直なところ、私は2010年に、私はまだ自分のデザインをコーディングすることはできません "ウェブデザイナー"を越えて来ていることにショックを受けています。 弁解の余地はありません。

...私は私のつぶやきでもう少し具体的してきたはずです。 私は、実際のサイトにフラットなデザインを回すためにも、最も基本的なHTMLとCSSのスキルを持っていないデザイナーは話していた。 意図的にコードにないことを選択しない人、誰ができないもの。 そして私もここのフロントエンドコードにのみ参照しているが、もちろんそれは、設計者はまた、驚くべきバックエンドのプログラマであるべきだと考えるのはばかげて...

我々は、コードに無理イラストレーター、300dpiので送られた "ウェブ"のデザイン、ない一貫性/使いやすさを取得します。
〜エイミー·マオン

それが遅くなってきた、私は何とかこれを包むようになってきました。 私は私に反対する多くの人々もあるでしょうし、私の意図がコードすることはできません誰でも気分を害するか、動揺することはありませんが、私が言ったことのいくつかは掘り下げるときは、常に出てくるいくつかの点を反映していることを願ってこの議論。

一日の終わりに、私は可能なコードとすることはできません上の任意の睡眠を失うことはありません。 私はただ純粋に私は、これは過去のものだと思ったように、フロントエンドのスキルを欠いているので、多くのデザイナーを見つけて驚いています。

私が書くとしてもコメントを読んで、周りに320のコメントがあったが、...続きを読む価値がそれらは。
Elliots完全なポストをここで読んでください.. コーディングすることはできませんWebデザイナー

昨日、私はGoogle ChromeのCSSをリセットで発生した問題の後に...私はユーザーエージェントのスタイルシートの領域に深いビットを掘ると考え...
CSS2.1 ...ユーザーエージェントのスタイルシートのデフォルト値にこのテーブルを見つけました（どのような"ユーザーエージェントのスタイルシート"を知らない人のために従っているユーザーエージェントのスタイルシート（仕様）は何ですか 。

CSS 2.1ユーザエージェントのスタイルシートのデフォルトの完全なリストについては、ここをクリック

昨日、他のすべての "グラウンドホッグデー"のように、私はいくつかのCSS /テーブルレスレイアウトで働いていた。 すべてのIE 7、FF 3、Chromeでうまくいったが、刚性は突然、私はGoogle Chromeで見られるいくつかの非無視マージンを見ました。 非常に奇妙なworringかかわらず、それは私がaccrossに来たことをいくつかの新しいバグ/問題でした、私の平凡な仕​​事のいくつかのスパイスは、最終的にあった。 悲しい（しかし素晴らしい）は、プローブの数分以内に修正されました...

Google Chromeは私のCSSをリセットし（：0pxマージン）は無視のような基本的に、それは見えた。 それは実際にユーザーエージェントのスタイルシート（-webkitの-パディング-スタート：40px）によって引き起こされた。 0ふらちな要素：だから解決策は、パディングを設定することにより、このスタイルをリセットすることであった。
任意の要素に起きてからこの問題を回避する良い方法は、次のようにグローバルなCSSレストを使用することです

* {マージン：0;パディング：0;}

ユーザーエージェントのスタイルシート（仕様）とは何ですか？
次の抜粋は、から取られhttp://meiert.com/en/blog/20070922/user-agent-style-sheets/ 、ユーザーエージェントのスタイルシートの詳細を読むためにリンクをたどる

しかしおそらく平凡な - - 方法CSS 1は、各ユーザーエージェント（UA、しばしば "Webブラウザ"または "Webクライアントは '）合理的にドキュメントを提示するデフォルトのスタイルシートを持っていることを示すことによってアイデアを紹介しています。 CSS 2は、適合するユーザエージェントは、デフォルトのスタイルシートを適用する必要があります（または、彼らがしたかのように動作）とユーザエージェントのデフォルトスタイルシート言語の一般的なプレゼンテーションの期待を満たす方法で、文書言語の要素を提示しなければならないという。CSS 3は、同じ心である可能性があります。

CSSの仕様は、デフォルトの表示かどうかについては、 "本物の"スタイルシートを使用するかどうかを実装に任せているので、それはあなたがすべてのブラウザのインス​​トールフォルダのデフォルトのスタイルシートが見つからないという驚くべきではありません。 Microsoft社のInternet Explorerとは異なり、同様に例えばオペラ（と私が知る限り）、FirefoxやNetscape NavigatorなどのGeckoブラウザ（ "html.css"の外観）だけでなく、Konquerorは、デフォルトのスタイルを理解することがなく、簡単に行えます。

どちらも私は、ユーザーインターフェイス（UI）開発にとって非常に新しいですしないも私はベテランと私はいつもそれを置くとして、私は後悔して、より多くのデザイナーに比べてUI開発者のプロファイルに適合します。 まあ！ 私はについて何を書いていた？ 私はUIデザイン（プロのデザイナーが休日になったとき）のビットに入るないとき...しばらくの間はすべての今して、現在（任意の小さくない年である必要があります）、私は常にカントストップは私のデザインは必要があるかどうかを考える正しくcomplientかどうかである（心から、私はあまりにたい場合は、100％の標準への準拠を逆説ことができませんでしたが）。 それから私は何がらくた、私を教えて！ ...デザインが良い、シンプルで、主に使用可能なように見えるとすれば、訪問者が逃げるべきではありません...やbounce（技術的であるため）。 素敵なテーブルレスCSSレイアウトは、すべてのスマートハイパーテキストとウェブページの皮膚の下にカスケーディングスタイルシートを知らない訪問者、...大失敗するに良い何だろう！
それが格好よく見えて、使いやすいはず...そしてすべての規格のものを付属しています。

私はジェイソン·フリードによってaccrossこのブログのエントリをstumbbled 37 Signalsのほぼ5年、2004年に似たようなことを書いて、私を信じて（認識して37の信号はありませんBasecampやキャンプファイヤーなどのようないくつかの素晴らしいWebアプリケーションを作成しましたoncesている人の場合）、ずっとその...私は完全に彼はまた、事実を言うとしなければならないものに同意するとして、私は彼のポストを読むことが幸せだったので、変わっていないと、彼女はちょうど彼の直感について語っているかについて確認されていませんので、私のものです

ジェイソン·フリード： "あまりにも多くのCSSとXHTMLと規格の話とアクセシビリティと十分な人々について話をしない方法はありません。 CSSと標準準拠のコードは単なるツールです - あなたは、これらのツールを使用してビルドするかを知っている必要があります。 偉大な、私はあなたのUIは、テーブルを使用していませんうれしいです。 だから何？ それはまだ人々が彼らの目標を達成することはできません、誰が気に。 Web標準は素晴らしいですが、人々の独自の基準（およびそれがオンラインで行うにはまだ難しすぎ）物事を成し遂げるが含まれています。

この時間を除いて、そのコード良く見える - UI設計者は同じ古い基本的なミス "の反対側の人間を忘れ"を行っています。 人間 - ないコードバリデータ - を使用するインタフェース "を参照してください。

レジに進むジェイソン·フリードの記事全文

DISCALIMER：これは、我々はすべてで基準について悩むべきではないという意味ではありません。 基準は、可能な限りを持ち、それらに固執してもいいです。 私たちは良いUIデザインは、常に100％の基準Complienceまたはその逆を意味するものではないことを理解する必要があります....

私の教訓の私のリストから、私はいくつかのUIの設計と開発ゴールデンルール... HERESにトップ10に従ってください...あなたがあまりにもそれに従っていないことを...

1。ユーザの注意を払ってください。 ユーザーがサイトを作るか、または壊すことができます。 ユーザーがウェブサイトを使用することの全くできない合計idoit、ように見えるようDONOT。 それはBADです！

2。シンプルさと、プライマリguidlinesを使用しての使いやすさを保持します。 画面上であまりにも多くのものは、ユーザーが混乱したり、元のタスクから気が紛れることが高い確率で。

3 LIMITSである... DONOTは、ユーザビリティ、アクセシビリティや標準にあまりにもお楽しみください。 事実上の標準を使用し、それらをチームに理解させる。 これは、製品の右側の一貫性を確保する

4要件をプロトタイプ。 ますので、ご使用のインターフェースが豊富で、これらの日、プロトタイピングは、常に単純なワイヤーフレームを作るよりも優れていると、後者はまともな相互作用は無効となり、それがクライアントに開発されている最終製品の鮮明な画像を提供するために失敗しました。 常に、それは最終的な成果にプロトタイプを変換する方が簡単です。 また！ プロトタイピングで任意の相互作用の問題は、開発サイクルの早い時点で問題視することができます。

5。デザインとインタラクションの一貫性は非常に重要です。 予期しない相互作用およびギズモを使用してユーザーを混乱させるDonot。

6。あなたの"デザインのミッション·ステートメント"を理解する。 遠かっは、設計ページbeignの主な行動に焦点を当てています。 また、ページ上のsecondayアクションのリストを作り、それらに優先順位を設定します。

7。サイトのユーザーに適切なフィードバックを提供します。 AJAXの周りに設計されたウェブサイトのほとんどは、ページへの変更についてユーザーに視覚的な手がかりを提供しています。 ユーザは、彼が実行するすべてのタスクの完了の承認を与えなければなりません。 Donotは、例えばのために、ユーザーが待機して推測します。 ファイルuplaodsの進行状況インジケータを提供しています。

8。適切なコントロールを使用します。 例えば、使用するためのわずかなリストのリストをドロップダウンを選択し、donotは、ユーザーが選択ボックスを使用して、200都市のいずれかを選択することができます。 ボタンとリンクの違いを理解しています。 リンクやボタンが異なる目的を持っているdonotは、他のための1つを使用しています。 簡単にページと相互作用するように右のコントロールを提供しています。 2つのレベルの深さ以上あるメニューを、使用することは避けてください。 車輪を再発明しない。 標準コントロールを使用して、非常に必要に応じてカスタマイズすることができます。 それらが作成および使用accrossサイトの準備ができて、独立してテストすることができますので、あなたのサイトに最初に手に必要なすべてのカスタムコントロールを定義します。

9 Donotは、デザインにあまり反復します。 忘れないでください！ 製品全体は、単独でより多くのその設計をされています。 設計の反復のためにプロジェクトのスケジュールに適切なタイムラインを構築し、それに固執する。 反復は、私たちが働き、どのような、問題点をピックアップしません何かを見つけるのに役立ちます。 良いインタフェースには時間がかかりますので、設計の繰り返しが直接リワークに等しく鞭ように、開発サイクルの冒頭の反復のための時間を提供しています。 あまりにも多くのリワークは、期限をjeopradize可能性があります。

10後ろに座ると、時にはユーザーのように考える。

あなたはanimoto.comを見ましたか？ よく！ これがADではありませんが、私は本当にそれが好き！ そして、それは確かにASS UIをキスされてい

私は数週間前、このサイトに出くわした。 最初のページを見て、ずっと気にDINT。 私にとって、それは、ユーザーが画像をアップロードするいくつかのトラックを選択し、素敵な写真のスライドショーに変換することができ、いくつかのリッチなFlashコンテンツを別のサイトでした。 FLVをダウンロードし、お好みの任意のサイト（YouTubeやMetaCafeに、Facebookと同類）...期間にそれを置く。

昨日、私はこのスライドショーの作成を通してユーザを取った内部流れのページを、見たとき.... 私はWOW OH行ってきました！ 私が使用されるFlashのビットが存在しないことに気づいた時。 それは確かにリッチなユーザーインターフェースであった。 すべてのUI開発者が作成することを熱望するか、少なくとも、このインタフェースを行っているチームの一員でなければならない.... 絶対に素晴らしい！ と感激！

LOOK ...持ちhttp://animoto.com/を ...と登録し、それで遊ぶ...だけ、あなたは天才を認めることができる。

私は別にリストにこの記事を読んで" のどの絶対配置
エリック·ソルで "、私は感動よりも少ないものでした。 私も原因となる、すぎなかった落ち込んでいた、正直なところ私は思っていた、なぜ私はこのように素晴らしい何かを思い付く傾ける。

通常、我々は、CSSレイアウトを作成するときに、私たちは "POSITION"または "フロート"、またはその両方の非常に悪いを組み合わせて使用​​します。 エリック·ソルと彼のチームは、彼らは列の存在をシミュレートします偽もの列技法の後に" のどの絶対位置 "として洗礼をしているCSSレイアウトテクニック、新しいタイプの完璧なテクニックの隣に定義されています。

あなたがその問題を知っているCSSの開発者たちのすべてが崩壊のレイアウト（私たちはフロートレイアウトを使用する場合は、ラップして列全体を引き起こす予期しないコンテンツの変更）を持っている...まあ！ 歴史ですね！！
それは国連書かれた標準になる前に、このレイアウト技術は、まだ非常に若いですし、そこにすべてのこれらのCSSの教祖によってゴミ箱する必要があります。 私は今それを使用することが幸せなんだよ！ ...そして、すでにFAPのレイアウトに私の以前の問題/浮動小数点非必ずしもレイアウトを変換するの真ん中に既にです...と言うことをうれしく思います" 我々は、既に同様に、このブログサイトにフォークス絶対配置を使用している " ...今、それを試してみてGO！

名声エリック！

ページ上の複数のDOM要素が、遅い、それがレンダリングされ、遅いJavaScriptのDOMにアクセスすることです。 DOM要素の数が多いため、悪いレイアウト設計することができます。 たとえば、ネストした表は、レイアウト目的で使用されている可能性があります。 意味的に理にかなっているされているすべてのHTMLタグを使用しています。 レイアウトの例DONOT使用テーブルではなく、DONOTは、表形式のデータを表示する必要がどこにそれらを使用することを躊躇し、したがって、divタグのみを使用して作成した同様の構造に、比較して、DOM要素を減らす使用します。..

HTMLページ内のDOM要素の数をテストするには、ちょうどFirebugのコンソールに次のように入力しますdocument.getElementsByTagName('*').length

あまりにも多くのどのように多くのDOM要素へのようには設定さ標準はありません。 良いmarkup.Egを持っている他の同様のページをチェックしてください。 ヤフーのホームページは、700の要素（HTMLタグ）の下でまだかなり忙しいページです。

AJAXリクエストのためにGETを使用する

データを送信し、最初のヘッダを送信する：それは、XMLHttpRequestを使用している場合、POSTは、2段階のプロセスとしてのブラウザに実装されていることが判明した。 ので、それだけで（あなたがクッキーをたくさん持っていない限り）を送信する1つのTCPパケットを生ずる、GETを使用することをお勧めします。 IEのURLの最大長は、2Kのデータ以上のものを送るので、もしあなたがGETを使用することはできないかもしれませんが、2Kです。
興味深い側の影響は、実際にはデータのGETと同じように動作を掲示せずに、そのPOSTです。 情報を取得するためのものなので、サーバーサイドの格納されるデータを送信するのではなく、あなただけで、データを要求しているときにGETを使用するために（意味的に）理にかなってはgetになります。

同期AJAX呼び出しを避ける

"AJAX"要求を行うときは、非同期または同期モードのいずれかを選択することができます。 他のブラウザの活動を処理し続けることができますが、非同期モードでは、バックグラウンドでリクエストを実行します。 同期モードでは、続行する前に返すように要求を待ちます。
同期モードで行われた要求は避けるべきである。 これらの要求は、ブラウザがリクエストを返すまで、ユーザーのためにロックアップするようになります。 サーバがビジー状態であると応答は時間がかかる場合には、ユーザーのブラウザ（多分OS）が行われるために何を許可しません。 応答が正しく受信されません場合には、ブラウザは要求がタイムアウトするまでブロックし続ける可能性があります。
あなたの状況が同期モードが必要であることを考えるなら、それはあなたのデザイン再考する可能性が最も高い時間です。 （もしあれば）非常に少ない状況では、実際には同期モードのAjaxリクエストをする必要があります。

画像を最適化する

最適化は、単に必要なレベルに画像の品質を維持し、画像の小さなサイズを維持することを意味します。 一度それらが配信のためにサーバーにロードされる前に画像を最適化するために行うことができる手続きの負荷があります。 我々はこれらの画像の作成に使用するツール（PhotoshopやFireworksなど）は、通常、ユーザーはWeb用の画像を最適化するためのツールを持っています。
•彼らは、イメージ内の色数に対応したパレットサイズを使用しているかどうかを確認するためにGIFのを確認してください。 画像は4色と256色パレットを使用している場合、そのイメージをさらに最適化されたかもしれません

•GIFのは、PNGの可能な限りに変換し、セーブがあるかどうかを確認します。 多くの場合、があります。 彼らは完全に一般的に使用されるブラウザのほとんどがサポートされているように、PNGの使用をためらうことはありません。 PNGは、透明性を含めて、GIFが何を行うことができますアニメーション機能を期待しています。

•CSSスプライトに使用されている画像については、水平に小さいファイルサイズで縦方向に、通常の結果とは対照的にスプライトで画像を配置します。 また、スプライトに似た色で画像を結合します。 これは、理想的なので、PNG8に収まるように256色で、色数を低く保つことができます。

•[favicon.icoを使用している場合は、好ましくは1Kで、それを小さく保つ。

適切にスケーリング/リサイズした画像を使用しています。

常にしようとするとリサイズした画像を使用して、すなわち、あなたがHTMLの幅と高さを設定することができますという理由だけで必要以上に大きな画像を使用しないでください。 ページ上で100pxにX 100pxに画像を表示する必要がある場合は、200x200pxの画像縮小を使用しないでください。

プログレッシブ画像を使用します。

Webブラウザはすでに徐々に画像をレンダリングします。 さらに優れた操作を行うには、単に "プログレッシブ"オプションと "インターレース"オプション、またはJPEG画像を使用してGIFまたはPNGイメージを保存します。

プログレッシブ画像の使用は祝福や障害であるかどうかなどのWebユーザーの間で進行中の議論があります。 また、プログレッシブ画像は、その非プログレッシブ対応よりも約20％以上の重量を量る。 あなたはレイアウトがプログレッシブであることによってユーザー·エクスペリエンスを妨げません。イメージを使用と考えられる場合なので、これを行うには、お気軽に。