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

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

大環境

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

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

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

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

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準備好了嗎? • 文書人員上資料時要小心 • 測試工具

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

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

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

<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上看可能會爆炸

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

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

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

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

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

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

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

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

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

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檔

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

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

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

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

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

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

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

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

選單如何 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>

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

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

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

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

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

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

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

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

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

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

圖片也要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

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

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

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

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

嵌入多媒體也要 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

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

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

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

表單準備好了嗎? 選項A 選項A <input type=“radio”>選項A <label> <input type=“radio”>選項A </label> 感應區域
感應區域讓選項文字也變成可點擊的感應區域 Checkbox, radio 點擊區域問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by jiimmysu

Other Decks in Design

Featured

Transcript