SlideShare a Scribd company logo
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 expanding the use of mobile-friendliness as a
ranking signal.
FEB. 26
2015
Google announced two
important changes about
mobile-friendly content.
Technical Approach to Responsive Web Design 9
現今技術
Technical Approach to Responsive Web Design 10
嗨!可以看看你的網站嗎?
好啊!

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

可以讓我知道你的螢幕多⼤大嗎?
我的畫⾯面寬度是 768 px
OK,那你⽤用平板的樣式瀏覽網站
Tablet
RWD
Responsive Web Design
Desktop Mobile
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 Design with Server Side Components
Tablet
Portrait
Tablet
Landscape
Mobile
我的畫⾯面寬度是 768 px
OK,這些是你需要的檔案 Mobile
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
網路終端速度越快,相同時間能下載的量便⼤大
單⽉月平均網站下載⼤大⼩小
HTTP Archive Report
http://httparchive.org/trends.php
三年內網站的下載內容已經成⻑⾧長了⼀一倍
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/
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	
  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>
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>
條件
倍率
未符合條件時的預設值
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)

條件
倍率
未符合條件時的預設值
顯⽰示寬度
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
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
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)
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
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
Technical Approach to Responsive Web Design 65
Alternative
responsive media
SVG
適合插圖、Infographic 類型資
料使⽤用,可透過 CSS 達成動態
及互動。
可帶⼀一張,或是⼀一系列的圖。
Icon Font
適合網站單⾊色⼩小圖⽰示使⽤用,可
透過 CSS 修改 ICON ⾊色彩。單
⼀一檔案帶多個圖⽰示。
CSS3 Graphic
純 CSS 繪圖,難度較⾼高,可搭
配 CSS3 Animation 與 media
queries 產⽣生⾼高互動的圖案。
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.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
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	
  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>
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://mobilehtml5.org
HTML 5 + Device API
開網⾴頁就可以震動?!
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
當需要⾏行動版網⾴頁的時候才需要⾏行動選單
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();	
  
	
  	
  }	
  
});
Technical Approach to Responsive Web Design 79
Loading iframe
trigger by device width or user-agent
當 RWD 遇上 iframe
• mobile 使⽤用的 iframe 內容與 desktop 有所不同
• 每個 iframe 的 connection 都是各⾃自獨⽴立的
Technical Approach to Responsive Web Design 80
影分⾝身之術
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
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 的圖⽚片倍率 3x
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 —
Mobile Landscape
<= 568px 482x290 738x444 964x580
Mobile Portrait
<= 375px 369x222 738x444 964x580
1 2
3 4
1.5x 2x
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
Technical Approach to Responsive Web Design 88
Designer:
Noooooooooo…..
Technical Approach to Responsive Web Design 89
PNG: pngquant, AdvDef
JPG: jpegoptim, jpegtran
多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
With Drupal
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 網站並不只是做好流動佈局
• 妥善處理圖⽚片問題,可有效解決網站負擔
• 也為網路基礎建設仍不⾜足的地⽅方做 RWD
• 掌握四⼤大要素:
資源⼀一致、媒體相容、環境感知、⾼高品質內容
RECAP
Technical Approach to Responsive Web Design 96
Responsive Responsible
為什麼⽽而做?
為裝置?
為誰⽽而做?
為客⼾戶?
為⽼老闆?
Technical Approach to Responsive Web Design 97
WORK HARD

ON RWD
fb.me/amourow	
  
@amourow

More Related Content

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

Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
Sven Wolfermann
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
Larson Software Technology
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
David Manock
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
 
Js il.com
Js il.comJs il.com
Js il.com
Eyal Vardi
 
Design responsively
Design responsivelyDesign responsively
Design responsively
Célia Leocádio
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
NAVER D2
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
Eli McMakin
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
David Amend
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
Aidan Foster
 
Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016
Christian Deger
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
What is Next js.pdf
What is Next js.pdfWhat is Next js.pdf
What is Next js.pdf
nikhilsuman11
 
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Pedro Marques
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
Advancio
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
meghantaylor
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
Ravi Panchal
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Gopinath Ambothi
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media Query
Neev Technologies
 

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

Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Js il.com
Js il.comJs il.com
Js il.com
 
Design responsively
Design responsivelyDesign responsively
Design responsively
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
What is Next js.pdf
What is Next js.pdfWhat is Next js.pdf
What is Next js.pdf
 
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media Query
 

More from Chris Wu

Effective Designer - 有效率的設計師
Effective Designer - 有效率的設計師Effective Designer - 有效率的設計師
Effective Designer - 有效率的設計師
Chris Wu
 
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
Chris Wu
 
MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)
Chris Wu
 
Drupal 8 版型開發變革
Drupal 8 版型開發變革Drupal 8 版型開發變革
Drupal 8 版型開發變革
Chris Wu
 
Responsive design on drupal
Responsive design on drupalResponsive design on drupal
Responsive design on drupal
Chris Wu
 
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 DrupalI use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
Chris Wu
 
那些年,我們一起搞的金流
那些年,我們一起搞的金流那些年,我們一起搞的金流
那些年,我們一起搞的金流
Chris Wu
 
DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介Chris Wu
 
Drupalcamp Taipei 2012 說明會
Drupalcamp Taipei 2012 說明會Drupalcamp Taipei 2012 說明會
Drupalcamp Taipei 2012 說明會
Chris Wu
 
Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Chris Wu
 

More from Chris Wu (10)

Effective Designer - 有效率的設計師
Effective Designer - 有效率的設計師Effective Designer - 有效率的設計師
Effective Designer - 有效率的設計師
 
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...
 
MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)MRT Express 極速北捷(UI/UX Designers' Night)
MRT Express 極速北捷(UI/UX Designers' Night)
 
Drupal 8 版型開發變革
Drupal 8 版型開發變革Drupal 8 版型開發變革
Drupal 8 版型開發變革
 
Responsive design on drupal
Responsive design on drupalResponsive design on drupal
Responsive design on drupal
 
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 DrupalI use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
 
那些年,我們一起搞的金流
那些年,我們一起搞的金流那些年,我們一起搞的金流
那些年,我們一起搞的金流
 
DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介DrupalTaiwan.org 社群簡介
DrupalTaiwan.org 社群簡介
 
Drupalcamp Taipei 2012 說明會
Drupalcamp Taipei 2012 說明會Drupalcamp Taipei 2012 說明會
Drupalcamp Taipei 2012 說明會
 
Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式
 

Recently uploaded

Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 

Recently uploaded (20)

Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Artificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic WarfareArtificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic Warfare
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 

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

  • 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 偵測螢幕尺⼨寸,
 便能提供適合不同尺⼨寸裝置的內容與樣式。
  • 4.
  • 5.
  • 6. Technical Approach to Responsive Web Design 6 RWD 開發的挑戰 ⾏行動裝置尺⼨寸 開發複雜度提⾼高1 瀏覽速度 使⽤用者體驗2 提⾼高內容品質 速度卻不能降低3 使⽤用者看到的網⾴頁成果, 底下卻有許多察覺不到的開發⽢甘苦
  • 7. Technical Approach to Responsive Web Design 7 Operating Systems youngdesigner.rocks
  • 8. 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.
  • 9. Technical Approach to Responsive Web Design 9 現今技術
  • 10. Technical Approach to Responsive Web Design 10 嗨!可以看看你的網站嗎? 好啊!
 可以讓我知道你的裝置類型嗎? 我是 iPad mini 上的 Safari OK,提供你適合的樣式跟程式 AWD Adaptive Web Design
  • 11. Technical Approach to Responsive Web Design 11 嗨!來看看 modernweb.tw 網站! 好啊!
 可以讓我知道你的螢幕多⼤大嗎? 我的畫⾯面寬度是 768 px OK,那你⽤用平板的樣式瀏覽網站 Tablet RWD Responsive Web Design Desktop Mobile
  • 12. Technical Approach to Responsive Web Design 12 Desktop Tablet Mobile RWD Responsive Web Design
  • 13. 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
  • 14. Technical Approach to Responsive Web Design 14 RWD Responsive Web Design 失敗!
  • 15. Technical Approach to Responsive Web Design 15 完美! 成功!
  • 16. Technical Approach to Responsive Web Design 16
  • 17. Technical Approach to Responsive Web Design 17 width: 100%
  • 18. Technical Approach to Responsive Web Design 18 曾經,網站開發還滿簡單的......
  • 19. Technical Approach to Responsive Web Design 19
  • 20. Technical Approach to Responsive Web Design 20
  • 21. Technical Approach to Responsive Web Design 21 多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置
  • 22. Technical Approach to Responsive Web Design 22 http://www.guimp.com
  • 23. Technical Approach to Responsive Web Design 23 更多實務上的問題 無法遵循流動佈局 合併或拆分元件 當RWD 遇到 iframe Retina 的圖⽚片品質 CSS/JS 相容與穩定性問題
  • 24. Technical Approach to Responsive Web Design 24 世 界 越 快 站 則 大 ⾦金城武說:
  • 25. 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 三年內網站的下載內容已經成⻑⾧長了⼀一倍
  • 26. 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/
  • 27. Technical Approach to Responsive Web Design 27 80/20 法則 處理好圖⽚片與 JS 的問題,便能夠解決⼤大部份的下載效能
  • 28. Technical Approach to Responsive Web Design 28 技術性四⼤大要素 資源⼀一致性 媒體、樣式表具⼀一致性, 避免重⼯工 媒體相容性 區隔圖⽚片讀取時機, 主動提供正確資料 環境狀態感知 掌握使⽤用環境,如裝置⼤大⼩小, 網路環境 ⾼高品質內容 權衡品質與速度, 提供最適合的使⽤用經驗
  • 29. Technical Approach to Responsive Web Design 29 資源⼀一致性
  • 30. Technical Approach to Responsive Web Design 30 乾坤⼤大挪移 違背 RWD ⾃自然流動佈局 PM: Can We Move the Block? It’s easy, isn’t it!
  • 31.
  • 32. Technical Approach to Responsive Web Design 32 乾坤⼤大挪移
  • 33. Technical Approach to Responsive Web Design 33 乾坤⼤大挪移
  • 34. Technical Approach to Responsive Web Design 34
  • 35. Technical Approach to Responsive Web Design 35
  • 36. Technical Approach to Responsive Web Design 36 • ⽤用 javascript 對調? • show(); hide(); ? • css? 乾坤⼤大挪移
  • 37. Technical Approach to Responsive Web Design 37 乾坤⼤大挪移
  • 38. Technical Approach to Responsive Web Design 38 .desktop-only{} .mobile-only{} 乾坤⼤大挪移
  • 39. Technical Approach to Responsive Web Design 39 這樣就沒有問題嗎? 重複的 HTML 重複的圖⽚片
  • 40. Technical Approach to Responsive Web Design 40 1 + 1 > 2
  • 41. Technical Approach to Responsive Web Design 41 置頂特⾊色⽂文章,所有分⾴頁皆顯⽰示 其餘每⼀一分⾴頁 8 篇⽂文章
  • 42. Technical Approach to Responsive Web Design 42 置頂特⾊色⽂文章 每⼀一分⾴頁 20 篇⽂文章,含特⾊色⽂文章
  • 43. Technical Approach to Responsive Web Design 43
  • 44. Technical Approach to Responsive Web Design 44
  • 45. Technical Approach to Responsive Web Design 45
  • 46. Technical Approach to Responsive Web Design 46
  • 47. Technical Approach to Responsive Web Design 47
  • 48. Technical Approach to Responsive Web Design 48 更多的 HTML 更多及重複的圖⽚片 這樣就沒有問題嗎?
  • 49. Technical Approach to Responsive Web Design 49 資源⼀一致性
  • 50. Technical Approach to Responsive Web Design 50 影分⾝身之術
  • 51. Technical Approach to Responsive Web Design 51 有幾個視窗?
  • 52. Technical Approach to Responsive Web Design 52
  • 53. Technical Approach to Responsive Web Design 53 資源⼀一致性 { { .desktop-only .mobile-only
  • 54. Technical Approach to Responsive Web Design 54 媒體相容性
  • 55. Technical Approach to Responsive Web Design 55 Desktop Tablet Mobile RWD Responsive Web Design
  • 56. Technical Approach to Responsive Web Design 56 picturefill A responsive image polyfill
  • 57. 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>
  • 58. 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> 條件 倍率 未符合條件時的預設值
  • 59. 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) 條件 倍率 未符合條件時的預設值 顯⽰示寬度
  • 60. 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
  • 61. 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
  • 62. 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)
  • 63. 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
  • 64. 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
  • 65. Technical Approach to Responsive Web Design 65 Alternative responsive media SVG 適合插圖、Infographic 類型資 料使⽤用,可透過 CSS 達成動態 及互動。 可帶⼀一張,或是⼀一系列的圖。 Icon Font 適合網站單⾊色⼩小圖⽰示使⽤用,可 透過 CSS 修改 ICON ⾊色彩。單 ⼀一檔案帶多個圖⽰示。 CSS3 Graphic 純 CSS 繪圖,難度較⾼高,可搭 配 CSS3 Animation 與 media queries 產⽣生⾼高互動的圖案。
  • 66. Technical Approach to Responsive Web Design 66 環境狀態感知
  • 67. Technical Approach to Responsive Web Design 67
  • 68.
  • 69.
  • 70. 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
  • 71. Technical Approach to Responsive Web Design 71
  • 72. 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>
  • 73. Technical Approach to Responsive Web Design 73 Device API 2010~2015 Network Information API —> System Information API —> ?
  • 74. Technical Approach to Responsive Web Design 74
  • 75. Technical Approach to Responsive Web Design 75 • Vibration API • Battery Status API • Media Capture & Streams • http://mobilehtml5.org HTML 5 + Device API 開網⾴頁就可以震動?!
  • 76. Technical Approach to Responsive Web Design 76 Loading Widgets trigger by device width or user-agent 在需要的時候才載⼊入內容
  • 77. Technical Approach to Responsive Web Design 77 LazyLoad
  • 78. 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();      }   });
  • 79. Technical Approach to Responsive Web Design 79 Loading iframe trigger by device width or user-agent 當 RWD 遇上 iframe • mobile 使⽤用的 iframe 內容與 desktop 有所不同 • 每個 iframe 的 connection 都是各⾃自獨⽴立的
  • 80. Technical Approach to Responsive Web Design 80 影分⾝身之術
  • 81. 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
  • 82. Technical Approach to Responsive Web Design 82 ⾼高品質內容
  • 83. Technical Approach to Responsive Web Design 83 High-Res / Retina Display 在 RWD 網站,你需要多少不同解析度的圖⽚片?
  • 84. Technical Approach to Responsive Web Design 84 iPhone 6 + 2x 或以上的圖⽚片倍率 High-Res Display 2x < iPhone 6/iPad 1.5x ~2x 的圖⽚片倍率 3x
  • 85. Technical Approach to Responsive Web Design 85 要⽤用到多少種尺⼨寸的圖⽚片才夠?
  • 86. 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
  • 87. 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
  • 88. Technical Approach to Responsive Web Design 88 Designer: Noooooooooo…..
  • 89. Technical Approach to Responsive Web Design 89 PNG: pngquant, AdvDef JPG: jpegoptim, jpegtran 多種尺⼨寸圖⽚片 x 多種尺⼨寸裝置 With Drupal
  • 90. Technical Approach to Responsive Web Design 90 處理解析不⾜足的照⽚片
  • 91. Technical Approach to Responsive Web Design 91 High-Res DisplayLow-Res Display
  • 92. Technical Approach to Responsive Web Design 92 Image Low High High-Res Display
  • 93. Technical Approach to Responsive Web Design 93 Image Low Resample High-Res Display
  • 94. Technical Approach to Responsive Web Design 94 原圖 放⼤大後
  • 95. Technical Approach to Responsive Web Design 95 • 趨勢告訴我們 RWD 是絕⼤大多數開發與設計者要⾯面臨的問題 • 要做好 RWD 網站並不只是做好流動佈局 • 妥善處理圖⽚片問題,可有效解決網站負擔 • 也為網路基礎建設仍不⾜足的地⽅方做 RWD • 掌握四⼤大要素: 資源⼀一致、媒體相容、環境感知、⾼高品質內容 RECAP
  • 96. Technical Approach to Responsive Web Design 96 Responsive Responsible 為什麼⽽而做? 為裝置? 為誰⽽而做? 為客⼾戶? 為⽼老闆?
  • 97. Technical Approach to Responsive Web Design 97 WORK HARD ON RWD fb.me/amourow   @amourow