Slide 1
Slide 1 text
Responsive
Web Design
Win Wu
2016.5 weic.tw
background image source: https://www.pexels.com/photo/road-wet-rain-landscape-62464/
Slide 2
Slide 2 text
覍ૡ纷䒍薥縄Ӿጱ... Responsive Web
Design ?
ᴨ犋疰ಋ秚粚翕ᒊ?
অ猟肯藯አ Bootstrap 疰ݢ犥
ᮎইຎ౯藶֦䒻盜ጱ扖牧
ӥ因ݢ犥䒻౯ਥ翕硬౮ RWD 㻟?
ฎ狕硬 HTML / CSS 疰অԧ㻟?
Slide 3
Slide 3 text
䔶ᘏ౯๏牧Ӟ犥莯ԏ!
ұҝҝ
Slide 4
Slide 4 text
About Me
Win Wu 珂绊
Software Engineer
ࡅ稭፡ૡٍ䨗牧Ꮈ绗Ӟ犚碝ጱ Web 樄咳ದ蔩牧ૡ֢Ԇᥝ瑻媅ࣁ
70% 獮ᒒ樄咳 30% 盅ᒒ樄咳牐
Blog / Ӟ犚ଘ桅ፗ硼ದ蔩ፘ橕
Mail / yiyingwu.1990[at]gmail.com
HTML/CSS/JavaScript PHP Node.js
Slide 5
Slide 5 text
ٌ䋿 RWD ᥝ薹究ጱ㺔氂
盄墋㻌
౼瑽ᛔ Ӿ苉࿆㾴者翄 ਥ翕
Slide 6
Slide 6 text
RWD ጱ稲ݥ抓
800px / 960px /1024px
螂݄౯㮉磧ଉ憎ጱ蓦癷य़ੜ
Slide 7
Slide 7 text
ፗک...
2007 ଙ iPhone 㺔Ӯ牧౮傶 Web 戔懯ጱ旉矃讨牐
Slide 8
Slide 8 text
ฬ眻ಋ秚㺔Ӯ
虏य़疑樄তᘍ
ই֜虏翕ᒊ螀֢ࣁ蝡犚ಋഩय़ੜ膢ጱ蕕ᗝӤ
Slide 9
Slide 9 text
m 樄毣ጱৼ翕ऒ (m-dot) website ้妿窕ᤈ牐
/้҃妿窕ᤈጱ犋դ蔭匍ࣁ犋胼ֵአ蝡圵狶ဩ҃/
www.facebook.com m.facebook.com
翕ᒊ樄ত獤蕈
Slide 10
Slide 10 text
Device ᩼㬵᩼ग़
襎脲 / ಋ秚 / ଘ礂 / ฬ胼ಋ袓 / 襎憙
櫞螇ᥝᴻԧ m. ৼ翕ऒԏक़牧螭ᥝ tablet./ tv./ watch. ?
image source: apple.com, https://www.apple.com/support/assets/images/products/iphone/hero_iphone_6s_5se_2x.png
Slide 11
Slide 11 text
ݶ碻傶姘虁Ӟ犩
纷ୗ嘨ጱ౮᩼㬵᩼ṛ牐
Slide 12
Slide 12 text
https://responsivedesign.is/examples
https://responsivedesign.is/examples/blogs/trent-walton
౯㮉襑ᥝӞ圵
ݢ犥螕አय़蟂犩蓦癷疳ੑጱොဩ牐
Slide 13
Slide 13 text
Ethan Marcotter
ࣁ 2010 ଙෝ A List Apart ڊ
Responsive Web Design ጱ禊盢牐
瑽粙౼瑽ᛔ物 http://alistapart.com/article/responsive-web-design
Slide 14
Slide 14 text
What is RWD ?
ֵݶӞ㮆翕殷ݢ犥ࣁ犋ݶ Device Ӥݢ犥虏 User ᛥ螕
ጱ倵薩牧ᘒӬฎ Content First牐Ӭ哴ᰁ仂婘硯牧ଘ
ᑏ缛砺֢誢涢牐
ڥአ甿誢礚扇 (Media Query), 窕㵕ୗ蟴ᗝ(Fluid
Layout), 䕃ጱ瑽粙氥纈疳ੑ㬵蕣֢翕殷牧ֵ翕殷胼
䄪螕ݳࣁ犋ݶ蓦癷य़ੜӥ倵薩牐
ۑ胼Ӥጱਧ嬝
犥獮ᒒૡ纷䒍ጱ薫ଶ㬵፡
瑽粙౼瑽ᛔ物 http://mediaqueri.es/
Slide 15
Slide 15 text
Why RWD ?
虏ྯ圵蕕ᗝ胼氥纈ፘ䌘䛑螕ݳጱ粚ᶎ蟴ᗝ
斃ጱ姘虁౮
矾疨磧֯玕
Slide 16
Slide 16 text
Why RWD ?
虏ྯ圵蕕ᗝ胼氥纈ፘ䌘䛑螕ݳጱ粚ᶎ蟴ᗝ
犋抷አՋ讕蕕ᗝ薪፡牧獉᮷䛑扗ᥝྋ嘦ጱᤩ疻纈牐
Slide 17
Slide 17 text
Why RWD ?
斃ጱ姘虁౮
ݝ襑ᥝӞ㮆翕ᒊ牧櫒簁ڡ๗伛猋纸盏聻ۑॢ牧֕盅๗ጱ
姘虁౮斃犵牐
Slide 18
Slide 18 text
Why RWD ?
矾疨磧֯玕
ই
m.example.com/article-1.html
example.com/article-1.html
殾ᥝమ旰ဩ虏 Search Engine Ꭳ螇ٌ䋿犢㮉ฎݶӞ奲獉牧
ದ蔩Ӥฎݢᤈጱ牧ے獈 Canonical URL 瞲ݻݶӞ翕࣎ܨݢ
Slide 19
Slide 19 text
墋㻌Օ奧ದ蔩奞℄
Slide 20
Slide 20 text
獮眐ᥝ: RWD 㪔犋ฎӞ㮆碝ጱ承牧
֕ਙୌ缏ࣁ HTML / CSS च器Ӥ牐
Slide 21
Slide 21 text
ࢧ稳ک Web ጱ搡
Structure 奾䯤
HTML
CSS JavaScript
Presentation 蔭匍䍅
Behavior ᤈ傶䍅
Slide 22
Slide 22 text
HTML
CSS
JavaScript
JavaScript ݢ犥ᤩ硯ࣁ HTML 䲆愊ᶎฎ加缏
ጱ .js 䲆礯牐 犋ֵአ JavaScript Ӟ䰬ݢ犥ୌ缏
翕ᒊ牐
䍅吩䰬ୗ蔭(Cascading Style Sheets牧墋䌃
CSS)牧አ㬵傶 HTML 奾䯤Ⴒے䰬ୗ牐
᩻կ秂纈承 (HyperText Markup
Language) ฎӞ圵አෝୌ缏翕殷ጱ秂伛秂懿ୗ
承牐HTMLฎӞ圵च器ದ蔩牧ଉ膏 CSS牏
JavaScriptӞ蚏ᤩ唰ग़翕ᒊአෝ戔懯犤Ո搕ஞ
盽ፓጱ翕殷 - wiki
Slide 23
Slide 23 text
HTML
CSS
JavaScript
ࣁ HTML ્獈 JavaScript ጱොୗ:
ࣁ HTML 殷ᶎӾ્獈 CSS ጱොୗ:
ፗ矑犥 .html 䲆ݷ牧㪔Ӭ犥 HTML 秂壆樄ত翥
蜉翕殷ጱ獉膏 HTML 奾䯤牐
✤ ֵአ .css 䲆礯㪔蝚螂 link 秂壆ਧ嬝獈ጱ css
✤ inline-style
✤
✤ <script>
✤ ࣁ html 獈 .js 䲆礯
Slide 24
Slide 24 text
… for RWD?
RWD ᯿ᥝӣկԪ
Media
Query
Flexible Media
Fluid Grid
System
Slide 25
Slide 25 text
CSS ጱ Media Query
Media Query ݢ犥礬硁戔猋牧倵薩瑊ጱ氥纈ጱ疝ṛ (ViewPort य़
ੜ)牧ොݻ缛狶ڊ犋ݶጱ CSS 䰬ୗ戔ਧ牐ݢ犥藯ฎ Responsive 磧橕
棎䛑አ߶!
@media [media type] and [(media feature)]
* Media type names are case-insensitive.
ٌ䋿 CSS ጱ Media Query ࣁ CSS2 碻疰磪牧ݝฎࣁ CSS3 ک穉
斃獅᪃ጱඪൔ牐
Slide 26
Slide 26 text
Media Query Type
ݢ犥㯏介戔猋圵觊
all, screen, print, speech
@media print {
body { font-size: 10pt }
}
@media screen, print {
body { line-height: 1.2 }
}
䌃梊ெ讕旰牫牦
硯❤️牧倵薩瑊ݝ፡犢㮉፡睞ጱ CSS ਯޞ...
screen դ蔭犨ٍ֜磪蓦癷ጱ䩚ᥜ牐
Slide 27
Slide 27 text
瑽粙౼瑽ᛔ物 https://developer.mozilla.org/zh-TW/docs/Web/CSS/@media
Slide 28
Slide 28 text
Media Query ݢ犥 Query Ջ讕?
width 憙ओ疝ଶ (ݢ憎疝ଶ)
height 憙ओṛଶ (ݢ憎ṛଶ)
device-width 蕕ᗝ疝ଶ
device-height 蕕ᗝṛଶ
Orientation 蕕ᗝਧݻ
(*֕犖๚ᤩಅ磪倵薩瑊ඪൔ)
aspect-ratio / device-aspect-ratio 疝ṛ穉
Slide 29
Slide 29 text
Media Query ݢ犥 Query Ջ讕?
憙ओ(viewport): 翕ᒊࣁ蓦癷Ӥᤩ疻纈ጱ玟ऒ(ࣁ倵薩瑊憙绯愊)牧
墋㻌㬵藯疰ฎ倵薩瑊愊ᶎ牧䋿褬۱珀翕殷ጱ疝ṛ牧֦殾ᥝಕധ倵
薩瑊ጱ scroll bar, ૡٍڜ, 皈蟂, ṛଶ缛缛獵ӥฎ憙ओ牐
蓦癷疝ṛ: ᰁ介کጱ独ฎ䋿褬ጱ蕕ᗝ蓦癷牧犖疰ฎ疰ᓒ藲碉倵薩瑊
疝ṛ犖犋䨝段蝡㮆独牐
Slide 30
Slide 30 text
Media Query
Example 礬硁蓦癷疝ଶ
http://jsbin.com/faxaqusuge/edit?html,css,output
@media screen and (device-width: 1280px) {
body {
background-color: lightgreen;
}
}
蚤茐 device牧犋䨝ࢩ傶倵薩瑊憙绯य़ੜᘒ硬虋
Slide 31
Slide 31 text
Example 礬硁憙ओ疝ଶ (ݢ憎疝ଶ)
http://jsbin.com/qafajujoko/edit?html,css
@media screen and (min-width: 1000px) {
body {
background-color: lightgreen;
}
}
䨝ࢩ倵薩瑊憙绯य़ੜ硬虋ᘒ硬虋
min- य़ෝ缛ෝ
max- ੜෝ缛ෝ
Media Query
Slide 32
Slide 32 text
Example 礬硁ොݻ
Portrait
Landscape
@media screen and (orientation: portrait) {.....}
@media screen and (orientation: landscape) {.....}
Media Query
Slide 33
Slide 33 text
Example 憙ओ疝ṛ穉ฎ蓦癷疝ṛ穉ጱ穉ሲ牐
@media only screen
and (min-device-aspect-ratio: 1920/1080) {
….
}
Media Query
Slide 34
Slide 34 text
Breakpoint
蝚螂 Media Query ౯㮉ݢ犥戔ਧԆᥝ䥁讨 Breakpoint牧朼䌘Ԇ窕
ጱ Device ֢傶Ӟ圵 Layout ጱ獥矦ฎ CSS ጱ藲碉牐
http://mediaqueri.es/
> xxxx px
xx px ~ xx px
xx px ~ xx px
< xx px
Slide 35
Slide 35 text
ই֜螡䢔Ӿ䥁讨 Breakpoint
盄ग़戔懯ݝ䨝蟴ݳ窕ᤈጱ蕕ᗝ㬵螡Ӿ䥁讨牧ই iphone, ipad牐蝡
ฎ䷱磪Ջ讕㺔氂牧֕藶犋ᥝᆌ讨ݝ硯ࣁᮎ皃㮆Ӿ䥁讨፡蚏㬵ই֜牐
᯿讨: 戔懯ࣁྯ㮆Ӿ䥁讨ԏ樌ጱ塅瑻፡蚏㬵ই֜牧ᘒ犋ݝฎࣁ礓㮆
Ӿ䥁讨Ӥ፡蚏㬵ই֜牐
http://jsbin.com/rulanopime/edit?html,css
Slide 36
Slide 36 text
介手 Media Query ጱ奾ຎ
http://mqtest.io (娄Ӥૡٍ耆ग़牧蝡愊㰍傶膐ֺ)
䋿褬೭ Device 介手 (聻碻牧֕斃伛嘦)
ֵአ倵薩瑊׀ጱ藲手ૡٍ (֕磪犚ᤈ傶 PC 螭秇硈犋ڊ㬵)
Slide 37
Slide 37 text
Flexible Media
img {
max-width: 100%
}
甿誢虻碘໒ୗ犋妔ࢴਧ疝ଶ牧礬硁 device 蝱ᤈ婘硯牐
ฎֵአ img ጱ data 痀牧㬵䋿匍犋ݶ戔猋ጱ瑽粙氥纈牐
img {
width: 300px
}
img {
width: 100%;
max-width: 100%
}
Slide 38
Slide 38 text
Fluid
Grid System
चෝጯ獤穉ጱ蟴ᗝ虏翕殷ጱ戔懯ๅ磪
䕃牐蟴ݳ蓦癷疝ଶ牧獅獤ڥአ翕殷
绚樌牐
Slide 39
Slide 39 text
瑽粙౼瑽ᛔ物 http://mediaqueri.es/
Slide 40
Slide 40 text
RWD 戔懯ොဩ
犥侅蝱ी䔶ጱොୗ戔懯
Progress Enhancement
ℂੜ蓦癷樄ত牧獉猻ض
蝛ྍ猻玕牧侅蝱 RWD牧犋盪茐Ӟ稞ک֖牐
(Mobile) Content Strategy
蝢ଉֵአᘏ犋䨝ဳکฎ犋ฎ RWD 翕殷牧ݝࣁԒฎ犢మ፡ጱ獉
Slide 41
Slide 41 text
RWD 戔懯ොဩ
ֵአ翕໒戔懯
段䛑ୗ戔懯櫒簁襑ᥝ fluid layout牧䕃ጱ戔懯ฎᥝ牧֕翕໒ฎ覍ᥝ牐
ݝ犋螂翕໒ଉଉᤩ憙傶ฎୌ缏戔懯臑অ翕ᒊጱ橕棎ԏӞ牐
ֵአ䪢䳱戔懯 (Column)
翕ᒊय़ੜ獤౮̿12̀䳱ฎଉ憎ጱ֢ဩ牧ࢩ傶̿12̀蝡㮆
碍ਁ磪盄य़ጱ䕃牧ݢ犥ᤩ 2, 3, 4, 6 碉ᴻ牐
Slide 42
Slide 42 text
ᤈ傶癩吖
ಋ秚䷱磪 a:hover 硳ຎ牧䷱磪ೲݦ棎缛 PC 䨝磪ጱ砺֢牐
RWD 犖ᥝ觎现砺֢Ӥጱڥ牐
Slide 43
Slide 43 text
硳胼㺔氂
段䛑ୗ翕殷妃䌘犋ฎ፡Ӥ݄段䛑疰 ok…
RWD 磧虏Ո扑የጱ㺔氂疰ฎ硳胼牐
磧ଉ憎ጱ㺔氂ஃஃڊࣁෝ瑽粙 Loading 螂᯿牐
介手碻᮷አ PC ጱ秇硈瑊介牧㶴ஃஃ䨝ኼکٌ犢
device 翕᪠蝫娄ጱ眐丆牐
HTML/CSS/JavaScript ग़ݝ胼薹究憙憽Ӥጱ㺔氂牐
Slide 44
Slide 44 text
硳胼傶Ջ讕᯿ᥝ
ࢩ傶፡ጱՈ䷱磪ᘔஞ缛盃牐
Slide 45
Slide 45 text
ই֜硬珿硳胼㺔氂
✤ 仂 HTTP 藶穩
✤ 瓟婘䲆礯
✤ 珸㵕倵薩瑊ጱ盠玲
✤ ᑏᴻᴥ繸斉獈ጱ JavaScript
✤ 瑽猟ݳ㬫 CSS Sprite
Many… Many…
Slide 46
Slide 46 text
Q: 藶 Google 啻薹Ӟӥ ጱ viewport ฎՋ讕现֢አ?
Q: ֦藨傶֦吚ӥ䁆ᤈጱ䌕礯牧ֵአಋ秚ጱ碢ᗭ制丆ฎই֜?
Q: 傶Ջ讕腷䨗 Web 粚犋狶 RWD ᘒฎݚक़蕣֢ಋ秚粚翕ᒊ?
Q: మమಋ秚粚翕ᒊ v.s Native App ጱ癩吖牐
Q: 啻薹 respond.js ጱ֢አ (github.com/scottjehl/respond)
Ӟ犚妔֦ጱੜۑ抓
Slide 47
Slide 47 text
Thank You
Slide 48
Slide 48 text
䋊聜虻რ
https://www.codecademy.com/learn
https://www.codeschool.com/learn/html-css
https://www.coursera.org/
Slide 49
Slide 49 text
硳胼介手
✤ Mobitest http://mobitest.akamai.com
✤ Chrome PageSpeed
✤ http://www.webpagetest.org/
Google: web speed test
Slide 50
Slide 50 text
㷢ᘍ
https://speakerdeck.com/peruvianidol/road-to-responsive
http://mediaqueri.es/
http://www.vcarrer.com/2010/11/css-mobile-reset.html
https://www.w3.org/TR/CSS21/media.html
http://www.jianshu.com/p/006db7312b71
http://xinyo.org/archives/64557/
Responsive Web Design 段䛑ୗ翕殷戔懯䋊聜ಋ㲘 - 稨苟因