這幾天想來分享幾個設計行動版網頁要素，想必也有許多人開發過行動版網頁，也有許多的手機APP是透過嵌入一個Webview將網頁放到其中，大多數的使用者是感受不出來的，還是有一部分的人可以感受到，畫面不是操作的那麼流暢，這之中各有利弊，今天不是針對webview來做討論，提到一些我開發手機版的網頁會去注意的事項，也歡迎大家再下面留言，給予更好的建議。

Responsive Web Design(RWD) 響應式設計

簡單帶過吧！網路上有許多的文章可以參考，打「RWD、響應式」都可以找的到，簡單來說你可以不用寫不同版本的網頁，同一個網頁透過CSS @media 的屬性來調整使用者看到的內容，下面有一個CSS的範例，當你縮小視窗的時候文字的顏色也會跟著改變

div {
  color: black;
}

@media screen and (min-width: 560px) {
  div {
    color: red;
  }
}

有許多的網站是用響應式的設計，像是中華民國總統府(這個應該夠有份量了吧xDD)，透過手機已及電腦看到的畫面，有不一樣的呈現方式，因為總統府的網頁沒有商業模式，沒有利益上的問題，但在許多的購物網站可以看到，分別設計桌上版及行動版的網站，因為他想要賣廣告，在手機看到的廣告會與電腦上看到的廣告不一樣，因為這樣所以這些網站在設計為護這些頁面上的成本相對來說較高，不同的模式會有不同的設計，我想講到這邊應該可以了解自己想要的是什麼樣的模式吧！
簡單說響應式有幾個優點

• 維護成本低
• 開發成本低
• 相較於APP不需下載上架等手續
• SEO排名較高 (流量、點擊率...等等)
  想研究RWD請洽Google

Layout設計 & Button的大小

對於行動版的Layout尤其重要，如果在小小的螢幕下面塞了滿滿的東西，使用者看起來應該不會覺得很開心吧。
在手機的設計中超過五個的按鈕或是擺放，會造成使用者的操作不順。

(露天拍賣 行動版)

(Android手機 Google搜尋)

POPUP的廣告最最最討厭的就是按鈕小小的，還讓你按到連結的廣告，在設計

各個瀏覽器的支援度

曾經在一個機會下，幫朋友寫了一個行動版的網站，在開發的時候一直沒有出現問題，直到網站正式上線後卻發現很多的內容怎麼都跑版了，而且js怎麼也掛了，這時候才發現在每個手機看到的狀況並不會一樣，或許是手機版本過新，或手機版本過舊...等等，有許多的問題，所以在開發完成後，最好在每個裝置上都測試一遍，不斷的去修正這些問題，當你下次在開發新專案時，你將更注意這些細節。
當然你要怎麼測試，有許多的方法，我的好友在這次鐵人賽有寫了篇關於測試的文章系列Nighwatch，測試就是我們開發的流程，盡量去做到面面俱到的功夫摟。

減肥專欄

今天的減肥計畫，應該在晚上執行，今天主管們準備豐富的下午茶來替我們補補腦，減肥最辛苦的就是看到食物的時候，要先再三想一想「這熱量高嗎？我還要運動多久才補的回來？」到後面開始自我放棄「算了啦！胖就胖沒有什麼不好的，肥宅我也教了個可愛的女朋友」，最折磨人的其實是心理因素吧。來想想看，今天練練腿好了！

小知識

有沒有必要上健身房？？
許多人會有這樣子的疑惑，我也曾經問過自己到底有沒有必要上健身房？常常聽到朋友、同事下班或是假日的時候都往建身房裡面跑，說為了健康、為了體態...有許多的原因，但最重要的是「你」有沒有必要上健身房，沒有一定的答案，但如果你想要達到下面幾點，我建議你可以考慮

• 有正常規律運動習慣
• 平時有在訓練但手邊的器材不夠
• 真的下定決心要運動
• 有一筆預算

上健身房也是要一筆花費，或許你只是想減肥，那我建議你可以到公立的運動中心或是操場跑跑，先建立起運動的好習慣，再加入健身的行列也不遲喔！

每日一句

有人說，男工程師穿網襪很奇怪
不是很奇怪，是因為你不常看到男生穿網襪
By 從網襪轉型黑絲的工程師