妳一個人時我要怎麼放心?

Responsive Design Blogger 經驗談


本篇為Responsive Web Design (RWD)的技術性文章。

前言

這次綜合口味2.0版的改版採用了RWD的版本,原本的考量是:
  1. 因為Blogger的手機版範本無法加入手機圖標(apple-touch-icon)。
  2. 如果用手機版範本,那麼部落格的網址會不一樣,網址後面會多加「?m=1」。
  3. 網址不一樣會連帶影響:用手機看的人分享網址後,由於網址後面加了「?m=1」,所以用電腦點網址的人會看到手機版網頁而不是電腦版網頁。
  4. 如果是用手機版範本的話,想在手機上看電腦版就要手動把網址改成「?m=0」,但那會令抓網址的facebook留言消失。
基於以上原因,捨棄Blogger內建的手機版範本,改用RWD範本我覺得有必要性~

製作RWD的網站之前,可以先好好想想並規劃一下:
  1. 真的需要RWD嗎?如果只需要Blogger的文章跟內建留言,可以用行動版範本就好XD
  2. 如果需要,那有哪些元素在行動裝置上想要被保留下來?
  3. 可以在行動裝置上捨棄掉哪些元素?



推薦

Google Crome、Firebug、Safari⋯⋯等等有開發工具的瀏覽器都很好用,用來查某個區塊的class、id,或直接試著改參數都超方便。
然後務必使用Resizer這個書籤小工具,有助於簡易測試各種環境下的變化~
再來就是最好有平板和手機可以實機測試,不過那是Resizer測試完之後才要做的事了。


方法

接下來說說RWD的經驗——其實在Blogger做RWD可以很單純,也可以很複雜。

首先,在<head>加入判斷手機的原始碼:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
再來看看下面的CSS原始碼:

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
}
@media only screen and (max-width:979px){
}
@media only screen and (max-width:767px){
}
@media only screen and (max-width:479px){
}
@media only screen and (max-width:319px){
}
/* --- RESPONSIVE END--- */

上面這些就是用來控制在不同寬度時,部落格該怎麼改變CSS的原始碼。
在這個區塊內對class和id下的任何屬性,都會直接覆蓋原本的CSS設定,所以,當做完電腦版的排版之後,就可以開始進行各個尺寸的設計。
標注各個尺寸對應的結果如下:

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
//iPad橫著拿(Landscape)的尺寸}
@media only screen and (max-width:979px){
//iPad直著拿(Portrait),和iPhone4以後橫著拿(Landscape)的尺寸}
@media only screen and (max-width:767px){
//iPhone直著拿(Portrait)的尺寸}
@media only screen and (max-width:479px){
//小平板或大手機直著拿(Portrait)的尺寸}
@media only screen and (max-width:319px){
//其他更小的設備,大約是2012年以前的智慧型裝置才會有這種尺寸}
/* --- RESPONSIVE END--- */

所以,依照上面的法則,大概可以這樣設計:

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
//iPad橫著拿,基本上跟一般筆記型電腦差不多,所以可以讓網站跟電腦版幾乎一樣。側邊欄可以設寬度33%,文章區塊可以設寬度66%。}
@media only screen and (max-width:979px){
//iPad直著拿,可以考慮把側邊欄隱藏起來(dispaly:none;),或是搬移到文章區塊的後面;也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:767px){
//iPhone直著拿,可以考慮把側邊欄隱藏起來(dispaly:none;),或是搬移到文章區塊的後面;也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:479px){
//小平板或大手機直著拿,可以考慮把側邊欄隱藏起來(dispaly:none;),或是搬移到文章區塊的後面;也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:319px){
//其他更小的設備,可以考慮把側邊欄隱藏起來(dispaly:none;),或是搬移到文章區塊的後面;也可以順便把兩個區塊都弄成寬度100%。}
/* --- RESPONSIVE END--- */


範例

以下附上依照上面原則,可能會怎麼做:



/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
  .side-wrapper{
    width:33%;
  }
  .main-wrapper{
    width:66%;
  }
}
//iPad橫著拿,基本上跟一般筆記型電腦差不多,所以可以讓網站跟電腦版幾乎一樣。側邊欄可以設寬度33%,文章區塊可以設寬度66%。


@media only screen and (max-width:979px){
  .side-wrapper{
    width:100%;
    float:right;//為了讓側邊欄出現在文章之後
  }
  .main-wrapper{
    width:100%;
    float:left;//為了讓文章出現在側邊欄之前
  }
}
//iPad直著拿,把側邊欄搬移到文章區塊的後面;順便把兩個區塊都弄成寬度100%。


@media only screen and (max-width:767px){
  .side-wrapper{
    display:none;
  }
}
//iPhone直著拿,把側邊欄隱藏起來(dispaly:none;),讓手機看的人清爽一點。


@media only screen and (max-width:479px){
}
//小平板或大手機,可以空白,因為比較小的寬度會繼承較大寬度的設定。


@media only screen and (max-width:319px){
}
//可以空白,因為比較小的寬度會繼承較大寬度的設定。


/* --- RESPONSIVE END--- */



後記

其實這是最單純的改變排版位置而已,後續還有更多東西要動,例如Header是否要改變造型或拿掉圖片?選單列要不要改變造型?側邊欄要整個拿掉,還是保留部分項目?之類。而綜合口味這次改成RWD也挖了不少網路上別人RWD範本的原始碼來研究以及直接挖來用。

從別人做好的RWD範本可以看到厲害的人是怎麼規劃RWD這件事的,所以還可以有一個更簡單的方法:就是直接套用別人的RWD範本,再把自己本來的範本想要有的東西加上去XD

最後,說說這次改造RWD的歷程:從2月開始有想要改造,開了另一個Blogger當測試機把舊文章放進去,然後慢慢摸看效果如何。大約4月10日改造完畢,但繼續測試直到4月13日才把測試機搬回正式機,超漫長的啊。

//20140420補充
各位可以看看自從4月13日改成RWD之後對於跳出率的影響,附圖如下:


希望這篇記錄對於也想把Blogger改成RWD的人有幫助囉!


補充

這段原始碼可以讓誤闖m=0的人回到m=1去,讓facebook留言正常顯示!

<script type='text/javascript'>//<![CDATA[
var curl = window.location.href;if (curl.indexOf('m=0') != -1) {curl = curl.replace('m=0', 'm=1');window.location.href = curl;}
//]]></script>


參考

前端觀察:響應式網頁設計
Google:responsive blogger
50+ Best Free Responsive Blogger Templates