マークアップレイアウトの提案といくつかのより一般的な質問

Question

私は、以下の基本的なレイアウトを説明しましょう：

|----------------------------| 
| title banner    | 
|       | 
|----------------------------| 
| logut-row     | 
|----------------------------| 
|  aN     | 
| <<to be explained>>  | 
|       | 
|       | 
|       | 
|       | 
|       | 
|       | 
|----------------------------| 
| footer      | 
|----------------------------| 


a1: 
| Use entire width for text | 
| and images.    | 

a2: 
|nav- | con     | 
|iga- |      | 
|tion |      | 

a3: 
|nav- | con1  | con2  | 
|iga- |   |   | 
|tion |   |   | 

a4: 
|nav- | con1 | con2 | con3 | 
|iga- |  |  |  | 
|tion |  |  |  | 

• 「タイトルバナー」一つまたは二つの画像が含まれ、クリックできません。
• "logut-row"には、ユーザーがログアウトするためのテキストといくつかのフォーム要素が含まれます。
• "footer"にはいくつかのリンクとテキストが含まれます。
• 上記の3つの部分はすべて、1つの列のみを持ちます。
• "a"は、列（a1）、2列（​​a2）、3列（a3）、または4列（a4）ではありません。
• "conN"は、Nが空の文字列または1-3の主コンテンツである可能性があります。
• コンテンツは、ナビゲーションメニューの列で1〜3列にすることができます。ナビゲーションメニューの列と単一の列がない特別なケースもあります。
• この列は別々の部分です。 col1で始まるテキストはcol2では続行されません。むしろcol1はテキストを保持し、col2は最新のニュースのリストのような無関係な情報を保持するかもしれません。レイアウトに関する

---

質問：（NR 4が最も面白いです）

1. 私たちは、幅が固定され、周り1000pxすることができ取り払わ。コメント？
2. 異なるフォント幅のレイアウトをよりスケーラブルにするには、emを使用して幅を指定する必要がありますか？
3. 今から約1年後にウェブサイトが公開されるので、IE6のサポートをスキップし、IE7、IE8、Firefox 3.x +、Safari（バージョンは決定する）に焦点を当てます。コメント？
4. これに関するマークアップとCSSの提案？
5. どのバージョンの（X）HTMLとCSSをお勧めしますか？どうして？
6. 小さな画面のデバイス用のバージョンは、カスタムCSSに基づいているか、レイアウトマークアップに違いがあると思いますか？

Answer 1

1. レイアウトを作るためにどのような寸法を決定する際に、私は通常、彼らは何の通常まともな指標だなどGoogle.com、Yahoo.com、BBC.co.uk、のような主要なトラフィックの多いサイトを参照してください受け入れ可能なレイアウトディメンションです。現在のところ、Googleニュースのレイアウトは100％幅に自動調整されますが、最小幅は765pxです。 OBCOのBBC.co.ukは、固定レイアウトが974pxです。同様のタイプのサイトを独自に調査したいかもしれませんが、私が現在取り組んでいるサイトは800pxの固定幅です。これは、私たちが提供しているコンテンツの種類を表示するための合理的な次元であり、ネットブック/サブノートブックのユーザーを疎外させることはありません。
2. いいえ。ウェブサイトのサイズは、絶対的に、ピクセル単位で、または画面/ウィンドウサイズに対して相対的に指定する必要があります。書体の高さ（または幅）に応じてレイアウトの幅を定義する理由はありません。フォントサイズを大きくしても、ユーザーの画面解像度が自動的に高くなるわけではありません。固定幅/固定幅フォントで作業していない限り、各テキスト行の文字数を定義できるため、レイアウトの寸法を型の大きさに比例させることはあまりありません。テキストは自動的に列を囲みますとにかく幅。
3. 私は個人的に、開発時間を短縮するためにYUIやjQueryのようなフレームワークを使用します。これらのフレームワークはまた、異なるブラウザ間の矛盾を大きく隠します。 jQueryは、さまざまなブラウザ間でのECMAスクリプト実装の不一致を隠します。 YUIはほとんど同じことをしますが、ほとんどの主要なブラウザで機能する高度なUIコンポーネントとCSSリセットも提供します。これを越えて、私はもはや標準のサポートについて心配していません - IEのようなブラウザを嫌う。
4. レイアウトはかなり単純です。テーブルレスレイアウト（ボックスモデル、フロート、クリアなど）を作成し、コンテンツからプレゼンテーションを分離する方法を理解していれば、それは良いことです。
5. XHTML 1.0が現在のW3C勧告です。私はXHTML 2.0がまだ主要なブラウザでサポートされているとは思わない。 IEはまだXHTML 1.0を完全にサポートしていないので、HTML互換のXHTMLを書くのが最善です。 CSS1はほとんどの主要なブラウザで完全にサポートされていますが、CSS2はで、ほとんどがです。
6. 私たちはモバイルデバイスに特化したフォーマットの別バージョンのサイトを立ち上げる予定です。 tvanfossonが言及しているように、モバイルユーザーはデスクトップユーザーとは異なるコンテンツに興味を持つようです。バナー、写真、その他の画像のようなものは削除または縮小する必要があります。ナビゲーションインターフェイスとウェブサイトのフローも変更する必要があります。

Answer 2

（6）に関して、私たちが取り組んでいるのは（他の多くのものと同様に）モバイルデバイスのための完全に別個のインターフェースを持つことです。モバイルデバイスがサイトに当たる可能性はかなり高いです。モバイルユーザーがサイトにアクセスしたがっている可能性が高い場合、最も可能性の高い部分を特定し、モバイルデバイス用に可能な限り最良のインターフェイスでこれらの機能を提供するために別個のアプリケーションを作成します。私たちは主にiPhoneをターゲットにしています。なぜなら、私たちのサイトにアクセスすることが主なモバイルデバイスだからです。

主な強調点は、私が "コンテキスト"データマップ、 "ライブ"データなどと呼ぶものです。アイデアは静的な情報がたくさんあるかもしれないということです。しかし、外出先では、比較的小さいです。関心があるのは、そこに到着するのに重要なデータ（地図、天気、交通）、または私が行っても、そこに着くか（閉鎖、可用性）に変化する可能性のある情報です。もちろん、これはユーザーの人口や情報の入手方法の選択肢に大きく依存しています。

Answer 3

1. - 800x600が稀になっています。しかし、サイズ変更可能なレイアウトについて考えてみましょう。

2. いいえ - 画面は小さいがフォントが大きいユーザーは、ホールドスクロールが表示されますが、これは大きなノーノです。

3. IE7/8、FF3、Safari 3、およびChrome。 Operaのボーナスポイント。

4. Blueprint CSS。 CSSをリセットします。 JSのためのjQueryが必要です。

5. 4.0 XMLツール、CSS 1.0を使用している場合は、TransitionalまたはXHTML 1.0、2.0からの重要でない拡張が可能です。 Xがページの正当性を検証して、有用な移行属性を失った場合、Xの実行は重要ではないということを推論します。

6. 単純にカスタムCSSに基づいている可能性があります。あなたが持っているモバイルユーザーの数、自分の重要性、サイトの性質によって異なります。

Answer 4

数字が1の場合は、960ピクセル幅で固定することをおすすめします。例と利点については、the 960 Grid Systemを参照してください。この数値はグリッドに非常によく分割され、1024 x 768（またはネットブックでは600-ish）の解像度で簡単にすべての主要ブラウザ（+スクロールバー）で動作するはずです。