Tweet
Tweet

Slide 1

Slide 1 text

行動版網頁不就是把網頁縮小而已嗎? [email protected] http://jimmysu.logdown.com/

Slide 2

Slide 2 text

大環境

Slide 3

Slide 3 text

你的網站在行動裝置上能看嗎? • 線上輸入表單 : 挑戰人類耐心極限的 • 一直縮放、拖曳、縮放、換頁、拖曳、縮放 • 很難點的按鈕 • 「滑鼠移過」才會看到某些按鈕，但手機上沒有滑鼠移過這回事。 • 全Flash的網站、或是選單是Flash的網站，在行動裝置根本看不到 • ….族繁不及備載

Slide 4

Slide 4 text

案例宣導 設計，不是美化 — 2011 台北設計大展的爛設計 MR JAMIE ─ 創業者需要的啟發，每日新鮮供應 總統府700萬網站，華麗的突槌＋手機可愛版 T客邦

Slide 5

Slide 5 text

在行動裝置呈現資料的選擇 原生APP RWD 行動專屬網站 特色 • 可使用較多的手機硬體、軟 體功能，如推播通知、各種 感應器、離線操作、讀取手 機文件…等。 • 要通過審核跟繳年費才能上 架 • 行動/桌機的網址相同，利於搜尋 引擎索引與分享 • 後端程式只要寫一次，其他都是 美工跟前端的事。 • 可引導客戶將網站「加入主畫 面」，在客戶桌面佔有一席之地。 • 區分手機版網站 與完整版網站 • 編排與效能最佳 化 缺點 • iOS/Android 跨平台問題 • App後續維護與更新問題 • 搜尋引擎難以索引app內容 • 動線的規劃與設計 • 資料呈現需有規劃 • 高度依賴客戶端瀏覽環境 • 載入速度問題 • 要維護兩個網站 適合 • 預算充足的客人 • 有特別互動需求者 • 需要極快速反應的程式、複 雜的動畫、遊戲 … 等 • 需要下載付費才能使用的網 路服務 • 一個網站打天下的客人 • 原有網站架構龐 大、改版工程浩 大的客人

Slide 6

Slide 6 text

其他行動裝置資料呈現方案 Web App AIR For Android/iOS App套版程式、 App開店程式 製作電子書 (Epub格式或各大軟體 市集架上的電子書/互 動電子書) 用網頁方式製作， 再用 Phonegap 之類 的程式，封裝編譯 各手機平台的 App。 使用 Flash 相關開發 工具製作，編譯成 App。 範例: • Android Authority、 • Xure Apps • United Cloud Apps • 91mai • … 使用 Adobe Indesign 等 的程式製作互動電子書， 在市集上架。

Slide 7

Slide 7 text

RWD(Responsive Web Design) 實作技術細節 • 基本心法1 – 流動布局 • 內的設定 • 判斷使用者 • 基本心法2 –Media Query • Media Query & Media Type • Media Query - device-pixel-ratio • 掌握解析度-慎選 Breakpoint • Table 如何 RWD • 選單如何 RWD • 行動裝置上的網頁動畫 • 圖片也要RWD • 圖示也要RWD • 嵌入多媒體也要 RWD • 設定Flash替代內容 • 表單準備好了嗎? • 按鈕準備好了嗎? • 網頁原本用的Plugins準備 好了嗎? • 文書人員上資料時要小心 • 測試工具

Slide 8

Slide 8 text

RWD(Responsive Web Design) 基本心法1- 流動布局(Fluid layout ) http://www.weareconvoy.com/2013/12/04/responsive-vs-adaptive-layout-design/

Slide 9

Slide 9 text

內可以設定的 • Width=device-width / 固定數值 設定網頁與手機可視寬度或是實際寬度同寬 • user-scalable 設定網頁是否可被縮放 • initial-scale 初始縮放倍率 • maximum-scale 最高縮放倍率 • minimum-scale 最小縮放倍率

Slide 10

Slide 10 text

內可以設定的 http://frugihoyi.wordpress.com/2013/04/20/optimizing-webpages-for-mobile-devices-part-1-the-viewport-meta-tag/ 有加 viewport 沒有加 viewport * 如使用一些網域轉址服務或免空網頁，會在原有網頁外面加一層frameset，將導致武功全廢

Slide 11

Slide 11 text

內可以設定的 • 主畫面圖示相關設定 • iOS隱藏瀏覽器按鈕列 (網頁要加到主畫面) • 電話號碼不讓人點 網頁裡有一堆數據資料，容易被手機誤判為電話號碼時可使用 • 讓IE用最新的文件模式來執行網頁，而不要進入相容性模式 不然網頁在PC IE上看可能會爆炸

Slide 12

Slide 12 text

判斷使用者 方法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/

Slide 13

Slide 13 text

基本心法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){}

Slide 14

Slide 14 text

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: 電視機

Slide 15

Slide 15 text

Media Query - device-pixel-ratio devicePixelRatio = physical pixels(物理像素 ) / 設備獨立像素 dips 1 pixel 不只是 1 pixel

Slide 16

Slide 16 text

常見裝置的 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 •

Slide 17

Slide 17 text

用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)

Slide 18

Slide 18 text

掌握解析度-慎選 Breakpoint First Screen 會看到不一樣的東西 手機(直) 平板(橫) 手機(橫) 平板(直) 視窗沒有放到最大的電腦螢幕 多一吋螢幕就多一份重量的筆電

Slide 19

Slide 19 text

目的: – 在不同寬度的螢幕上呈現的東西要如何編排? – 在不同高度的螢幕上呈現的東西要如何編排? – 同一寬度條件，但顯示高度不同，要如何編排? – 同一份資料在大螢幕上看，縮小之後是否還看 得清楚? – 如何最快速達成上述需求，而且不用寫許多組 css?

Slide 20

Slide 20 text

掌握解析度-慎選 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){寬螢幕}

Slide 21

Slide 21 text

Media Query - 另一種寫法 缺點 : 改變breakpoint時要動 html，或是一次要修改好幾支css檔

Slide 22

Slide 22 text

Bootstrap菜鳥 • Bootstrap 2 預設為螢幕寬<768時，選單會摺 疊變為≡ 圖示，但是如果視窗沒放到最大… • 使用position:fixed屬性，選單高度變更沒有隨 螢幕寬度再作處理，導致蓋住網頁上的內容

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Table 如何 RWD 網頁還是離不開表格 • 會員購物紀錄、訂單 • 報表 • 菜單 • 規格資料 • 購物車結帳畫面 • 表單類 • 在後台用table排資料 X 目標 : 一長串的資料在小螢幕要如何呈現

Slide 26

Slide 26 text

Table 如何 RWD – 範例1 讓table出現卷軸法 Ex.Bootstrap 缺點，如果有很多列，卷軸會在螢幕外

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Table 如何 RWD – 範例4 要看什麼自己選法 Ex: Responsive tables by @nadangergeo & @filamentgroup 缺點同範例1

Slide 30

Slide 30 text

選單如何 RWD • 目的: 一組menu的html，隨環境顯示正確的選單 這就是為什麼我們要用一些前端的framework，因為他都幫我們做好初步規劃了
  • 項目1
  • 項目2
    • 項目1
    • 項目2
  • 項目3

Slide 31

Slide 31 text

選單如何 RWD – 範例1 選單 在行動裝置變成下拉式Select選單 優點: 結構單純，不會有點不到、破圖…等問題 缺點: Android/ iOS / WP 的各瀏覽器 select 顯示效果都不一樣

Slide 32

Slide 32 text

選單如何 RWD – 範例2 在行動裝置變成下拉式選單 Ex.Bootstrap預設樣式 優點: 可自訂樣式 方便顯示多層分類 缺點: 字少時在平板/大手機可能造成空間浪費 Hamburger icon的介面設計探討

Slide 33

Slide 33 text

選單如何 RWD – 範例3 Off canvas Menu 側邊展開選單 Ex. Foundation, Google starter kit, Jquery Mobile, Yahoo Pure… 以上framework的行動選單樣式都是 Off canvas Menu

Slide 34

Slide 34 text

其他行動裝置選單範例 矩陣式 錨點式

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

選單如何 RWD – 現實面 項目超多又有圖… ? ? 選單整塊都是圖片…. 網頁有好幾組選單的時候... • 主選單 • 註冊、登入、等會員功能選單 • 切換語系選單 • 搜尋功能 • 左邊分類選單…

Slide 38

Slide 38 text

行動裝置上的網頁動畫 經典文字閃光動畫 常用於建築業、室內設計、工業類網站 經典落葉+陽光動畫 萬用素材 美工通常都做過以下 Flash 動畫，但在手機上要怎麼辦呢? 飛翔軌跡動畫 引導視線，或拖延網頁停留時間專用 經典星光閃爍動畫 常用於深色背景的網站

Slide 39

Slide 39 text

技術/格式 可用軟體 優點 缺點 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或停 住 • 無法與影片中的元件互動 • 有些裝置會鎖自動播放 比較常見、相容性高的解決方案 行動裝置上的網頁動畫

Slide 40

Slide 40 text

新時代網頁動畫案例 IE团队技术揭秘：“月熊志”是怎样炼成的？(3D webGL) 前端技术：迅雷7.9宣传下载页面CSS3动画实现心得

Slide 41

Slide 41 text

圖片也要RWD 目的 圖片類型 手段 • 小螢幕顯示比較小張的 圖， 減少載入流量 提高縮放與滑動時的整 體網頁效能 • 高品質螢幕(如Retina Display)顯示更好的圖 • CSS 圖片 • 使用media query切換 • HTML 圖片 • 使用 javascript 套件切換 ex. rwd.images.js • 由伺服器端處理 • Picture element (未定案) • srcset (未定案) 隨螢幕滿版縮放，符合全 畫面(Fit Screen) 使用相關Css 屬性 max-width, min-width, width max-height, min-height, height Background-size, background-cover

Slide 42

Slide 42 text

圖片也要RWD – 應用題 ??? 如果使用 Fit screen 方案 • 字太小看不清楚 • 要一直縮放，滑動才能看完整張圖 一般製作網頁輪播展示圖片，或是電子郵件 edm 會遇到的問題… http://placekitten.com/

Slide 43

Slide 43 text

圖片也要RWD – 應用題 http://static.elliotjaystocks.com/responsive- background-images/examples/problem1.html

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

嵌入多媒體也要 RWD 縮放寬高的算式要寫好，不然會出 現黑邊。 要額外再寫 css 覆寫 iframe 寬度， 不然影片會被裁掉 、或是超出版面 ex.Responsive Youtube Embed, fitvids.js

Slide 47

Slide 47 text

設定Flash替代內容 在電腦上看到華麗的flash動畫選單， 在行動裝置上還是可以正常瀏覽與點選 若使用 swfobject.js 嵌入Flash 可將替代文字修改 成靜態選單超連結

Slide 48

Slide 48 text

表單準備好了嗎? 一般網站的輸入表單 • 搜尋 • 聯絡表單 • 報名表單 • 線上訂購單 • 網站管理後台 購物網站常見的輸入表單 • 會員註冊表單 • 會員登入表單 • 忘記密碼表單 • 購物結帳 • 金流相關表單 • 物流相關表單

Slide 49

Slide 49 text

表單準備好了嗎? 如何改善在行動裝置上痛 苦的輸入流程? • 自動完成(auto complete) • 正確的表單屬性設置 • 減少必填欄位 • 欄位驗證失敗可以即時提示 (不要等全部填完送出之後才提示) • 如果欄位驗證失敗，不會把使用者輸入 的資料清掉。 • Oauth第三方登入功能 • HTML5 Geolocation API • 賣非常棒的產品，表單再難用，客人也 會買。(???)

Slide 50

Slide 50 text

表單準備好了嗎? 選項A 選項A 選項A 選項A 感應區域 感應區域 讓選項文字也變成可點擊的感應區域 Checkbox, radio 點擊區域問題

Slide 51

Slide 51 text

表單準備好了嗎? type=email type=tel type=number type=text 讓使用者在輸入email/電話/數字時，可以直接彈出正確的鍵盤 正確的表單屬性設置

Slide 52

Slide 52 text

表單準備好了嗎? 太主動的「自動拼字修正」功能可能導致輸入錯誤的資訊 可設定 關閉自動拼字更正功能

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

表單準備好了嗎? 50 + - 我打錯了 X 可以看密碼有沒有打對 可以快速更改數量 可以快速清除輸入內容 用點的驗證碼 表單元件的取捨 http://uxmovement.com/forms/stop-misusing-select-menus/

Slide 57

Slide 57 text

按鈕準備好了嗎? 按鈕 按鈕 • 西方研究: 按鈕最好大於48px http://touchlab.mit.edu/p ublications/2003_009.pdf • 清楚知道點擊範圍 • 實際感應區域有多大? <------- 48px ------> <------- 48px ------> • 是按鈕還是字? • 畫面較簡潔， 感應區域感覺也變大了 穩 潮

Slide 58

Slide 58 text

網頁原本用的Plugins準備好了嗎? • Modal box 功能 (如Lightbox, jQuery UI Dialog)之類的 特效，在行動裝置上的版面會不會有被裁掉、點不到按鈕 的情況發生? • 是否有經由hover滑鼠事件才能觸發的重要功能或按鈕? • 是否有需按住鍵盤某鍵，滑鼠再點擊某處，才能使用的重 要功能? • 一些變更瀏覽器預設表單樣式的套件，在行動裝置上能否 正常點擊、瀏覽、使用? • 一些PC only的表單元件(如select multiple)，在行動裝置該 如何讓人操作? • 網頁上是否有使用flash元件的功能(如多檔選取上傳)，在 行動裝置上會功能失效?

Slide 59

Slide 59 text

文書人員上資料時要小心 • 避免手動換行 • 有些高級文書人員在PO新聞或商品資料時會用 table排資料，但是在行動裝置上… • 實際測試圖文、多媒體混排在不同裝置上的呈現 是否適當。 （中央社記者林孟汝台北30日電） 國際液化瓦斯需求增加，依浮動氣價機 制估計，7月桶裝瓦斯每公斤恐上漲新 台幣0.5元，天然氣價格每立方公尺則 微幅調漲；實際調幅要等中油公司7月 1日下午公布。 （中央社記者林孟汝台北 30日電） 國際液化瓦斯需求增加， 依浮動氣價機 制估計，7月桶裝瓦斯每 公斤恐上漲新 台幣0.5元，天然氣價格每 立方公尺則… 寬度變動時… 手動斷行，表面上創造美觀的版面

Slide 60

Slide 60 text

多看、多學、多做 • 看看別人的作品 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

Slide 61

Slide 61 text

測試工具 • All-New ScreenQueries • Viewport Resizer • Android SDK • Opera Mobile Classic Emulator • Remote Debugging

Slide 62

Slide 62 text

進階的RWD • 不要什麼東西都由客戶端的瀏覽器與硬體 設備來處理，也可以由伺服器後端處理， 提高網站效能。 • 如何針對不同的裝置，適當地呈現內容。 • 建立各裝置間一致的使用者操作體驗。 • 更方便直覺、多功能的開發工具或框架。 • 優雅降級/漸進增強 的設計理念 • $$$