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

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

View Slide

大環境

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

內可以設定的
• 主畫面圖示相關設定

• iOS隱藏瀏覽器按鈕列 (網頁要加到主畫面)

• 電話號碼不讓人點

網頁裡有一堆數據資料，容易被手機誤判為電話號碼時可使用
• 讓IE用最新的文件模式來執行網頁，而不要進入相容性模式

不然網頁在PC IE上看可能會爆炸

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Media Query - 另一種寫法

rel=“stylesheet” >
rel="stylesheet" >

缺點 : 改變breakpoint時要動 html，或是一次要修改好幾支css檔

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

行列置換法
缺點: 不適合有跨欄跨列的表格、表格內不能混雜其他東西

View Slide

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

View Slide

要看什麼自己選法
Ex: Responsive tables
by @nadangergeo & @filamentgroup
缺點同範例1

View Slide

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

項目1
項目2

項目1
項目2

項目3

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

獨立選單頁( http://rvlt.com/ ) 無選單式(非RWD)

View Slide

http://devco.re/
動畫效果式頭尾固定式

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

http://static.elliotjaystocks.com/responsive-
background-images/examples/problem1.html

View Slide

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

View Slide

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

View Slide

嵌入多媒體也要 RWD
src="//www.youtube.com/embed/CfpzKs
XeluY?rel=0" frameborder="0"
allowfullscreen>
縮放寬高的算式要寫好，不然會出
現黑邊。
要額外再寫 css 覆寫 iframe 寬度，
不然影片會被裁掉、或是超出版面
ex.Responsive Youtube Embed, fitvids.js

View Slide

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

View Slide

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

View Slide

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

View Slide

選項A 選項A
選項A
選項A

感應區域感應區域
讓選項文字也變成可點擊的感應區域
Checkbox, radio 點擊區域問題

View Slide

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

View Slide

太主動的「自動拼字修正」功能可能導致輸入錯誤的資訊
可設定關閉自動拼字更正功能

View Slide

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

View Slide

可使用的input屬性與瀏覽器支援度查詢
http://www.wufoo.com/html5

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

jiimmysu

More Decks by jiimmysu

Other Decks in Design

Featured

Transcript