WebSite Improvent

這篇文章整理一下這次改版大概是做了哪些東西,其實一開始的目標很簡單,就是對以前的樣式不滿很久了,想要一個簡潔,沒有多餘東西的版面,不過實際上讓我動手的原因其實是我開始有 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 的人從社群網路上有太多互動,就像是陷入飛彈發射井一樣。

Social Network Silos

從網站開發者這端來看,要減少這個社群網路的壟斷,基本上就是增加支援不同的社群網路,不過社群網站太多了,簡單 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支援的東西就是。

comments powered by Disqus