這篇文章整理一下這次改版大概是做了哪些東西，其實一開始的目標很簡單，就是對以前的樣式不滿很久了，想要一個簡潔，沒有多餘東西的版面，不過實際上讓我動手的原因其實是我開始有 Responsive Web Site 的需求了，我想很多人都知道，現在全世界可以上網的設備，手持裝置的數量已經和電腦不相上下了，以前我想說要看文章應該不會想在手機上看，可是後來我慢慢瞭解，有很多時候可能是點到朋友在 Twitter 上的分享，所以訪客才會用手機打開你的網頁，如果訪客這時候點開的網頁有支援行動裝置的低解析度，那使用者體驗會好很多。總之，我就想要讓我的部落格也有支援就是，一開始只是想要套用 Twitter Bootstrap，不過之後又陸續加上不少東西，整理如下：

Bootstrap

這次使用 Bootstrap 的 CSS Framework 來支援不同解析度的瀏覽介面，套用起來很簡單，預設的樣式就很不錯，像是表單之類的元件我就不用另外費心思來處理，主要是調整行高之類的改善排版，讓中文文章的閱讀更輕鬆些，顏色和背景則是從 日本的傳統色 那裡挑來的，目前是還沒考慮到配色的協調，應該還會再調整。

Web Fonts

用了 Google Web fonts，分別在頁首 logo 和程式碼區塊，範例：

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (min-resolution: 2dppx)

Logo 部分當然就是要讓它比較不一樣些，所以找了個很特別的 8bit 風格字體，至於程式碼區塊，有一個基本要求是要是等寬字形，不然程式碼每個字元垂直對不齊會超難受的，後來用的是設計給 Android 手機的 Droid Sans，Google Web Fonts 有個好處是完全照標準 CSS 的用法，而且免費。

DevicePixelRatio Support

這也是之前 介紹 過，讓高解析度螢幕的環境可以使用比較大張的圖片，配合 flickr 的命名規則作的，自己用 iPad 看起來是蠻漂亮的啦。

Default sans-serif font

以前有介紹過判斷訪客瀏覽器是否支援字體渲染的 方法，當時我給 Windows 的預設是不支援，不過時代在改變，所以現在預設的字型都是黑體了，如果瀏覽器判斷出來不支援字體渲染，那會改用系統預設字形，通常會是新細明體，會做這樣的改變事我自己有時候會看到切換字型那瞬間的跳動，老實說一直跳是不太舒服啦，所以我想讓看到的人盡量減少，考量到現在數據上訪客用 Windows 7 的使用者已經大於其他所有的 Windows 的使用者的總和，所以我就這樣改了。

Twitter Cards and Open Graph Protocol

接下來的改造則是社群網路的結合，這部分是以前完全沒弄過的部分，主要的原因是太多社群網路了，但是每個社群網路間都有堵 高牆，使用者要跨越這些高牆非常困難，一個只用 Facebook 的人無法和只用 Twitter 的人從社群網路上有太多互動，就像是陷入飛彈發射井一樣。

從網站開發者這端來看，要減少這個社群網路的壟斷，基本上就是增加支援不同的社群網路，不過社群網站太多了，簡單 Google 一下 Social Network Buttons 就可以看到一大堆按鈕，要公平的對待每個社群網路，那就是每個都支援，可以想像要是每篇文章都這麼多按鈕要加，那是會多可怕的畫面，所以現狀雖然很殘酷，不過網際網路目前確實是被社群網路控制著的，最大的就是 Facebook 和 Twitter 兩家。

不過先不看社群網路的壟斷問題，資訊在網路上傳播的方式已經從最早的入口網站、搜尋網站這種使用者主動尋找的模式，經過 RSS 訂閱機制這種半被動方式，到現在透過社群網路分享，使用者只要做這那邊等朋友們分享的資訊，看似被動模式，不過其實是角色之間界線的消失了，在社群網路內的每個人都可能是資訊的提供者、傳播者或接收者。

話題有點扯遠了，總之社群網站礙於使用性我不可能全部支援，所以就挑最大的三家支援，Facebook、Twitter、Google+，而第一步就是 Twitter Cards 和 Open Graph Protocol，其中 Twitter Cards 目前需要申請，而且我自己測試過，個人網站也是會通過的。

Twitter Feed

第二步就是讓新文章能主動發佈到社群網站上，這邊是使用 twitter feed 這個服務，目前由於 Google+ 沒有開放 API，所以只支援 Twitter 和 Facebook，只要給該服務你網站內容的 RSS 並透過社群網站的授權機制授權給它發文，它就會在 RSS 有更新時，自動用你的帳號在你的 timeline 貼連結，不過這個服務其實是 bit.ly 的相關服務，所以貼過去的連結其實是 bit.ly 短網址，好處是會有 bit.ly 的統計資料，而且也不影響 Twitter Card 的功能。

Social Network Buttons

最後一個社群網站相關的修改是加上這三個社群網站的分享按鈕，也是很基本就照文件說明，不過比較麻煩的是按鈕樣式的選擇，本來是想要放最小的，20px 高的那種，可是因為寬度問題，由於都是用 iframe 實做，iframe 裡不同網域的程式碼無法動到 iframe 本身的大小，結果就是會讓這些按鈕後面需要預留空間，當多個按鈕要放一起時，就會出現間距不相同的情形。後來我就改成現在的形式，好處是寬高固定，比較可以控制位置，不過我發現三家社群網路的類似形式的按鈕還是故意有些不相容，眼尖的人可以能會發現他們高度不一樣，分別有 59px、60px、61px，如果把 Pinterest 也算上來，那還有 57px，還真是不知道該說什麼...

HTTPS

最後還有一個比較不重要，純粹是自爽的，就是現在本 blog 支援 HTTPS 連線了，一開始的動機只是因為看到 Chrome 會說網站尚未驗證身份，所以就一不做二不休，弄到有綠色鎖頭出現，不過目前還有一些問題需要處理，所以沒有弄成強制轉成 HTTPS，像是 Twitter Card 白名單好像有分，還有提交給搜尋引擎的 sitemap.xml，還有 canonical url 等都要統一，其實還很多細節要處理就是。

這一兩個月大概就是做了這些改進，斷斷續續的修改，看到什麼就修什麼，其實沒有先列清單，其實還有剛完成的 srcset 支援的東西就是。