サイトのデザイン変更をしました
まだ調整は残っていますが、このサイトのデザインを変更しました。
前の物も気に入っていたので変更の必要は無かったのですが、以下の理由から変更することにしました。
- HTMLのコーディングの見直し(XHTML→ちょっとHTML5)
- 多様な閲覧環境への対応(固定レイアウト→リキッド)
- 制作ワークフローの見直し(DWCS5→Coda2+Scout)
- ファイルの整理・管理方法の見直し
- デザインの見直し(よりシンプルに見やすく)
前回からの調整だったので、Photoshopなどの画像ツールは使用せず全てブラウザとエディタだけで作業をしました。
今回、アイコン類にFont Awesomeを導入したことで使用する画像の枚数がサイト全ページを通じて0枚になりました。(ブログで投稿している画像除く)
アイコンのWebフォントは初めて使用しましたが、名前の通り画像では無くフォントなので伸縮が自在で色の変更もcssだけで対応可能なので非常に便利だと感じました。
また、CSSを書く際にSASSを導入したことでかなりの工数削減に繋がりました。
引き続き、微調整をしながら(ちょっと)レスポンシブ対応をしようと思っています。
あまり見た目は変わりませんが、スマートフォン、タブレットで見たとき少しだけ見やすくなるはずです。
キーワード
- html5
- css3
- webfont(Font Awesome)
- レスポンシブ・ウェブデザイン
- ブラウザ・イン・デザイン
ワークフロー
- Coda2
- Sass(Scout)
結局使わなかったもの
- grunt.js
- image Optim
- jpeg mini
- CSS3PIE
- pjax