Upgrade to Pro — share decks privately, control downloads, hide ads and more …

行動版網頁不就是把網頁縮小而已嗎?

C8f411867882d122213cf3a14c03898e?s=47 jiimmysu
July 13, 2014

 行動版網頁不就是把網頁縮小而已嗎?

C8f411867882d122213cf3a14c03898e?s=128

jiimmysu

July 13, 2014
Tweet

Transcript

  1. 行動版網頁不就是把網頁縮小而已嗎? su1205su@gmail.com http://jimmysu.logdown.com/

  2. 大環境

  3. 你的網站在行動裝置上能看嗎? • 線上輸入表單 : 挑戰人類耐心極限的 • 一直縮放、拖曳、縮放、換頁、拖曳、縮放 • 很難點的按鈕 •

    「滑鼠移過」才會看到某些按鈕,但手機上沒有滑鼠移過這回事。 • 全Flash的網站、或是選單是Flash的網站,在行動裝置根本看不到 • ….族繁不及備載
  4. 案例宣導 設計,不是美化 — 2011 台北設計大展的爛設計 MR JAMIE ─ 創業者需要的啟發,每日新鮮供應 總統府700萬網站,華麗的突槌+手機可愛版

    T客邦
  5. 在行動裝置呈現資料的選擇 原生APP RWD 行動專屬網站 特色 • 可使用較多的手機硬體、軟 體功能,如推播通知、各種 感應器、離線操作、讀取手 機文件…等。

    • 要通過審核跟繳年費才能上 架 • 行動/桌機的網址相同,利於搜尋 引擎索引與分享 • 後端程式只要寫一次,其他都是 美工跟前端的事。 • 可引導客戶將網站「加入主畫 面」,在客戶桌面佔有一席之地。 • 區分手機版網站 與完整版網站 • 編排與效能最佳 化 缺點 • iOS/Android 跨平台問題 • App後續維護與更新問題 • 搜尋引擎難以索引app內容 • 動線的規劃與設計 • 資料呈現需有規劃 • 高度依賴客戶端瀏覽環境 • 載入速度問題 • 要維護兩個網站 適合 • 預算充足的客人 • 有特別互動需求者 • 需要極快速反應的程式、複 雜的動畫、遊戲 … 等 • 需要下載付費才能使用的網 路服務 • 一個網站打天下的客人 • 原有網站架構龐 大、改版工程浩 大的客人
  6. 其他行動裝置資料呈現方案 Web App AIR For Android/iOS App套版程式、 App開店程式 製作電子書 (Epub格式或各大軟體

    市集架上的電子書/互 動電子書) 用網頁方式製作, 再用 Phonegap 之類 的程式,封裝編譯 各手機平台的 App。 使用 Flash 相關開發 工具製作,編譯成 App。 範例: • Android Authority、 • Xure Apps • United Cloud Apps • 91mai • … 使用 Adobe Indesign 等 的程式製作互動電子書, 在市集上架。
  7. RWD(Responsive Web Design) 實作技術細節 • 基本心法1 – 流動布局 • <head>內的設定

    • 判斷使用者 • 基本心法2 –Media Query • Media Query & Media Type • Media Query - device-pixel-ratio • 掌握解析度-慎選 Breakpoint • Table 如何 RWD • 選單如何 RWD • 行動裝置上的網頁動畫 • 圖片也要RWD • 圖示也要RWD • 嵌入多媒體也要 RWD • 設定Flash替代內容 • 表單準備好了嗎? • 按鈕準備好了嗎? • 網頁原本用的Plugins準備 好了嗎? • 文書人員上資料時要小心 • 測試工具
  8. RWD(Responsive Web Design) 基本心法1- 流動布局(Fluid layout ) http://www.weareconvoy.com/2013/12/04/responsive-vs-adaptive-layout-design/

  9. <head>內可以設定的 <meta name="viewport" content="width=device-width; initial-scale=1.0" /> • Width=device-width / 固定數值

    設定網頁與手機可視寬度或是實際寬度同寬 • user-scalable 設定網頁是否可被縮放 • initial-scale 初始縮放倍率 • maximum-scale 最高縮放倍率 • minimum-scale 最小縮放倍率
  10. <head>內可以設定的 http://frugihoyi.wordpress.com/2013/04/20/optimizing-webpages-for-mobile-devices-part-1-the-viewport-meta-tag/ 有加 viewport 沒有加 viewport * 如使用一些網域轉址服務或免空網頁,會在原有網頁外面加一層frameset,將導致武功全廢

  11. <head>內可以設定的 • 主畫面圖示相關設定 <link rel="apple-touch-icon" href="icon.png" /> • iOS隱藏瀏覽器按鈕列 (網頁要加到主畫面)

    <meta name=“apple-mobile-web-app-capable” content=“yes”> • 電話號碼不讓人點 <meta name=“format-detection” content=“telephone=no”/> 網頁裡有一堆數據資料,容易被手機誤判為電話號碼時可使用 • 讓IE用最新的文件模式來執行網頁,而不要進入相容性模式 <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> 不然網頁在PC IE上看可能會爆炸
  12. 判斷使用者 方法1 : 依裝置的 User Agent 做切換 (ex.LV網站) if ((navigator.userAgent.match(/iPhone/i))

    {alert(“iPhone!!”);} 前後端各種User Agent偵測法整理 http://detectmobilebrowsers.com/ 方法2: 使用 Modernizr 判斷裝置是否支援某項功能,來執行對應的JS語法 http://modernizr.com/docs/
  13. 基本心法2 –Media Query 方法3 : 使用CSS3 Media Query判斷裝置特性,執行 對應的CSS •

    螢幕方向 @media (orientation:landscape){} • 螢幕比例@media screen and (device-aspect-ratio: 16/9){} • 螢幕dpi @media screen and (min-resolution: 192dpi){} • 螢幕寬度 @media screen and (max-device- width:600px){}
  14. Media Query & Media Type • @media all and (max-device-width:

    400px) – 裝置寬度,PC瀏覽器不認得 – max-device-width 最大到… (小於) • @media all and (max-width: 400px) – 視窗寬度 – max-width 最大到… (小於) • @media screen and (max-width: 400px) – screen: 電腦螢幕、手機、平板螢幕 – print: 印表機 – projection: 投影機 – tv: 電視機
  15. Media Query - device-pixel-ratio devicePixelRatio = physical pixels(物理像素 ) /

    設備獨立像素 dips 1 pixel 不只是 1 pixel
  16. 常見裝置的 device-pixel-ratio 線上檢測您的裝置 device-pixel-ratio http://bjango.com/articles/min-device-pixel-ratio/ 1.0 1.3 1.5 2.0 3.0

    • 一般PC • <iPhone 3GS • <iPad 2 • iPad mini 1 代 • Nexus 7 (1代) • Asus MemoPad HD 7 • HTC Desire HD • Kindle Fire HD • Samsung S2 • 視網膜 Mac • iPhone 4+ • iPad 3+ • HTC One X • Samsung S3 • Samsung Note 2 • Nexus 7 (2代) • HTC One (M7) • HTC Butterfly • LG G2 • Samsung S4 • Samsung Note 3
  17. 用device-pixel-ratio判斷裝置特性, 執行對應的CSS @media only screen and (-webkit-min-device- pixel-ratio: 2), only

    screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 2dppx) { CSS code } 要對應各家瀏覽器,必須要寫這麼多行 你也可以用Sass或一些編輯器外掛來幫你補瀏覽器前綴詞(prefix)
  18. 掌握解析度-慎選 Breakpoint First Screen 會看到不一樣的東西 手機(直) 平板(橫) 手機(橫) 平板(直) 視窗沒有放到最大的電腦螢幕

    多一吋螢幕就多一份重量的筆電
  19. 目的: – 在不同寬度的螢幕上呈現的東西要如何編排? – 在不同高度的螢幕上呈現的東西要如何編排? – 同一寬度條件,但顯示高度不同,要如何編排? – 同一份資料在大螢幕上看,縮小之後是否還看 得清楚?

    – 如何最快速達成上述需求,而且不用寫許多組 css?
  20. 掌握解析度-慎選 Breakpoints • 320 : Smartphone 手機打直 • 481 or

    568 : Smartphone 手機打橫 • 768 : 平板 打直 • 961 : 平板打橫 / 小筆電 / 瀏覽器視窗沒有放到最大的PC • 1025 : 桌機 • 1281 : 寬螢幕 Style.css @media only screen and (min-width : 320px) and (max-width : 480px) {手機直} @media only screen and (min-width : 480px) and (max-width : 595px) {手機橫} @media only screen and (min-width : 595px) and (max-width : 800px) {平板直} @media only screen and (min-width : 800px) and (max-width : 1024px) {平板橫} @media only screen and (min-width : 1024px) and (max-width : 1224px){寬螢幕}
  21. Media Query - 另一種寫法 <head> <link rel=“stylesheet” href=“layout.css”> <link media=“(max-width:600px)”

    href=“layout-small.css” rel=“stylesheet” > <link media=“(min-width:601px)” href=“layout-large.css” rel="stylesheet" > </head> 缺點 : 改變breakpoint時要動 html,或是一次要修改好幾支css檔
  22. Bootstrap菜鳥 • Bootstrap 2 預設為螢幕寬<768時,選單會摺 疊變為≡ 圖示,但是如果視窗沒放到最大… • 使用position:fixed屬性,選單高度變更沒有隨 螢幕寬度再作處理,導致蓋住網頁上的內容

  23. 慎用 position:fixed http://dbushell.com/2013/09/10/css-fixed-positioning-and-mobile-zoom/

  24. Table 如何 RWD Table切版的網頁談RWD? 免談!!

  25. Table 如何 RWD 網頁還是離不開表格 • 會員購物紀錄、訂單 • 報表 • 菜單

    • 規格資料 • 購物車結帳畫面 • 表單類 • 在後台用table排資料 X 目標 : 一長串的資料在小螢幕要如何呈現
  26. Table 如何 RWD – 範例1 讓table出現卷軸法 Ex.Bootstrap 缺點,如果有很多列,卷軸會在螢幕外

  27. Table 如何 RWD – 範例2 行列置換法 缺點: 不適合有跨欄跨列的表格、表格內不能混雜其他東西

  28. 四、Table 如何 RWD – 範例3 資訊收合法 Ex: Foo Table

  29. Table 如何 RWD – 範例4 要看什麼自己選法 Ex: Responsive tables by

    @nadangergeo & @filamentgroup 缺點同範例1
  30. 選單如何 RWD • 目的: 一組menu的html,隨環境顯示正確的選單 這就是為什麼我們要用一些前端的framework,因為他都幫我們做好初步規劃了 <nav> <ul id=”menu”> <li><a

    href=“a.html”>項目1</a></li> <li><a href=“b.html”>項目2</a> <ul class=“submenu”> <li><a href=“a.html”>項目1</a></li> <li><a href=“b.html”>項目2</a> </ul> </li> <li><a href=“c.html”>項目3</a></li> </ul> </nav>
  31. 選單如何 RWD – 範例1 選單 在行動裝置變成下拉式Select選單 優點: 結構單純,不會有點不到、破圖…等問題 缺點: Android/

    iOS / WP 的各瀏覽器 select 顯示效果都不一樣
  32. 選單如何 RWD – 範例2 在行動裝置變成下拉式選單 Ex.Bootstrap預設樣式 優點: 可自訂樣式 方便顯示多層分類 缺點:

    字少時在平板/大手機可能造成空間浪費 Hamburger icon的介面設計探討
  33. 選單如何 RWD – 範例3 Off canvas Menu 側邊展開選單 Ex. Foundation,

    Google starter kit, Jquery Mobile, Yahoo Pure… 以上framework的行動選單樣式都是 Off canvas Menu
  34. 其他行動裝置選單範例 矩陣式 錨點式

  35. 其他行動裝置選單範例 獨立選單頁( http://rvlt.com/ ) 無選單式(非RWD)

  36. 其他行動裝置選單範例 http://devco.re/ 動畫效果式 頭尾固定式

  37. 選單如何 RWD – 現實面 項目超多又有圖… ? ? 選單整塊都是圖片…. 網頁有好幾組選單的時候... •

    主選單 • 註冊、登入、等會員功能選單 • 切換語系選單 • 搜尋功能 • 左邊分類選單…
  38. 行動裝置上的網頁動畫 經典文字閃光動畫 常用於建築業、室內設計、工業類網站 經典落葉+陽光動畫 萬用素材 美工通常都做過以下 Flash 動畫,但在手機上要怎麼辦呢? 飛翔軌跡動畫 引導視線,或拖延網頁停留時間專用

    經典星光閃爍動畫 常用於深色背景的網站
  39. 技術/格式 可用軟體 優點 缺點 Gif Adobe Flash, Photoshop 相容性高 檔案大、256色、半透明邊緣爆炸

    Javascript + css 繪圖軟體+文字編輯器 相容性高 製作時間拉長 Html5 canvas Adobe Flash, Google web designer, Adobe Edge animate 效能 IE8、不夠直覺 Svg Adobe Edge animate / 繪 圖軟體+文字編輯器 效能、向量 IE8、不夠直覺 Css3 Adobe Edge animate / 繪 圖軟體+文字編輯器 效能、方便 IE8、不夠直覺 嵌入影片 (flv, mp4) Adobe After Effect 符合一般作 動畫的流程 • 影片載入前->畫面沒東西 • 串流影音->播到一半lag或停 住 • 無法與影片中的元件互動 • 有些裝置會鎖自動播放 比較常見、相容性高的解決方案 行動裝置上的網頁動畫
  40. 新時代網頁動畫案例 IE团队技术揭秘:“月熊志”是怎样炼成的?(3D webGL) 前端技术:迅雷7.9宣传下载页面CSS3动画实现心得

  41. 圖片也要RWD 目的 圖片類型 手段 • 小螢幕顯示比較小張的 圖, 減少載入流量 提高縮放與滑動時的整 體網頁效能

    • 高品質螢幕(如Retina Display)顯示更好的圖 • CSS 圖片 • 使用media query切換 • HTML 圖片 • 使用 javascript 套件切換 ex. rwd.images.js <img class="rwdimage" data-rwdimage=" { src: url(/images/4-by-3.jpg); }, (min-width: 501px) { src: url(/images/16-by-9.jpg); } " /> <script src="/js/enquire.min.js"></script> <script src="/js/rwd.images.min.js"></script> • 由伺服器端處理 • Picture element (未定案) • srcset (未定案) 隨螢幕滿版縮放,符合全 畫面(Fit Screen) 使用相關Css 屬性 max-width, min-width, width max-height, min-height, height Background-size, background-cover
  42. 圖片也要RWD – 應用題 ??? 如果使用 Fit screen 方案 • 字太小看不清楚

    • 要一直縮放,滑動才能看完整張圖 一般製作網頁輪播展示圖片,或是電子郵件 edm 會遇到的問題… http://placekitten.com/
  43. 圖片也要RWD – 應用題 http://static.elliotjaystocks.com/responsive- background-images/examples/problem1.html

  44. 圖片也要RWD – 應用題 字太多,導致精心計畫的圖片與編排破功 http://static.elliotjaystocks.com/responsive- background-images/examples/problem1.html

  45. 圖示也要RWD • http://responsiveicons.co.uk/ • http://www.smashingmagazine.com/2014/ 03/05/rethinking-responsive-svg/ • https://useiconic.com/guides/using-iconic- responsively/

  46. 嵌入多媒體也要 RWD <iframe width="853" height="480" src="//www.youtube.com/embed/CfpzKs XeluY?rel=0" frameborder="0" allowfullscreen></iframe> 縮放寬高的算式要寫好,不然會出

    現黑邊。 要額外再寫 css 覆寫 iframe 寬度, 不然影片會被裁掉 、或是超出版面 ex.Responsive Youtube Embed, fitvids.js
  47. 設定Flash替代內容 在電腦上看到華麗的flash動畫選單, 在行動裝置上還是可以正常瀏覽與點選 若使用 swfobject.js 嵌入Flash 可將替代文字修改 成靜態選單超連結

  48. 表單準備好了嗎? 一般網站的輸入表單 • 搜尋 • 聯絡表單 • 報名表單 • 線上訂購單

    • 網站管理後台 購物網站常見的輸入表單 • 會員註冊表單 • 會員登入表單 • 忘記密碼表單 • 購物結帳 • 金流相關表單 • 物流相關表單
  49. 表單準備好了嗎? 如何改善在行動裝置上痛 苦的輸入流程? • 自動完成(auto complete) • 正確的表單屬性設置 • 減少必填欄位

    • 欄位驗證失敗可以即時提示 (不要等全部填完送出之後才提示) • 如果欄位驗證失敗,不會把使用者輸入 的資料清掉。 • Oauth第三方登入功能 • HTML5 Geolocation API • 賣非常棒的產品,表單再難用,客人也 會買。(???)
  50. 表單準備好了嗎? 選項A 選項A <input type=“radio”>選項A <label> <input type=“radio”>選項A </label> 感應區域

    感應區域 讓選項文字也變成可點擊的感應區域 Checkbox, radio 點擊區域問題
  51. 表單準備好了嗎? type=email type=tel type=number type=text 讓使用者在輸入email/電話/數字時,可以直接彈出正確的鍵盤 正確的表單屬性設置

  52. 表單準備好了嗎? 太主動的「自動拼字修正」功能可能導致輸入錯誤的資訊 可設定 <input autocorrect=“off”> 關閉自動拼字更正功能

  53. 表單準備好了嗎? 瀏覽器會自動幫你把開頭文字變大寫,導致網站登入、驗證碼檢查都無法使用 就要設定 <input autocapitalize=“off”> http://www.smashingmagazine.com/2013/05/21/recommendations-mobile-commerce-websites/

  54. 表單準備好了嗎? 可使用的input屬性與瀏覽器支援度查詢 http://www.wufoo.com/html5

  55. 表單準備好了嗎? • 留意輸入框寬度是否過短,造成輸入或確認的困難 • 欄位說明或名稱請放在左邊或上面,因為鍵盤輸入時會蓋住網頁下半部 http://www.smashingmagazine.com/2013/05/21/recommendations-mobile-commerce-websites/

  56. 表單準備好了嗎? 50 + - 我打錯了 X 可以看密碼有沒有打對 可以快速更改數量 可以快速清除輸入內容 用點的驗證碼

    表單元件的取捨 http://uxmovement.com/forms/stop-misusing-select-menus/
  57. 按鈕準備好了嗎? 按鈕 按鈕 • 西方研究: 按鈕最好大於48px http://touchlab.mit.edu/p ublications/2003_009.pdf • 清楚知道點擊範圍

    • 實際感應區域有多大? <------- 48px ------> <------- 48px ------> • 是按鈕還是字? • 畫面較簡潔, 感應區域感覺也變大了 穩 潮
  58. 網頁原本用的Plugins準備好了嗎? • Modal box 功能 (如Lightbox, jQuery UI Dialog)之類的 特效,在行動裝置上的版面會不會有被裁掉、點不到按鈕

    的情況發生? • 是否有經由hover滑鼠事件才能觸發的重要功能或按鈕? • 是否有需按住鍵盤某鍵,滑鼠再點擊某處,才能使用的重 要功能? • 一些變更瀏覽器預設表單樣式的套件,在行動裝置上能否 正常點擊、瀏覽、使用? • 一些PC only的表單元件(如select multiple),在行動裝置該 如何讓人操作? • 網頁上是否有使用flash元件的功能(如多檔選取上傳),在 行動裝置上會功能失效?
  59. 文書人員上資料時要小心 • 避免手動換行 • 有些高級文書人員在PO新聞或商品資料時會用 table排資料,但是在行動裝置上… • 實際測試圖文、多媒體混排在不同裝置上的呈現 是否適當。 (中央社記者林孟汝台北30日電)

    國際液化瓦斯需求增加,依浮動氣價機 制估計,7月桶裝瓦斯每公斤恐上漲新 台幣0.5元,天然氣價格每立方公尺則 微幅調漲;實際調幅要等中油公司7月 1日下午公布。 (中央社記者林孟汝台北 30日電) 國際液化瓦斯需求增加, 依浮動氣價機 制估計,7月桶裝瓦斯每 公斤恐上漲新 台幣0.5元,天然氣價格每 立方公尺則… 寬度變動時… 手動斷行,表面上創造美觀的版面
  60. 多看、多學、多做 • 看看別人的作品 http://responsive-jp.com/ http://mediaqueri.es/ • 查詢裝置資訊 Viewport Sizes •

    查詢瀏覽器支援度 http://caniuse.com/ • 查詢device-pixel-ratio http://bjango.com/articles/min-device-pixel-ratio/ • The Current State of HTML5 Forms http://www.wufoo.com/html5
  61. 測試工具 • All-New ScreenQueries • Viewport Resizer • Android SDK

    • Opera Mobile Classic Emulator • Remote Debugging
  62. 進階的RWD • 不要什麼東西都由客戶端的瀏覽器與硬體 設備來處理,也可以由伺服器後端處理, 提高網站效能。 • 如何針對不同的裝置,適當地呈現內容。 • 建立各裝置間一致的使用者操作體驗。 •

    更方便直覺、多功能的開發工具或框架。 • 優雅降級/漸進增強 的設計理念 • $$$