部落格改版筆記 (Blogger design memo)

行動裝置相容性測試

從去年就一直很想對部落格改版,主要是因為沒辦法通過 Google 提供的行動裝置相容性測試,想說 RWD(Responsive Web Design) 都流行那麼久了,也該把自己的部落格弄成 RWD。
Blogger 平台有提供一些樣版可用,但就是沒有 RWD 的樣式可選,反而是兩套設計樣板,一個給桌機用,一個給手機用。上次改版面時只改了桌機用的,手機那個根本不能看,想偷懶去找看看有沒有免費的樣版,但又找不到自己想要的,最後決定自己做啦,不過有借助 BootStrap 來幫忙,可以省下不少工,這裡筆記一些心得。

設計流程

我這次改版的設計流程:

1. HTML,決定要放什麼

先用編輯器編寫 HTML,做出自己要顯示的內容,例如我的就是左邊放內容,右邊放 Sidebar,這樣設計的原因是讓右邊的欄位可以在螢幕變小時,自動移到下面,這部份還沒用到 CSS ,所以看起來就是從上排到下的文字內容。

2. CSS 大概表現要呈現的樣子

這裡我是直接用 BootStrap ,大概調整到想要的樣子就好,最後在 Blogger 中還會做細部調整,這裡可看到大概的雛型。可以利用 Firefox 的開發者 > 適應性設計檢視模式 來看看在不同尺寸的螢幕上看起來的樣子。

3. 研究 Blogger 樣板系統

Blogger 的說明 中的 變更網誌外觀 這部份的內容看完,尤其後面三個有關標記的說明,看完後就可以先來玩玩 Blogger 的樣板系統了。

4. 動手修改

先開一個新的部落格來練習,很重要!因為要整個砍掉重練。在這個測試部落格的後台先選一個最簡單的 範本,然後 編輯 HTML,接著你就會看到一個多到令人想吐的 HTML,所以我才說要砍掉重練。

<head></head> 中保留 meta、title 及 b:skin 其他東西都刪掉,b:skin 中的內容也都刪掉;<body></body> 中,因為 Blogger 的樣板系統會要求至少有一個 section ,所以我們保留 id=’header’ 的這個 section,其他內容都刪掉,儲存範本 後,如果沒有出現紅色的字告訴你有錯誤,那就可以 檢視網址看看,應該只剩下標頭的內容,其餘一片空白。

這時候你就可以開始把步驟1做的 HTML 一塊一塊的拿進來,注意,先不要管 CSS。等 HTML 的部份完成了,再把 CSS 的部份加進來。Bootstrap CSS link 的部份放在 <b:skin></b:skin> 之前,你自己設計的 CSS 則放在 b:skin 內。

之後就是慢慢加入自己要的 section 及 widget 就可以了,做法是先設定好 section,存檔後,到 版面配置 頁面去 新增小工具 ,再回來範本中做修改。因為樣板系統會自動加碼,所以這樣做比較安全。

紀念一下舊版的樣子:

5. 一些撞牆筆記

雖然標記怎麼用在文件中都寫得很清楚了,不過其實有些內容我看完了也不太懂,等到實際撞牆了才知道怎麼回事,這裡筆記一下。
Section 與 Widget
所有的內容都是在 section 中加入 widget 的方式組合成整個頁面,先把你設計好的 html 頁面架構放進來,第二步就是把 <b:section> 區塊加入,這時候就可以在 section 中加入 widget 了。

加入 widget 的方法是存檔後回到 版面配置 新增小工具,完成後再回來修改,這點很重要,千萬不要自己手動寫 widget。
Widget ID
widget 被加入後會自動在 id 名稱後面加數字1,2,3…等,這個無法去修改,我改過了,它會自己改回來。
include 與 includable 區塊
每個 Widget 都有一個 <b:includable id='main'> 的區塊,這就是這個區塊的主要內容區塊,一個 Widget 一定會有也只會有唯一一個 id='main' 的 includable 區塊。

在這個區塊中可以使用 <b:include name='xxx'/> 加入其他 <b:includable id='xxx'>,記住它們的關係,就不會看不懂了,只有 id='main' 不能被 include ,其他 id 的 includable 區塊都可以被引用。設計區塊時使用 id ,引用它時使用 name 。
data
要取得 widget 的資料,要使用 data 標籤,後接屬性名稱,像是 <data:title/>。有什麼屬性可以用,要查看說明文件。
expr
如果你的 html 標籤有要使用某個 data 的值,該 html 標籤的屬性就必須加上 expr,例如:<a expr:href='data:blog.homepageUrl'><data:title/></a>

因為 href 有用到 data: 去取屬性的值,所以就必須寫成 expr:href。

頁面載入速度測試(PageSpeed)

就在我完成 行動裝置相容性測試得到太棒了! 這個網頁與行動裝置相容的結果後,才又發現了 Google 的另一個測試工具 PageSpeed Insights ,測試後的使用者體驗分數 99 分接近 100,但是速度只有紅字 45 分(行動版)。

它建議修正的項目大部份都屬於 Blogger 平台的所以無法動,唯一能改的就是圖片大小,我把首頁的圖片全部用壓縮工具處理一遍後重新上傳,這次分數就可以到黃字 65 分,勉強及格,好吧也只能這樣了。

圖片壓縮

還是不要小看積少成多的威力,壓縮工具把我上傳的圖片各壓了15~70%不等的容量,當頁面的圖片一多,看起來就少了不少的傳輸量,圖片壓縮還是必要的。

線上圖片壓縮可以用 Compress Images Online ,Mac 的話可以用 ImageOptim 它有 OpenSource。

後記

使用 Blogger 最大的原因就是免費,而且不用擔心租主機可能不穩定或流量太大等因素,而且 Blogger 的修改彈性超大的,就看你怎麼改。這次改版斷斷續續花了不少時間,現在使用 iPad 及 iPhone 都能閱讀,比之前的版本方便多了。
本文網址:http://blog.tonycube.com/2016/07/blogger-design-memomd.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。