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

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

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

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

Operating Systems
youngdesigner.rocks

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.

現今技術

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

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

Desktop
Tablet
Mobile
RWD

嗨！可以看看你的網站嗎？
好啊！ 
可以讓我知道你的裝置類型嗎？
我是 iPad mini 上的 Safari
RESS
Responsive Web Design with Server Side Components
Tablet
Portrait
Tablet
Landscape
Mobile
我的畫⾯面寬度是 768 px
OK，這些是你需要的檔案 Mobile

RWD
失敗！

完美！
成功！

width: 100%

曾經，網站開發還滿簡單的......

多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置

http://www.guimp.com

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

世
界
越
快
站
則
大
⾦金城武說：

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
三年內網站的下載內容已經成⻑⾧長了⼀一倍

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/

80/20 法則
處理好圖⽚片與 JS 的問題，便能夠解決⼤大部份的下載效能

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

資源⼀一致性

乾坤⼤大挪移
違背 RWD ⾃自然流動佈局
PM: Can We Move the Block?
It’s easy, isn’t it!

乾坤⼤大挪移

• ⽤用 javascript 對調？
• show(); hide(); ?
• css?
乾坤⼤大挪移

乾坤⼤大挪移

.desktop-only{}
.mobile-only{}
乾坤⼤大挪移

這樣就沒有問題嗎？
重複的 HTML
重複的圖⽚片

1 + 1 > 2

置頂特⾊色⽂文章，所有分⾴頁皆顯⽰示
其餘每⼀一分⾴頁 8 篇⽂文章

置頂特⾊色⽂文章
每⼀一分⾴頁 20 篇⽂文章，含特⾊色⽂文章

更多的 HTML
更多及重複的圖⽚片
這樣就沒有問題嗎？

資源⼀一致性

影分⾝身之術

有幾個視窗？

資源⼀一致性
{
{
.desktop-only
.mobile-only

媒體相容性

Desktop
Tablet
Mobile
RWD

pictureﬁll
A responsive image polyﬁll

pictureﬁll
A responsive image polyﬁll
<!-‐-‐
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
1025px)"/>

<span
1441px)”/>

<noscript>

<img
alt="A
beautiful
responsive
image"/>

</noscript>

</span>

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>
條件
倍率
未符合條件時的預設值

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)

條件
倍率
未符合條件時的預設值
顯⽰示寬度

*_desktop.jpg
only screen and (min-width:769px)
*_landscape.jpg
only screen and (min-width:415px)
*_portrait.jpg
fallback

<picture>

<source
769px)"

srcset="desktop.jpg
1x,
desktop-‐hd.jpg
2x”>

<source
415px)"

srcset="landscape.jpg
1x,
landscape-‐hd.jpg
2x”>

<img
srcset=“portrait.jpg
1x,
portrait-‐hd.jpg
2x”>

</picture>
RECAP
think about the case

RECAP
*_large.jpg
*_medium.jpg
—
only screen
and
(min-width:769px)
only screen
and
(max-width:414px)
only screen
and
(min-width:415px)

<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

<picture>

<source
415px)"

srcset="large.jpg
1x,
large-‐hd.jpg
2x">

<img
srcset=“blank.gif">

</picture>
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///
yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
RECAP

Alternative
responsive media
SVG
適合插圖、Infographic 類型資
料使⽤用，可透過 CSS 達成動態
及互動。
可帶⼀一張，或是⼀一系列的圖。
Icon Font
適合網站單⾊色⼩小圖⽰示使⽤用，可
透過 CSS 修改 ICON ⾊色彩。單
⼀一檔案帶多個圖⽰示。
CSS3 Graphic
純 CSS 繪圖，難度較⾼高，可搭
配 CSS3 Animation 與 media
queries 產⽣生⾼高互動的圖案。

環境狀態感知

數位時代的地球是平的
但路仍不平坦 > 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

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>

Device API
2010~2015
Network Information API —> System Information API —> ?

• Vibration API
• Battery Status API
• Media Capture & Streams
• http://mobilehtml5.org
HTML 5 ＋ Device API
開網⾴頁就可以震動?!

Loading Widgets
trigger by device width or user-agent
在需要的時候才載⼊入內容

LazyLoad

Loading Widgets
當需要⾏行動版網⾴頁的時候才需要⾏行動選單
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();

}

});

Loading iframe
當 RWD 遇上 iframe
• mobile 使⽤用的 iframe 內容與 desktop 有所不同
• 每個 iframe 的 connection 都是各⾃自獨⽴立的

影分⾝身之術

var iFrameLazy = function (viewMode) {
var iframes = viewMode.find('iframe');
jQuery.each(iframes, function (index, item) {
item.src = item.dataset.src;
});
};
Loading iframe

⾼高品質內容

High-Res / Retina Display
在 RWD 網站，你需要多少不同解析度的圖⽚片？

iPhone 6 +
2x 或以上的圖⽚片倍率
High-Res Display
2x
< iPhone 6/iPad
1.5x ~2x 的圖⽚片倍率 3x

要⽤用到多少種尺⼨寸的圖⽚片才夠？

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

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

Designer:
Noooooooooo…..

PNG: pngquant, AdvDef
JPG: jpegoptim, jpegtran
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
With Drupal

處理解析不⾜足的照⽚片

High-Res DisplayLow-Res Display

Image
Low
High
High-Res Display

Image
Low
Resample
High-Res Display

原圖放⼤大後

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

Responsive Responsible
為什麼⽽而做？
為裝置？
為誰⽽而做？
為客⼾戶？
為⽼老闆？

WORK HARD

ON RWD
fb.me/amourow

@amourow

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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a 從技術角度看 RWD - Technical Approaches to RWD (20)

Más de Chris Wu

Más de Chris Wu (10)

Último

Último (20)

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