1.
Technical Approach to Responsive Web Design 1
Chris Wu
Technical Approaches to RWD
從技術⾓角度看 Responsive Web Design

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

3.
Mobile Experience

4.
Technical Approach to Responsive Web Design 6
RWD 開發的挑戰
⾏行動裝置尺⼨寸
開發複雜度提⾼高1
瀏覽速度
使⽤用者體驗2
提⾼高內容品質
速度卻不能降低3
使⽤用者看到的網⾴頁成果，
底下卻有許多察覺不到的開發⽢甘苦

5.
Technical Approach to Responsive Web Design 7
Operating Systems
youngdesigner.rocks

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.
Technical Approach to Responsive Web Design 9
現今技術

8.
Technical Approach to Responsive Web Design 10
嗨！可以看看你的網站嗎？
好啊！
可以讓我知道你的裝置類型嗎？
我是 iPad mini 上的 Safari
OK，提供你適合的樣式跟程式
AWD
Adaptive Web Design

9.
Technical Approach to Responsive Web Design 11
嗨！來看看 modernweb.tw 網站！
好啊！
可以讓我知道你的螢幕多⼤大嗎？
我的畫⾯面寬度是 768 px
OK，那你⽤用平板的樣式瀏覽網站
Tablet
RWD
Responsive Web Design
Desktop Mobile

10.
Technical Approach to Responsive Web Design 12
Desktop
Tablet
Mobile
RWD
Responsive Web Design

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.
Technical Approach to Responsive Web Design 14
RWD
Responsive Web Design
失敗！

13.
Technical Approach to Responsive Web Design 15
完美！
成功！

14.
Technical Approach to Responsive Web Design 16

15.
Technical Approach to Responsive Web Design 17
width: 100%

16.
Technical Approach to Responsive Web Design 18
曾經，網站開發還滿簡單的......

17.
Technical Approach to Responsive Web Design 19

18.
Technical Approach to Responsive Web Design 20

19.
Technical Approach to Responsive Web Design 21
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置

20.
Technical Approach to Responsive Web Design 22
http://www.guimp.com

21.
Technical Approach to Responsive Web Design 23
更多實務上的問題
無法遵循流動佈局
合併或拆分元件
當RWD 遇到 iframe
Retina 的圖⽚片品質
CSS/JS 相容與穩定性問題

22.
Technical Approach to Responsive Web Design 24
世
界
越
快
站
則
大
⾦金城武說：

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.
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.
Technical Approach to Responsive Web Design 27
80/20 法則
處理好圖⽚片與 JS 的問題，便能夠解決⼤大部份的下載效能

26.
Technical Approach to Responsive Web Design 28
技術性四⼤大要素
資源⼀一致性
媒體、樣式表具⼀一致性，
避免重⼯工
媒體相容性
區隔圖⽚片讀取時機，
主動提供正確資料
環境狀態感知
掌握使⽤用環境，如裝置⼤大⼩小，
網路環境
⾼高品質內容
權衡品質與速度，
提供最適合的使⽤用經驗

27.
Technical Approach to Responsive Web Design 29
資源⼀一致性

28.
Technical Approach to Responsive Web Design 30
乾坤⼤大挪移
違背 RWD ⾃自然流動佈局
PM: Can We Move the Block?
It’s easy, isn’t it!

29.
Technical Approach to Responsive Web Design 32
乾坤⼤大挪移

30.
Technical Approach to Responsive Web Design 33
乾坤⼤大挪移

31.
Technical Approach to Responsive Web Design 34

32.
Technical Approach to Responsive Web Design 35

33.
Technical Approach to Responsive Web Design 36
• ⽤用 javascript 對調？
• show(); hide(); ?
• css?
乾坤⼤大挪移

34.
Technical Approach to Responsive Web Design 37
乾坤⼤大挪移

35.
Technical Approach to Responsive Web Design 38
.desktop-only{}
.mobile-only{}
乾坤⼤大挪移

36.
Technical Approach to Responsive Web Design 39
這樣就沒有問題嗎？
重複的 HTML
重複的圖⽚片

37.
Technical Approach to Responsive Web Design 40
1 + 1 > 2

38.
Technical Approach to Responsive Web Design 41
置頂特⾊色⽂文章，所有分⾴頁皆顯⽰示
其餘每⼀一分⾴頁 8 篇⽂文章

39.
Technical Approach to Responsive Web Design 42
置頂特⾊色⽂文章
每⼀一分⾴頁 20 篇⽂文章，含特⾊色⽂文章

40.
Technical Approach to Responsive Web Design 43

41.
Technical Approach to Responsive Web Design 44

42.
Technical Approach to Responsive Web Design 45

43.
Technical Approach to Responsive Web Design 46

44.
Technical Approach to Responsive Web Design 47

45.
Technical Approach to Responsive Web Design 48
更多的 HTML
更多及重複的圖⽚片
這樣就沒有問題嗎？

46.
Technical Approach to Responsive Web Design 49
資源⼀一致性

47.
Technical Approach to Responsive Web Design 50
影分⾝身之術

48.
Technical Approach to Responsive Web Design 51
有幾個視窗？

49.
Technical Approach to Responsive Web Design 52

50.
Technical Approach to Responsive Web Design 53
資源⼀一致性
{
{
.desktop-only
.mobile-only

51.
Technical Approach to Responsive Web Design 54
媒體相容性

52.
Technical Approach to Responsive Web Design 55
Desktop
Tablet
Mobile
RWD
Responsive Web Design

53.
Technical Approach to Responsive Web Design 56
picturefill
A responsive image polyfill

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.
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.
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.
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.
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.
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.
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.
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.
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.
Technical Approach to Responsive Web Design 66
環境狀態感知

64.
Technical Approach to Responsive Web Design 67

65.
所

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.
Technical Approach to Responsive Web Design 71

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.
Technical Approach to Responsive Web Design 73
Device API
2010~2015
Network Information API —> System Information API —> ?

70.
Technical Approach to Responsive Web Design 74

71.
Technical Approach to Responsive Web Design 75
• Vibration API
• Battery Status API
• Media Capture & Streams
• http://mobilehtml5.org
HTML 5 ＋ Device API
開網⾴頁就可以震動?!

72.
Technical Approach to Responsive Web Design 76
Loading Widgets
trigger by device width or user-agent
在需要的時候才載⼊入內容

73.
Technical Approach to Responsive Web Design 77
LazyLoad

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.
Technical Approach to Responsive Web Design 79
Loading iframe
trigger by device width or user-agent
當 RWD 遇上 iframe
• mobile 使⽤用的 iframe 內容與 desktop 有所不同
• 每個 iframe 的 connection 都是各⾃自獨⽴立的

76.
Technical Approach to Responsive Web Design 80
影分⾝身之術

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.
Technical Approach to Responsive Web Design 82
⾼高品質內容

79.
Technical Approach to Responsive Web Design 83
High-Res / Retina Display
在 RWD 網站，你需要多少不同解析度的圖⽚片？

80.
Technical Approach to Responsive Web Design 84
iPhone 6 +
2x 或以上的圖⽚片倍率
High-Res Display
2x
< iPhone 6/iPad
1.5x ~2x 的圖⽚片倍率 3x

81.
Technical Approach to Responsive Web Design 85
要⽤用到多少種尺⼨寸的圖⽚片才夠？

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.
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.
Technical Approach to Responsive Web Design 88
Designer:
Noooooooooo…..

85.
Technical Approach to Responsive Web Design 89
PNG: pngquant, AdvDef
JPG: jpegoptim, jpegtran
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
With Drupal

86.
Technical Approach to Responsive Web Design 90
處理解析不⾜足的照⽚片

87.
Technical Approach to Responsive Web Design 91
High-Res DisplayLow-Res Display

88.
Technical Approach to Responsive Web Design 92
Image
Low
High
High-Res Display

89.
Technical Approach to Responsive Web Design 93
Image
Low
Resample
High-Res Display

90.
Technical Approach to Responsive Web Design 94
原圖 放⼤大後

91.
Technical Approach to Responsive Web Design 95
• 趨勢告訴我們 RWD 是絕⼤大多數開發與設計者要⾯面臨的問題
• 要做好 RWD 網站並不只是做好流動佈局
• 妥善處理圖⽚片問題，可有效解決網站負擔
• 也為網路基礎建設仍不⾜足的地⽅方做 RWD
• 掌握四⼤大要素：
資源⼀一致、媒體相容、環境感知、⾼高品質內容
RECAP

92.
Technical Approach to Responsive Web Design 96
Responsive Responsible
為什麼⽽而做？
為裝置？
為誰⽽而做？
為客⼾戶？
為⽼老闆？

93.
Technical Approach to Responsive Web Design 97
WORK HARD
ON RWD
fb.me/amourow
@amourow