ブログのリニューアルをResponsive Web Designで強行してみた ::ハブろぐ

リニューアルしたさね

最近更新してないくせに，リニューアルしました．

現時点ではまだαリリースぐらいの状態といえますが，閲覧可能にはなったのでさっさと切り替えました．使い回せるブログテーマが出回ってないので，毎回フルスクラッチになるんですよね...(；´Д`)

今回は，自分が食わず嫌いしていた960 GridやResponsive Web Designにも手を出したりと色々と試みています．以下でリニューアルに取り入れたエッセンスを紹介してみます．

Responsive Web Design

Twitterでしょっちゅう「Responsiveうんこめんどくさーい」とか嘆いてたら，社内でResponsiveうんこの呼称が市民権を獲得しそうです．

ともかく，今回は流行りのResponsive Web Designを実践してみました．ウインドウ幅を伸縮することで，みょんみょん動くようになってます．

Internet Explorer6-8でMedia Queriesに対応させるコストを支払うのも勿体ないので，他のCSS3類の都合とあわせてIE6-8で閲覧したときには，リニューアル前の旧デザインが表示されます．

// 680pxを境界にナビゲーションから英語を除去 (LESSでかいてます)
@media only screen and (max-width: 680px) {
    #nav {
        .labelEN {
            display: none;
        }
    }
}

困ったことに，まだ画像周りの最適化はできていません．ブログツールの特性と併せて，どういうアプローチで行おうか検討中です．

その辺までできたら，また別途Responsive Web Design絡みのアプローチをまとめて記事にしようと思っています．

参考

LESSしてみた

前々からやるやる詐欺をしていたのでLESSにもトライ．

まずは変数，ネスト，演算子，Mixinぐらいを使ってみたところ．調子こいてガンガンネストさせると，コンパイル後のセレクタがすごい冗長になりますね…．

@baseFontSize: 16em; // 単位は変数が保有
@baseWidth: 9.6%;    // 96% cnvert to '0.xx... => xx%'
@contentWidth: 7.98%;

#content {
    @scopeWidth: 6.36%;

    width: @contentWidth * 100 / @baseWidth;


    font-size: 14 / @baseFontSize;

    h1 {
         width: 526 / @scopeWidth;
         &:hover {
         
         }
    }
}

プレーンCSSよりは幾らか爽やかに記述できる感じがします．ネストでセレクタが粘着質になる代わりに，classも減るのでHTML側もいくらかクリーンにしやすくなりますね．

参考

テンプレート構造を変更して軽量化

使ってるブログツール(a-blog cms)のカスタマイズの話なのでニッチな話となりますが一応．以下の方針をより過激にしたテンプレートフレームワークとかつくれるんじゃないかと．

テーマ内のツリー

admin
     + entry
          + administrator.html
     + administrator.html
content
     + top.html
     + index.html
     + entry.html
partial
     + side
          + entry.html
     + unit.html
src
     + css
          + havelog.css
          + normilize_and_highlight.min.css
     + js
          + e.js
          + havelog.js
          + highlight.pack.js
     + img
          + (image files)
layout.html

layout.htmlでは，%{VIEW}を使ってcontentとpartialから部分をincludeし，%{SESSION_USER_AUTH}を使ってログイン時のみ必要なファイルをincludeしています．たとえば以下のような感じ．

<html>
<head>
</head>
<body>
<!--#include file="/admin/%{SESSION_USER_AUTH}.html" -->
<div id="side">
<!--#include file="/partial/side/%{VIEW}.html" -->
</div>
<div id="content">
<!--#include file="/content/%{VIEW}.html" -->
</div>
</body>
</html>

よくあるカスタマイズだとTouchで隠しているような部分を，グローバル変数+includeに差し替えることで，暗黙的なモジュールの起動がなくなり必要最小限の処理でページ生成されます．

また，Touchも含めてモジュールの全体数を減らすことで，モジュール起動時のオーバーヘッドも節約されるため，より高速な動作が期待されます．

ついでにCMS標準のindex.js＆jQueryとacms.cssの大半は読み込まないようにしています．フロントの速度だけ求めるなら，管理ページ系以外では標準のJSとCSSは切り捨てた方が幸せになれるかも．

デザインと960 Grid

RWDの本に書いてあった作例で，960 Gridが出てきていたのでついでにやってみました．まぁこんなもんかという使用感で，CSS側の再利用性が高くない状態で使ってもイマイチですね．

あと，今回はFireworksのかわりとしてiDrawを購入して，事前にレイアウトとビジュアルの調整をグラフィックソフト上でちゃんとやってます．最近ずっとHTMLを直接書き始めてましたしね･･･．

幅を狭めたときの状態は結局HTMLとCSS書きながら適当に作ってしまいましたが！

そんなかんじ

まだ調整が続くので，表示が崩れていることがあったら指さして笑ってあげてください．

havelog.ayumusato.com

ブログのリニューアルをResponsive Web Designで強行してみた