スモールスクリーンレンダリングに必要な知識メモ

Quick Tips

Coding tips

1. Use terse, efficient markup
2. Avoid frames
3. Avoid pop-ups
4. Avoid using proprietary features, or use fallbacks
5. Specify image height and width
6. Use alternative text on images
7. Have fallbacks for JavaScript and dynamic effects

Testing tips

1. Test in Opera, in Small-Screen view
2. Test with graphics turned off
3. Test with JavaScript turned off
4. Test with no mouse

Small-Screen design tips

1. Design with document order in mind
2. Design the small-screen version for maximum readability
3. Only use images suited for a small screen, hide the rest
4. Be careful with the use of colors, font sizes, and alignment

コーディング

1. シンプルなマークアップをする
2. フレームは避ける
3. ポップアップは避ける
4. 著作権を有する機能もしくは、システムを使うことを避ける
5. 大きなイメージは使わない
6. イメージには代替テキストを入れる
7. Javascript やダイナミックエフェクトに対しては、代替システムを持たせる

テスティング

1. Operaを使ってスモールスクリーンレンダリングを使う［SHIFT］＋［F１１］
2. グラフィッなしで表示する（Firefox windows developerを使えばいい）
3. Javascript無しで表示する（Firefox No scriptを使えばいい）
4. マウス無しで操作してみる（TABで操作してみる）
   ？：focusの指定で背景を変えてみるようにしてみはどうか

デザイン

1. デザインは文書（コンテンツ）が求められることを念頭におく
2. 最小限読みやすいようにスモールスクリーンのデザインを心がける
3. スモールスクリーンに適したイメージ画像を使うようにして、あとは隠すようにする
4. 色や、文字サイズ、アライメントには注意して使うようにする

一応、Operaのサイトをモチーフにして作成してみるといい。IE表示でもキレイに表示されていた。ただし、OperaとIEとは、全く表示が異なることを頭におく。携帯電話の画面サイズを考慮して、イメージサイズを最小幅に落とすようにする。

IE表示の場合は、screenが適用される。そのため、フレキシブルな横幅設定で左側ブロックのメインコンテンツを最低限守るようにしておく。

Operaの場合は、handheld が適用される。classに複数指定でスモールスクリーンで表示させないイメージなどを隠すようにする。