Skip to Content

「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 網頁。
 

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo