iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1
Modern Web

Go!從無到打造最佳行動網站系列 第 5

Day5 全員耍廢中(上) Mobile設計

這幾天想來分享幾個設計行動版網頁要素,想必也有許多人開發過行動版網頁,也有許多的手機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,測試就是我們開發的流程,盡量去做到面面俱到的功夫摟。


上一篇
Day4 初次見面Vue!
下一篇
Day6 全員耍廢中(中) Mobile設計
系列文
Go!從無到打造最佳行動網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言