行動裝置相容性測試
從去年就一直很想對部落格改版，主要是因為沒辦法通過 Google 提供的行動裝置相容性測試，想說 RWD(Responsive Web Design) 都流行那麼久了，也該把自己的部落格弄成 RWD。設計流程
我這次改版的設計流程：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 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀
if anyone looking for best reducing image size and optimize their pictures ,,check out this great site https://optimizejpeg.com/ to reduce them..
回覆刪除介紹的很詳細 ~ 讚
回覆刪除其實你的圖片不多，壓不壓縮 也差不多
我都利用參數把圖片格式改為 webp 顯示