最近對 JeffHung.Blog 動了一些手術，裝了在《今日連結 (2006-09-20)》時看到的 Sandbox 的這套 theme，並予以改造，準備將外觀改回原來的樣子。Sandbox 是一個 semantic-rich 的 wordpress theme，其設計極端注重語意的保留，是一個很好的，設計自己的佈景主題的起點。

對於 blog 的佈景主題，之前換成 beeblebrox 布景時，我就已經有了基本的想法，最主要的就是要能夠讓我得以清晰的擺放程式碼在文章裡。這當然是因為，實在是文筆不好，只好多填些程式碼充數的關係。再又經過一段時間的觀察與沈澱之後，想法多了一些，以下簡單條列於下，算是再次整理：

  • 在版面配置上，如果有邊欄 (side-bar, side-panel, ... what ever) 的話，必須要放在左邊。這是因為程式碼以及我會使用到的語言，方向都是由左至右的 (left-to-right)，而程式碼有時候又有「不可換行」的特性，當有這樣子的狀況發生時，版面就會被撐大，若邊欄放在右邊，在「由左至右」以及「不可換行」兩個因素的限制之下，邊欄就會對本文的閱讀造成影響。
  • 在版面配置上，本文區塊應當要是 fluid，也就是會隨著瀏覽器的大小而變動。理由正是由於上述程式碼有「不可換行」的特性之故。當版面被撐大時，fluid 的版面配置，就不會讓版面受到破壞。
  • 本文字體大小必須是瀏覽器預設的大小，這是預設閱讀起來最舒適的字體大小。Gslin 在這篇《字形的問題》有聊到相關的考量。以前小時候，總喜歡在一個頁面裡，塞下越多的資訊越好。但現在老了，眼力不行了，所以字還是大一點，看起來比較舒適。
  • 非本文的內容，在樣式上，應該盡可能地不喧賓奪主。這可以用較小的字體，或較淺的前景色來達成。尤其是在邊欄放在左邊的情形下，邊欄的內容更是容易讓使用者分心，因此適度的淡化處理，是必須的。
  • 邊欄存在的目的，應該只是提醒使用者，「還有這些東西可以看」，而不是直接把內容呈現給使用者，內含真正內容的邊欄，只會使使用者分心。因此，放在邊欄的 recent-comments 與 recent-trackbacks 等，應該要只放連結與標題就好，毋需列出部份內容。
  • 內頁的 HTML <title> 必須包含文章標題，考量到 tab browsing 時，tab width 通常不寬，因此文章標題應該置於 blog 名稱之前，如：「Sandbox, look.urs, and blogging frequency [JeffHung.Blog]」。
  • Search form 應該擺在越上面越好。我通常會擺在 header 的右方。Searching 已經超越 surfing 成為現今主流的瀏覽方式，所以應該放在最立即所得，但又不影響主體的地方，就好像 firefox 的 search box 預設放在左上角一樣。
  • 正在考慮是否要拔掉 categories 與 archives，改用 drop-down menu 或另開頁面的方式呈現。

以上的效果，一部分在換用 beeblebrox 佈景之後，我自己曾經手動建進去過，另一部份則是還沒實做。已經作過的部份，在 sandbox 上重新施為一番，並沒有什麼問題產生。更因為 sandbox 的優良設計，讓這些設定更為精準，不再有流彈四逸的問題產生。還沒作過的部份，就有待努力。還好改 theme 不是一件需要長時間專注的工作，我的 blog 也不是什麼重大的 service 非得 24x7 不可，因此，就慢慢改吧。留此文僅為整理關於版面設計的想法，算是某種 version control 吧。