「HTML5.網路新勢力」研討會心得之行動裝置網頁

11/29 去聽了「HTML5.網路新勢力」在高雄場的研討會

 
主要的收獲有二點:
  1. 網站要升級至 HTML5 的方法及注意事項。 
  2. 網站針對行動裝置的設計方法及注意事項。
相關的簡報檔可以在這裡下載 : http://bit.ly/w3CtZF
 
先前寫過一篇是網站要升級至 HTML5 的心得,該場是黃保翕 ( Will 保哥 ) 所主講的。
 
底下則是網站針對行動裝置設計的心得整理,該場是黃忠成先生所主講的。
 
1. 雖然平版(這裡指 iPad)也是小螢幕,但其大小也可以視為小筆電了,所以這篇主要還是針對一般智慧手機所提出的觀點。
 
2. 智慧手機的使用者愈來愈多,這是網站設計者不可忽略的用戶層。【後記】:前幾天預購 iPhone 4S 就將中華電信、台哥大及遠傳的網站都塞爆,其趨勢可見一般。
 
3. 手機的瀏覽器雖然有努力去適應一般的網站,不過在實際使用上依然需要不斷地放大縮小,這些都是蠻不方便的。若能針對手機畫面來另外設計網站,相信使用者是會感到貼心的。
 
4. 使用以下的 meta 標記會讓瀏覽器自動將網頁縮放至裝置的大小,免得瀏覽器的畫面縮到太小而看不清楚。iPhone, Android, Windows Phone 7 都接受此用法。
 
<meta name="viewport" content="width=device-width" />
 
5. 設計手機網頁有個要特別注意的事項,就是最好能做到單指也能操作。
 
6. 由於畫面的限制,最好設計成單欄的模式 (Single Column Layout)。
 
7. 為了使用者選取文字更方便,若文字在表格中,可以直接在 <td> 使用 mousedown 事件,讓使用者點選整個方格都有作用。
 
8. 善用 jQuery Mobile (http://jquerymobile.com),jQuery Mobile 是專為行動裝置所設計的一組 CSS + JavaScript Library。
 
9. 這裡有很多介紹 : http://jquerymobile.com/test,底下的說明也和此有關。
 
10. 大部份的手機瀏覽器都沒有最上方的視窗標題列,所以可以在畫面上方設計適當的標題列 (Header bars)。某些手機瀏覽器可能不會有「回上一頁」的按鍵,也可以在標題列加入「回上一頁」的功能,讓使用者有一致的操作經驗。
 
11. 除了標題列 (Header bars),jQuery Mobile 也有提供 Navbar (導覽列) 及 footer bars,都可以放置指定功能的按鈕。
 
12. jQuery Mobile 提供 Multi Page 的功能,可以在 HTML 中放入許多 Page,第一次只顯示第一個 Page,再透過連結,可切換至其它 Page,切換 Page 時還可以選擇許多動態的過場效果。
 
13. Page 注意事項:jQuery Mobile 預設使用 Ajax 來讀取頁面,所以常用的 ready() 函式並不適用,要改成 pageInit()。還有,當 page 以 Ajax 載入時,在 head 區域的 Scripting 都會失效,所以要使用的 Scripting 要放在 page 的頭或尾皆可。
 
14. jQuery Mobile 提供五種 Theme,可套用在許多元件中。也有按鈕及各種現成的小圖示,讓使用者很快就搭配出美觀的畫面。
 
15. 可以輕鬆做出多組的 Collapsible Contrl 效果,也就是起初只列出標題,點選後會下拉展開相關文字。
 
16. jQuery Mobile 還提供許多種現成的元件,如 Text Inputs , Search Inputs , Slider , Toggle Switch , Radio Button , Check Box , Select Menu , Dialog ... 等。
 
17. 以上各功能的詳細說明請參考 jQuery Mobile 官方網頁,相信善用這些工具,就可以輕鬆做出美觀大方的 Mobile 網頁。
 

 

重要度:
文章分類:
電腦標籤:

發表新回應