ユーザビリティ向上小技
躓いて調べたこと、思った事を漸進的に。他サイトに埋め込まれたフラッシュからのリンクが機能しない場合
信頼されていないSWFファイルからHTMLページを保護するためにFlashの初期設定で出力するHTMLコードは[sameDomain]です。このため外部サイトのHTMLファイルに貼り付けて、getURLでジャンプする場合、AllowScriptAccessパラメータを[always]にすると解決する事がある。ルートディレクトリ内のファイルへの内部リンクの書き方
<a href="http://hogehoge.com">HOME</a>よりも<a href="./">HOME</a>ひとつ下のディレクトリからルートディレクトリへ
<a href="../">HOME</a>
ふたつ下のディレクトリからルートディレクトリへ
<a href="../../">HOME</a>
CMSってほどでもない場合
優れたコンテンツマネージメントシステムの登場によりサイトの保守管理が容易になりました。 そんな便利なツールが無かった時代の、エディタで手動更新してFTPでアップロードして...といった作業から解放されます。しかし、既存のサイトで将来的にもサイトの規模が大きくならないようならば、リニューアルして初期からこれらを導入する他に、PHPを使って管理の負担を軽減することが出来ます。 実はこのリンク集もそうしてますが、以下に例を。(※ページの拡張子は○○.phpになります。)※全角カッコ→<?php include ("meta.txt");?>:Ajax,CSSを追加・変更する時など。
<?php include ("header.txt");?>:ロゴやキャンペーンページへのリンク等。
<?php include ("menu.txt");?>:リンク先の追加/削除時等。
<?php include ("footer.txt");?>:メールアドレスの変更時等。
プルダウンメニューの表示エリア
プルダウンメニューは表示エリアが少なく、スッキリした見た目になるが、ネット初心者には、見えない項目があるのに気づかない時がある。プルダウンじゃなく見えるようにするにはselect タグに size="数値"とする。エラーページとリダイレクト
もし、訪問者が最初にアクセスしたページが「404エラー:NotFound」だったら、URLを削ってルートディレクトリや一階層上のURLへアクセスすることはまずないだろう。下記は、移動した全ファイルに記述する必要があるので数が多いと大変。ファイル毎に記述する場合は;
.htaccessで記述する場合は;
地図を印刷する人にも配慮
店舗や会社の地図がJavascriptでウィンドウサイズを指定されて開くページだと、印刷するのに不便。(制作側から見て)小さいウィンドウだとツールバーやアドレスバーはデザイン的にバランスが悪いと思うのだろうけど、「マウスで右クリックして印刷」を知らない人には不親切。入力フォームを大きく
フォームに入力エラーがある時にエラーメッセージを出す前に、タイプミスに気づいて貰いやすいようにinput タグをstyle="font-size:数値"とする。スタイルシートでもOK。CSSと文字サイズ
スタイルシートで文字サイズを指定するときは、訪問者のブラウザでサイズ変更ができるように "px" ではなくて "em" や "%" で指定する。外部リンクのターゲット指定
新規ページ・タグが増えすぎるので、むやみにリンクのターゲット指定に "top" や "_blank" を使わない。.htaccessで文字コードの一括変更
ファイルに文字コード指定のメタタグを書いていないと、一部のブラウザで文字化けする。今更、すべてのファイルに書き足すのは面倒なので.htaccessで AddType "text/html; charset=Shift_JIS" .html ←最後は改行。逆に "Shift_JIS" でないHTMLファイル(下層ディレクトリも含めて)は文字化けするので注意。
ポップアップヘルプは進化中
追記:これ素敵かも→Tigra Hintsどんなポップアップヘルプがいいのだろうかと、あれこれ調べている途中。以下は、知る範囲です。
HTMLタグ中に title="テキスト" とすると、オンマウスで文字を表示。
でも、目立つようにしないと気付かれないかも。5秒ぐらいで消えるので、短い説明向き。
例えば→ acronymってタグ。CSSで文字を目立つようにすればマシだろうか。
| 確認したブラウザ | |
| Internet Explorer 6〜 | ○ |
| Firefox 1.5〜 | ○ |
| Opera 9〜 | △(ステータスバーに表示) |
JavaScript + CSSで行うのは、目立つ分、使いすぎるとウザイ。 >>サンプルで確認する
| Internet Explorer 6〜 | ○ |
| Firefox 1.5〜 | × |
| Opera 9〜 | ○ |
