1.確定你的客戶瀏覽網站的目的
行銷工具永遠要從消費者的角度思考,當消費者使用電腦跟手機的地點、目的不同時,我們也要賦予電腦、手機版網站不同的功能。
首先,確定客戶用手機查詢你的資訊時,最想看到什麼,就是網站的重點,同時也是決定要做響應式網頁的重要關鍵。
電腦版(使用者33%) | 行動裝置(使用者67%) | |
使用地點 | 固定位置(家中、辦公室) | 任何一個可以行動上網的地方(捷運、廁所、咖啡廳、機場、臥室…) |
瀏覽重點 | 1. 首頁風格與照片 2. 房型、房價 3. 可訂房日期 4. 優惠方案 5. 交通方式 6. 鄰近景點 7. 其他 | 1. 電話 2. 地址(位置、交通時間) 3. 房型、房價 4. 網站風格與照片 |
閱讀動線 | 首頁→房間介紹 & 房價→線上訂房→最新消息→交通位置… | 搜尋:首頁→打電話 點選他人分享連結:優惠新訊或首頁→房型→打電話 |
2.重新思考瀏覽動線
從網友要看的重點中,就能重新思考並安排整個網站的瀏覽動線。
除了電腦版頁面之外,也得把行動裝置考量進去。因為行動裝置的螢幕尺寸較小,每一個放置的元素都必須是萬中選一的重點,一點空間都不能浪費。審慎安排每個重點的位置,如電話、地圖、產品資訊,可以縮短網友尋找資料的時間。
3.簡化 簡單 但絕不能簡陋
考慮於手機、平板這些行動裝置的螢幕比電腦小,處理效能也不一定比電腦好,因此網頁設計必須要簡單,儘可能縮小網站檔案,才能縮短網頁載入的時間,即使在3G環境下也能順利瀏覽。
但是簡單不代表簡陋,少了華麗特效還要能吸引網友目光,才能考驗網頁設計師的真工夫。透過CSS3技術,可同時兼顧網站美學與檔案大小,讓響應式版網站兼顧品牌形象的營造。
4.直式設計,捨去橫向捲軸
Google因應使用者導向,行動裝置閱覽率(67%)遠大於電腦(33%)的前提下,調整利於行動裝置的演算法。故,為方便在有限的行動裝置畫面上閱讀並操作網頁,響應式網頁應採直式設計(單欄式設計),並捨去橫向捲軸。只要往下滑,就可以看完所有資料。
5.加強導覽功能
閱讀文章時要從最後回到頂端還挺麻煩的,因此讓單元列與分類清楚好找,可以加強導覽功能、減少捲動畫面的頻率。
另外「回到首頁」、「回到上一頁」的導覽功能鍵也很重要,必須清晰、易點選。
6.以觸控螢幕為出發點
手機、平板上的按鍵、超連結若沒有1個食指尖大(約44px),將會是一場永遠都點不到的悲劇。
滑鼠移到按鈕上可以觸發某些功能的特有效果,在手機上也絕對要捨棄,因為手機只能點擊,沒有hover的特效,像下拉選單、滑鼠移過去變色等效果都需捨棄。
7.視覺回饋是細節 也是重點
不只要讓按鈕更大、更明顯,讓網友在點選時可以看到按鈕的顏色變化,可以讓網友知道他已經點擊成功,能避免網友重複點擊。
載入網頁時呈現loading畫面,讓網友知道網頁正在載入,也能避免網友重複點選、延遲載入的時間。
這些雖然都是細節,但會大大影響使用者對這個網站的好感度,直接影響品牌印象。
8.響應式強化手機原生功能
手機沒有電腦的大螢幕,但卻擁有電腦所沒有的行動力,響應式網站不只是將電腦上的資訊重新排版,應該要特別將這些優勢發揚光大,讓行動力更具商機。舉例來說:
.響應式網站可以一鍵撥號、可以一鍵開啟地圖,透過手機原生功能可以加快交易速度。
.網站上可安裝套件讓網址即時分享到FB、微博、LINE、或WeChat,便利客戶為您口碑行銷。
.利用行動條碼QR code,方便手機網民隨時收納你的網站。