Inspire dgt 網路技術分享_手機網頁的二三事_20110214
13
手手手手手手手手
-
Upload
inspire-digital -
Category
Technology
-
view
111 -
download
0
description
Transcript of Inspire dgt 網路技術分享_手機網頁的二三事_20110214
手機網頁的二三事
Agenda
• 行動網頁的優勢
• 設計原則
• 製作須知
• 網站範例
Benefits of the Mobile Web
• 允許在任意時地使用網路資源
• Mobile 網路使用者日漸增加
• 可利用手機現有的功能，連結網路上資源，形成更個人化的使用者經驗。(Ex: 電話簿、 Geo 定位、行事曆 )
設計原則
在設計之前：• Why should it be mobile?
• What content should I make mobile?
• 完整的 mobile 使用經驗是 ?
->Know Your Audience
->User-centered Design
設計原則從架構來看：• 使用者沒有耐性循序點選階層性的連結• 應避免不斷 click 造成使用者流失
設計原則
越簡單越好：• 只提供有限的選擇 ( 篩選 )
• 線性的網站結構 ( 減少選單階層 )
• 每個頁面都至少帶有部分內容 , 或簡單的描述
• 按照重要性或受歡迎程度排列選單
• 簡單易懂的選單名稱
設計原則
Layout 規劃建議：• 最好是垂直排列的表單 ( 考量使用習慣 )
• 避免出現階層式的選單 (multiple level)
• 轉換至portrait mode
• 避免在每頁都出現所有選單 ( 僅出現相關的就好 )
實作須知
• Page Titles (幫助使用者加入書簽 ) <title>Description of Page Content | Site Name</title>
• XHTML MP 1.0 Doctype (宣告本網頁為手機版本 ) <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
• 減少 scripts and embedded objects. • Redirects• Caching (IE not support)
<meta http-equiv="Cache-Control" content="max-age=300"/> • Avoid Table ( 難以整理增加檔案體積 )• Default Input Mode (當需要須入時 , 盡量嚴格限定 data type)• ImageSize (尺寸不要大於常用手機螢幕規格 )• Total Page Download Size ( 避免使用圖片 ->CSS)
萬一上述原則都忘光 , 至少至少…
• 手機網頁與PC網頁的轉址判斷
• 注意檔頭宣告
方法一： <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
方法二： <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
網站範例
• 奇摩http://m.yahoo.com
• AOLhttp://m.aol.com
• 用平行標籤將使用者導向不同功能導向的版型• 個人化選單 (kijiji?)• 將新消息適量的展現在第一屏 ( 減少選單的階層 )• 設定地點可轉換各地區版本的 Yahoo
網站範例
• 第一屏僅出現搜尋 BAR• 常用功能出現在第一屏下拉選單• 將所有功能 icon 化• 閱讀器和文件的服務 ( 使用者的黏著度 )
THANK YOU!
Inspire digital 創異數位聯絡人
Fang Yi Chang 張芳儀 ‧ 客務總監電話 : 02-7701-6199 # 274
