Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Technical Approach to Responsive Web Design 1
Chris Wu
Technical Approaches to RWD
從技術⾓角度看 Responsive Web Design
Technical Approach to Responsive Web Design 2
Responsive Web Design 

帶來了網⾴頁技術的⾰革新
僅僅透過 Media Queries 偵測螢幕尺⼨寸,

便能提供適合不同尺⼨...
Mobile Experience
Technical Approach to Responsive Web Design 6
RWD 開發的挑戰
⾏行動裝置尺⼨寸
開發複雜度提⾼高1
瀏覽速度
使⽤用者體驗2
提⾼高內容品質
速度卻不能降低3
使⽤用者看到的網⾴頁成果,
底下卻...
Technical Approach to Responsive Web Design 7
Operating Systems
youngdesigner.rocks
Technical Approach to Responsive Web Design 8
Mobile Friendly
現今搜尋引擎排名的要件
排名退後,你知道你⽼老闆現在⾮非常⽕火嗎?
APR. 21
2015
Google expand...
Technical Approach to Responsive Web Design 9
現今技術
Technical Approach to Responsive Web Design 10
嗨!可以看看你的網站嗎?
好啊!

可以讓我知道你的裝置類型嗎?
我是 iPad mini 上的 Safari
OK,提供你適合的樣式跟程式
AWD
...
Technical Approach to Responsive Web Design 11
嗨!來看看 modernweb.tw 網站!
好啊!

可以讓我知道你的螢幕多⼤大嗎?
我的畫⾯面寬度是 768 px
OK,那你⽤用平板的樣式瀏覽網...
Technical Approach to Responsive Web Design 12
Desktop
Tablet
Mobile
RWD
Responsive Web Design
Technical Approach to Responsive Web Design 13
嗨!可以看看你的網站嗎?
好啊!

可以讓我知道你的裝置類型嗎?
我是 iPad mini 上的 Safari
RESS
Responsive Web...
Technical Approach to Responsive Web Design 14
RWD
Responsive Web Design
失敗!
Technical Approach to Responsive Web Design 15
完美!
成功!
Technical Approach to Responsive Web Design 16
Technical Approach to Responsive Web Design 17
width: 100%
Technical Approach to Responsive Web Design 18
曾經,網站開發還滿簡單的......
Technical Approach to Responsive Web Design 19
Technical Approach to Responsive Web Design 20
Technical Approach to Responsive Web Design 21
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
Technical Approach to Responsive Web Design 22
http://www.guimp.com
Technical Approach to Responsive Web Design 23
更多實務上的問題
無法遵循流動佈局
合併或拆分元件
當RWD 遇到 iframe
Retina 的圖⽚片品質
CSS/JS 相容與穩定性問題
Technical Approach to Responsive Web Design 24
世
界
越
快
站
則
大
⾦金城武說:
Technical Approach to Responsive Web Design 25
960
1,286
1,701
1,953kb
End of
2011
End of
2012
End of
2013
End of
2014
網路終...
Technical Approach to Responsive Web Design 26
End of 2014
280
560
840
1120
1400
HTML CSS Flash JS Images Other
1,243
295
...
Technical Approach to Responsive Web Design 27
80/20 法則
處理好圖⽚片與 JS 的問題,便能夠解決⼤大部份的下載效能
Technical Approach to Responsive Web Design 28
技術性四⼤大要素
資源⼀一致性
媒體、樣式表具⼀一致性,
避免重⼯工
媒體相容性
區隔圖⽚片讀取時機,
主動提供正確資料
環境狀態感知
掌握使⽤用環境...
Technical Approach to Responsive Web Design 29
資源⼀一致性
Technical Approach to Responsive Web Design 30
乾坤⼤大挪移
違背 RWD ⾃自然流動佈局
PM: Can We Move the Block?
It’s easy, isn’t it!
Technical Approach to Responsive Web Design 32
乾坤⼤大挪移
Technical Approach to Responsive Web Design 33
乾坤⼤大挪移
Technical Approach to Responsive Web Design 34
Technical Approach to Responsive Web Design 35
Technical Approach to Responsive Web Design 36
• ⽤用 javascript 對調?
• show(); hide(); ?
• css?
乾坤⼤大挪移
Technical Approach to Responsive Web Design 37
乾坤⼤大挪移
Technical Approach to Responsive Web Design 38
.desktop-only{}
.mobile-only{}
乾坤⼤大挪移
Technical Approach to Responsive Web Design 39
這樣就沒有問題嗎?
重複的 HTML
重複的圖⽚片
Technical Approach to Responsive Web Design 40
1 + 1 > 2
Technical Approach to Responsive Web Design 41
置頂特⾊色⽂文章,所有分⾴頁皆顯⽰示
其餘每⼀一分⾴頁 8 篇⽂文章
Technical Approach to Responsive Web Design 42
置頂特⾊色⽂文章
每⼀一分⾴頁 20 篇⽂文章,含特⾊色⽂文章
Technical Approach to Responsive Web Design 43
Technical Approach to Responsive Web Design 44
Technical Approach to Responsive Web Design 45
Technical Approach to Responsive Web Design 46
Technical Approach to Responsive Web Design 47
Technical Approach to Responsive Web Design 48
更多的 HTML
更多及重複的圖⽚片
這樣就沒有問題嗎?
Technical Approach to Responsive Web Design 49
資源⼀一致性
Technical Approach to Responsive Web Design 50
影分⾝身之術
Technical Approach to Responsive Web Design 51
有幾個視窗?
Technical Approach to Responsive Web Design 52
Technical Approach to Responsive Web Design 53
資源⼀一致性
{
{
.desktop-only
.mobile-only
Technical Approach to Responsive Web Design 54
媒體相容性
Technical Approach to Responsive Web Design 55
Desktop
Tablet
Mobile
RWD
Responsive Web Design
Technical Approach to Responsive Web Design 56
picturefill
A responsive image polyfill
Technical Approach to Responsive Web Design 57
picturefill
A responsive image polyfill
<!-­‐-­‐	
  Picturefill	
  markup	
  ...
Technical Approach to Responsive Web Design 58
what is <picture> element
HTML5 Living Standard
<picture>	
  
	
  	
  <sour...
Technical Approach to Responsive Web Design 59
what is <img> element
HTML5 Living Standard
<img	
  src="small.jpg"	
  
	
 ...
Technical Approach to Responsive Web Design 60
*_desktop.jpg
only screen and (min-width:769px)
*_landscape.jpg
only screen...
Technical Approach to Responsive Web Design 61
<picture>	
  
	
  	
  <source	
  media="(min-­‐width:	
  769px)"	
  
	
  	
...
Technical Approach to Responsive Web Design 62
RECAP
think about the case
*_large.jpg
*_medium.jpg
—
only screen
and
(min-...
Technical Approach to Responsive Web Design 63
<picture>	
  
	
  	
  <source	
  media="(max-­‐width:	
  414px)"	
  
	
  	
...
Technical Approach to Responsive Web Design 64
<picture>	
  
	
  	
  <source	
  media="(min-­‐width:	
  415px)"	
  
	
  	
...
Technical Approach to Responsive Web Design 65
Alternative
responsive media
SVG
適合插圖、Infographic 類型資
料使⽤用,可透過 CSS 達成動態
及互動...
Technical Approach to Responsive Web Design 66
環境狀態感知
Technical Approach to Responsive Web Design 67
所
Technical Approach to Responsive Web Design 70
數位時代的地球是平的
但路仍不平坦 > 10Mbps
29%
>1.5Mbps
27%
< 1.5Mbps
44%
< 1.5Mbps >1.5Mbp...
Technical Approach to Responsive Web Design 71
Technical Approach to Responsive Web Design 72
Network Information API
2011~2014
<img	
  id='pony'	
  alt="An	
  image	
  ...
Technical Approach to Responsive Web Design 73
Device API
2010~2015
Network Information API —> System Information API —> ?
Technical Approach to Responsive Web Design 74
Technical Approach to Responsive Web Design 75
• Vibration API
• Battery Status API
• Media Capture & Streams
• http://mob...
Technical Approach to Responsive Web Design 76
Loading Widgets
trigger by device width or user-agent
在需要的時候才載⼊入內容
Technical Approach to Responsive Web Design 77
LazyLoad
Technical Approach to Responsive Web Design 78
Loading Widgets
trigger by device width or user-agent
當需要⾏行動版網⾴頁的時候才需要⾏行動選單...
Technical Approach to Responsive Web Design 79
Loading iframe
trigger by device width or user-agent
當 RWD 遇上 iframe
• mobi...
Technical Approach to Responsive Web Design 80
影分⾝身之術
Technical Approach to Responsive Web Design 81
var iFrameLazy = function (viewMode) {
var iframes = viewMode.find('iframe'...
Technical Approach to Responsive Web Design 82
⾼高品質內容
Technical Approach to Responsive Web Design 83
High-Res / Retina Display
在 RWD 網站,你需要多少不同解析度的圖⽚片?
Technical Approach to Responsive Web Design 84
iPhone 6 +
2x 或以上的圖⽚片倍率
High-Res Display
2x
< iPhone 6/iPad
1.5x ~2x 的圖⽚片倍率...
Technical Approach to Responsive Web Design 85
要⽤用到多少種尺⼨寸的圖⽚片才夠?
Technical Approach to Responsive Web Design 86
1x 2x 3x
Desktop 482x290 964x580 —
Tablet Portrait
<= 768px 369x222 738x444...
Technical Approach to Responsive Web Design 87
Wide / Desktop
> 769px
1x 2x
Tablet section 1
569~768px
Tablet section 2 / ...
Technical Approach to Responsive Web Design 88
Designer:
Noooooooooo…..
Technical Approach to Responsive Web Design 89
PNG: pngquant, AdvDef
JPG: jpegoptim, jpegtran
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
With Drup...
Technical Approach to Responsive Web Design 90
處理解析不⾜足的照⽚片
Technical Approach to Responsive Web Design 91
High-Res DisplayLow-Res Display
Technical Approach to Responsive Web Design 92
Image
Low
High
High-Res Display
Technical Approach to Responsive Web Design 93
Image
Low
Resample
High-Res Display
Technical Approach to Responsive Web Design 94
原圖 放⼤大後
Technical Approach to Responsive Web Design 95
• 趨勢告訴我們 RWD 是絕⼤大多數開發與設計者要⾯面臨的問題
• 要做好 RWD 網站並不只是做好流動佈局
• 妥善處理圖⽚片問題,可有效解決網站...
Technical Approach to Responsive Web Design 96
Responsive Responsible
為什麼⽽而做?
為裝置?
為誰⽽而做?
為客⼾戶?
為⽼老闆?
Technical Approach to Responsive Web Design 97
WORK HARD

ON RWD
fb.me/amourow	
  
@amourow
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Upcoming SlideShare
Loading in …5
×

從技術角度看 RWD - Technical Approaches to RWD

5,198 views

Published on

Responsive Web Design 帶來了網頁技術的革新,僅僅透過 Media Queries 偵測螢幕尺寸,便能提供適合不同尺寸裝置的內容與樣式。

但光是從螢幕尺寸來偵測行動裝置的瀏覽能力,無疑是瞎子摸象。近兩年內的智慧型手機已經數度提高尺寸與解析度,行動網頁的媒體品質與豐富性也須一併提升。在內容品質提升的同時,過多的圖片或物件可能會降低使用者經驗或付出較高的代價。

從技術角度來看,可歸納『資源一致性』、『相容彈性』、『環境適應』、『品質最佳化』等四個要素。本題將就此四項要素介紹應用實例,說明如何提高 Responsive Web 的彈性,並增加行動網頁瀏覽效率。

Published in: Technology

從技術角度看 RWD - Technical Approaches to RWD

  1. 1. Technical Approach to Responsive Web Design 1 Chris Wu Technical Approaches to RWD 從技術⾓角度看 Responsive Web Design
  2. 2. Technical Approach to Responsive Web Design 2 Responsive Web Design 
 帶來了網⾴頁技術的⾰革新 僅僅透過 Media Queries 偵測螢幕尺⼨寸,
 便能提供適合不同尺⼨寸裝置的內容與樣式。
  3. 3. Mobile Experience
  4. 4. Technical Approach to Responsive Web Design 6 RWD 開發的挑戰 ⾏行動裝置尺⼨寸 開發複雜度提⾼高1 瀏覽速度 使⽤用者體驗2 提⾼高內容品質 速度卻不能降低3 使⽤用者看到的網⾴頁成果, 底下卻有許多察覺不到的開發⽢甘苦
  5. 5. Technical Approach to Responsive Web Design 7 Operating Systems youngdesigner.rocks
  6. 6. Technical Approach to Responsive Web Design 8 Mobile Friendly 現今搜尋引擎排名的要件 排名退後,你知道你⽼老闆現在⾮非常⽕火嗎? APR. 21 2015 Google expanding the use of mobile-friendliness as a ranking signal. FEB. 26 2015 Google announced two important changes about mobile-friendly content.
  7. 7. Technical Approach to Responsive Web Design 9 現今技術
  8. 8. Technical Approach to Responsive Web Design 10 嗨!可以看看你的網站嗎? 好啊!
 可以讓我知道你的裝置類型嗎? 我是 iPad mini 上的 Safari OK,提供你適合的樣式跟程式 AWD Adaptive Web Design
  9. 9. Technical Approach to Responsive Web Design 11 嗨!來看看 modernweb.tw 網站! 好啊!
 可以讓我知道你的螢幕多⼤大嗎? 我的畫⾯面寬度是 768 px OK,那你⽤用平板的樣式瀏覽網站 Tablet RWD Responsive Web Design Desktop Mobile
  10. 10. Technical Approach to Responsive Web Design 12 Desktop Tablet Mobile RWD Responsive Web Design
  11. 11. Technical Approach to Responsive Web Design 13 嗨!可以看看你的網站嗎? 好啊!
 可以讓我知道你的裝置類型嗎? 我是 iPad mini 上的 Safari RESS Responsive Web Design with Server Side Components Tablet Portrait Tablet Landscape Mobile 我的畫⾯面寬度是 768 px OK,這些是你需要的檔案 Mobile
  12. 12. Technical Approach to Responsive Web Design 14 RWD Responsive Web Design 失敗!
  13. 13. Technical Approach to Responsive Web Design 15 完美! 成功!
  14. 14. Technical Approach to Responsive Web Design 16
  15. 15. Technical Approach to Responsive Web Design 17 width: 100%
  16. 16. Technical Approach to Responsive Web Design 18 曾經,網站開發還滿簡單的......
  17. 17. Technical Approach to Responsive Web Design 19
  18. 18. Technical Approach to Responsive Web Design 20
  19. 19. Technical Approach to Responsive Web Design 21 多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
  20. 20. Technical Approach to Responsive Web Design 22 http://www.guimp.com
  21. 21. Technical Approach to Responsive Web Design 23 更多實務上的問題 無法遵循流動佈局 合併或拆分元件 當RWD 遇到 iframe Retina 的圖⽚片品質 CSS/JS 相容與穩定性問題
  22. 22. Technical Approach to Responsive Web Design 24 世 界 越 快 站 則 大 ⾦金城武說:
  23. 23. Technical Approach to Responsive Web Design 25 960 1,286 1,701 1,953kb End of 2011 End of 2012 End of 2013 End of 2014 網路終端速度越快,相同時間能下載的量便⼤大 單⽉月平均網站下載⼤大⼩小 HTTP Archive Report http://httparchive.org/trends.php 三年內網站的下載內容已經成⻑⾧長了⼀一倍
  24. 24. Technical Approach to Responsive Web Design 26 End of 2014 280 560 840 1120 1400 HTML CSS Flash JS Images Other 1,243 295 圖⽚片與指令稿 佔了網站內容的⼤大部份 Images: 63.65% JavaScript: 15.10% http://www.sitepoint.com/average-page-weight-increases-15-2014/
  25. 25. Technical Approach to Responsive Web Design 27 80/20 法則 處理好圖⽚片與 JS 的問題,便能夠解決⼤大部份的下載效能
  26. 26. Technical Approach to Responsive Web Design 28 技術性四⼤大要素 資源⼀一致性 媒體、樣式表具⼀一致性, 避免重⼯工 媒體相容性 區隔圖⽚片讀取時機, 主動提供正確資料 環境狀態感知 掌握使⽤用環境,如裝置⼤大⼩小, 網路環境 ⾼高品質內容 權衡品質與速度, 提供最適合的使⽤用經驗
  27. 27. Technical Approach to Responsive Web Design 29 資源⼀一致性
  28. 28. Technical Approach to Responsive Web Design 30 乾坤⼤大挪移 違背 RWD ⾃自然流動佈局 PM: Can We Move the Block? It’s easy, isn’t it!
  29. 29. Technical Approach to Responsive Web Design 32 乾坤⼤大挪移
  30. 30. Technical Approach to Responsive Web Design 33 乾坤⼤大挪移
  31. 31. Technical Approach to Responsive Web Design 34
  32. 32. Technical Approach to Responsive Web Design 35
  33. 33. Technical Approach to Responsive Web Design 36 • ⽤用 javascript 對調? • show(); hide(); ? • css? 乾坤⼤大挪移
  34. 34. Technical Approach to Responsive Web Design 37 乾坤⼤大挪移
  35. 35. Technical Approach to Responsive Web Design 38 .desktop-only{} .mobile-only{} 乾坤⼤大挪移
  36. 36. Technical Approach to Responsive Web Design 39 這樣就沒有問題嗎? 重複的 HTML 重複的圖⽚片
  37. 37. Technical Approach to Responsive Web Design 40 1 + 1 > 2
  38. 38. Technical Approach to Responsive Web Design 41 置頂特⾊色⽂文章,所有分⾴頁皆顯⽰示 其餘每⼀一分⾴頁 8 篇⽂文章
  39. 39. Technical Approach to Responsive Web Design 42 置頂特⾊色⽂文章 每⼀一分⾴頁 20 篇⽂文章,含特⾊色⽂文章
  40. 40. Technical Approach to Responsive Web Design 43
  41. 41. Technical Approach to Responsive Web Design 44
  42. 42. Technical Approach to Responsive Web Design 45
  43. 43. Technical Approach to Responsive Web Design 46
  44. 44. Technical Approach to Responsive Web Design 47
  45. 45. Technical Approach to Responsive Web Design 48 更多的 HTML 更多及重複的圖⽚片 這樣就沒有問題嗎?
  46. 46. Technical Approach to Responsive Web Design 49 資源⼀一致性
  47. 47. Technical Approach to Responsive Web Design 50 影分⾝身之術
  48. 48. Technical Approach to Responsive Web Design 51 有幾個視窗?
  49. 49. Technical Approach to Responsive Web Design 52
  50. 50. Technical Approach to Responsive Web Design 53 資源⼀一致性 { { .desktop-only .mobile-only
  51. 51. Technical Approach to Responsive Web Design 54 媒體相容性
  52. 52. Technical Approach to Responsive Web Design 55 Desktop Tablet Mobile RWD Responsive Web Design
  53. 53. Technical Approach to Responsive Web Design 56 picturefill A responsive image polyfill
  54. 54. Technical Approach to Responsive Web Design 57 picturefill A responsive image polyfill <!-­‐-­‐  Picturefill  markup  v1.2.1  —>   <span  data-­‐picturefill  data-­‐alt="A  beautiful  responsive  image">      <span  data-­‐src="large-­‐2.jpg?w=480"/>      <span  data-­‐src="large-­‐2.jpg?w=512"  data-­‐media="(min-­‐width:  481px)"/>      <span  data-­‐src="large-­‐2.jpg?w=720"  data-­‐media="(min-­‐width:  1025px)"/>      <span  data-­‐src="large-­‐2.jpg?w=960"  data-­‐media="(min-­‐width:  1441px)”/>      <noscript>          <img  data-­‐src="large-­‐2.jpg?w=1440"  alt="A  beautiful  responsive  image"/>      </noscript>   </span>
  55. 55. Technical Approach to Responsive Web Design 58 what is <picture> element HTML5 Living Standard <picture>      <source  media="(min-­‐width:  40em)"          srcset="big.jpg  1x,  big-­‐hd.jpg  2x">      <source            srcset="small.jpg  1x,  small-­‐hd.jpg  2x">      <img  src="fallback.jpg"  alt="">   </picture> 條件 倍率 未符合條件時的預設值
  56. 56. Technical Approach to Responsive Web Design 59 what is <img> element HTML5 Living Standard <img  src="small.jpg"            srcset="large.jpg  1024w,  medium.jpg  640w,  small.jpg  320w"            sizes="(min-­‐width:  36em)  33.3vw,  100vw"            alt="A  rad  wolf"> Example: ⺫⽬目前寬度等於 30em 則顯⽰示圖⽚片寬度為 100vw 使⽤用 small.jpg 1x (320w / 320px) 或 medium.jpg 2x (640w / 320px) 條件 倍率 未符合條件時的預設值 顯⽰示寬度
  57. 57. Technical Approach to Responsive Web Design 60 *_desktop.jpg only screen and (min-width:769px) *_landscape.jpg only screen and (min-width:415px) *_portrait.jpg fallback
  58. 58. Technical Approach to Responsive Web Design 61 <picture>      <source  media="(min-­‐width:  769px)"          srcset="desktop.jpg  1x,  desktop-­‐hd.jpg  2x”>      <source  media="(min-­‐width:  415px)"          srcset="landscape.jpg  1x,  landscape-­‐hd.jpg  2x”>      <img  srcset=“portrait.jpg  1x,  portrait-­‐hd.jpg  2x”>   </picture> RECAP think about the case
  59. 59. Technical Approach to Responsive Web Design 62 RECAP think about the case *_large.jpg *_medium.jpg — only screen and (min-width:769px) only screen and (max-width:414px) only screen and (min-width:415px)
  60. 60. Technical Approach to Responsive Web Design 63 <picture>      <source  media="(max-­‐width:  414px)"          srcset="medium.jpg  1x,  medium-­‐hd.jpg  2x">        <img  srcset=“blank.gif">   </picture> data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 RECAP think about the case
  61. 61. Technical Approach to Responsive Web Design 64 <picture>      <source  media="(min-­‐width:  415px)"          srcset="large.jpg  1x,  large-­‐hd.jpg  2x">        <img  srcset=“blank.gif">   </picture> data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 RECAP think about the case
  62. 62. Technical Approach to Responsive Web Design 65 Alternative responsive media SVG 適合插圖、Infographic 類型資 料使⽤用,可透過 CSS 達成動態 及互動。 可帶⼀一張,或是⼀一系列的圖。 Icon Font 適合網站單⾊色⼩小圖⽰示使⽤用,可 透過 CSS 修改 ICON ⾊色彩。單 ⼀一檔案帶多個圖⽰示。 CSS3 Graphic 純 CSS 繪圖,難度較⾼高,可搭 配 CSS3 Animation 與 media queries 產⽣生⾼高互動的圖案。
  63. 63. Technical Approach to Responsive Web Design 66 環境狀態感知
  64. 64. Technical Approach to Responsive Web Design 67
  65. 65.
  66. 66. Technical Approach to Responsive Web Design 70 數位時代的地球是平的 但路仍不平坦 > 10Mbps 29% >1.5Mbps 27% < 1.5Mbps 44% < 1.5Mbps >1.5Mbps > 10Mbps GLOBAL MOBILE Download speed以 Ookla 經由 iOS 及 Android App 的使⽤用者所實測的 ⾏行動上網速度為參考資料 台灣本⽉月的平均下載速度為 24.25Mbps 排⾏行第七。 全世界超過 10Mbps 的國家不到 1/3, 將近 5 成的國家未達到 3G 網路的速度。 Top Twenty Country Ranking requires at least 100,000 unique IP addresses for a given country. Graph Period: Nov 7, 2012 - May 9, 2015
  67. 67. Technical Approach to Responsive Web Design 71
  68. 68. Technical Approach to Responsive Web Design 72 Network Information API 2011~2014 <img  id='pony'  alt="An  image  showing  a  pony"  title="My  precious!">   <script>      var  i  =  document.getElementById(‘pony');      if  (navigator.connection.bandwidth  >  2)  {  //  greater  then  2MB/s          i.src  =  "http://example.com/pony_hd.png";      }  else  {          i.src  =  "http://example.com/pony_ld.png";      }      if  (navigator.connection.type  >  wifi  ||  navigator.connection.type  >  4g)  {          i.src  =  "http://example.com/pony_hd.png";      }  else  {          i.src  =  "http://example.com/pony_ld.png";      }   </script>
  69. 69. Technical Approach to Responsive Web Design 73 Device API 2010~2015 Network Information API —> System Information API —> ?
  70. 70. Technical Approach to Responsive Web Design 74
  71. 71. Technical Approach to Responsive Web Design 75 • Vibration API • Battery Status API • Media Capture & Streams • http://mobilehtml5.org HTML 5 + Device API 開網⾴頁就可以震動?!
  72. 72. Technical Approach to Responsive Web Design 76 Loading Widgets trigger by device width or user-agent 在需要的時候才載⼊入內容
  73. 73. Technical Approach to Responsive Web Design 77 LazyLoad
  74. 74. Technical Approach to Responsive Web Design 78 Loading Widgets trigger by device width or user-agent 當需要⾏行動版網⾴頁的時候才需要⾏行動選單 var  trigger_size  =  settings.media_size  ||  768;     $(window).resize(function(){      var  windowWidth  =  document.documentElement.clientWidth  ||  document.body.clientWidth;                                                                                                                                                                                            if  (  windowWidth  <=  trigger_size)  {     //run  scripts  here   $(“#menu”).mobileMenu();      }   });
  75. 75. Technical Approach to Responsive Web Design 79 Loading iframe trigger by device width or user-agent 當 RWD 遇上 iframe • mobile 使⽤用的 iframe 內容與 desktop 有所不同 • 每個 iframe 的 connection 都是各⾃自獨⽴立的
  76. 76. Technical Approach to Responsive Web Design 80 影分⾝身之術
  77. 77. Technical Approach to Responsive Web Design 81 var iFrameLazy = function (viewMode) { var iframes = viewMode.find('iframe'); jQuery.each(iframes, function (index, item) { item.src = item.dataset.src; }); }; Loading iframe trigger by device width or user-agent
  78. 78. Technical Approach to Responsive Web Design 82 ⾼高品質內容
  79. 79. Technical Approach to Responsive Web Design 83 High-Res / Retina Display 在 RWD 網站,你需要多少不同解析度的圖⽚片?
  80. 80. Technical Approach to Responsive Web Design 84 iPhone 6 + 2x 或以上的圖⽚片倍率 High-Res Display 2x < iPhone 6/iPad 1.5x ~2x 的圖⽚片倍率 3x
  81. 81. Technical Approach to Responsive Web Design 85 要⽤用到多少種尺⼨寸的圖⽚片才夠?
  82. 82. Technical Approach to Responsive Web Design 86 1x 2x 3x Desktop 482x290 964x580 — Tablet Portrait <= 768px 369x222 738x444 — Mobile Landscape <= 568px 482x290 738x444 964x580 Mobile Portrait <= 375px 369x222 738x444 964x580 1 2 3 4 1.5x 2x
  83. 83. Technical Approach to Responsive Web Design 87 Wide / Desktop > 769px 1x 2x Tablet section 1 569~768px Tablet section 2 / Mobile portrait 569~768px Mobile Landscape 320~414px 1x 2x 1x 2x 1x 2x
  84. 84. Technical Approach to Responsive Web Design 88 Designer: Noooooooooo…..
  85. 85. Technical Approach to Responsive Web Design 89 PNG: pngquant, AdvDef JPG: jpegoptim, jpegtran 多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置 With Drupal
  86. 86. Technical Approach to Responsive Web Design 90 處理解析不⾜足的照⽚片
  87. 87. Technical Approach to Responsive Web Design 91 High-Res DisplayLow-Res Display
  88. 88. Technical Approach to Responsive Web Design 92 Image Low High High-Res Display
  89. 89. Technical Approach to Responsive Web Design 93 Image Low Resample High-Res Display
  90. 90. Technical Approach to Responsive Web Design 94 原圖 放⼤大後
  91. 91. Technical Approach to Responsive Web Design 95 • 趨勢告訴我們 RWD 是絕⼤大多數開發與設計者要⾯面臨的問題 • 要做好 RWD 網站並不只是做好流動佈局 • 妥善處理圖⽚片問題,可有效解決網站負擔 • 也為網路基礎建設仍不⾜足的地⽅方做 RWD • 掌握四⼤大要素: 資源⼀一致、媒體相容、環境感知、⾼高品質內容 RECAP
  92. 92. Technical Approach to Responsive Web Design 96 Responsive Responsible 為什麼⽽而做? 為裝置? 為誰⽽而做? 為客⼾戶? 為⽼老闆?
  93. 93. Technical Approach to Responsive Web Design 97 WORK HARD ON RWD fb.me/amourow   @amourow

×