いいウェブサイト

産業的、工業製品な意味で「いい」
これらが満たされていれば完成度が高いと感じられるが、本やチュートリアルにはやり方が載っていない
- 環境の変化によって動かなくなったり、ベストプラクティスでなかったりする
  - 常にキャッチアップが必要
- 粒度が細か過ぎて言及しにくい
- しかしもうほぼ答えは出ているのだから簡単に実装可能になって欲しい
うまく再利用可能な形にもっていきたい
- 自分用のsnippetやlibraryを作る
  - メンテナンスが重要
  - コンポーネント?
- いい開発者はやってる

これらが最初から設定されている環境を作りたい

アクセシビリティが高い
- 正しく構造化されマークアップされている
- キーボードで操作できる
余白に一貫性がある
文字サイズに一貫性がある
読み込み時にちらつかない(Flash of Unstyled Content = FOUC)
- 表示されるまで描画を待つ
- フェードインアウトを入れる
- ページ切り替えに唐突感がない
- 外部サービスを埋め込んだ時にいかにうまく制御するか
読み込み時にフィードバックがある
インタラクションにフィードバックがある
余計なスクロールバーが出ない
- モーダルウィンドウが出た時に下のレイヤーを止める
- URLなどの文字がはみ出さない
faviconがある
- apple touch icon、Androidのカラー
OGPが設定されている
スマートフォンのポートレイトでもランドスケープでも問題ない
ウィンドウサイズを変えても変な崩れ方をしない
文字サイズ(ズーム)を変えても崩れない
- 画像を幅100%にした場合、max-widthをつけておかないとズームアウトしても小さくならない
Modern Web Guidance

やりすぎ

別の視点

いわゆるウェブサイトを想定すると上記のような考えになるが、ブラウザといういろんなものが実行できる環境と考えると、また面白さや良さは変わってくる
- 好きなウェブサイト

バックリンク 2