際際滷

際際滷Share a Scribd company logo

Responsive Workflow & Wordpress

Download as PPTX, PDF
Kostas Charalampidis
Kostas Charalampidis

Responsive Workflow & Wordpress http://scottjehl.github.io/picturefill/ http://css-tricks.com/hassle-free-responsive-images-for-wordpress/ https://github.com/tevko/wp-tevko-responsive-images

1 of 25
Download to read offline
Hello
Responsive Workflow & Wordpress ﾏ竜 僚凌 凌僚 developer 凌
ﾏ留 律留留了留亮溜隆侶 Lead Developer @ www.timimas.gr www.novelwebdesigns.com www.panadvert.com aka skapator Twitter: @skapator Github: /skapator
3 RESPONSIVE WEB DESIGN 旅 竜溜僚留旅 ? ( 旅 ? 旅 ? ) 旅隆劉留 凌旅 侶 旅凌竜了溜隆留 凌 慮留 凌留亮龍竜留旅 留亮留留 留僚略了凌粒留 侶僚 虜竜流 侶 凌凌溜留 留凌旅略龍竜留旅.
4 ONE SITE TO RULE THEM ALL 裡竜 隆凌了竜旅留 僚留 硫旅虜亮留竜...
5 RESPONSIVE WEB DESIGN 旅 竜旅留龍亮留竜 了凌旅僚 1 A flexible grid based layout 2 Flexible images and media 3 Media queries to determine layout adaptation
2 Breakpoints ( em / px ) 3 Breakpoints ( design / content ) 6 RESPONSIVE WEB DESIGN 慮竜亮留留 5 Responsive Images and Wordpress 6 侶粒劉 了侶凌凌溜僚 7 流竜旅
Grid layout 亮侶亮留凌凌溜侶侶 亮旅留 竜了溜隆留 竜 流了竜 (columns)
GRID LAYOUT basic idea
Breakpoints ( em / px ) 9
10 BREAKPOINTS pixel Px 1px 竜溜僚留旅 溜凌 亮竜 劉僚留 pixel 侶僚 凌慮僚侶. (隆竜僚 隆旅僚凌亮竜 侶亮留溜留 竜 虜留虜劉 了劉両竜旅 pixel density 虜了, ﾏ留)
11 BREAKPOINTS em Em 1em 竜溜僚留旅 溜凌 亮竜 凌 劉凌僚 亮竜粒竜慮凌 粒留亮亮留凌竜旅略 凌 竜僚 了粒 凌旅竜溜凌.
12 BREAKPOINTS css media queries @media only screen and (min-width: 480px) @media only screen and (min-width: 30em)
13 BREAKPOINTS pixel to em formula Browser font-size: 16px Em = target px / element font-size 24px -> ?em 24 / 16 = 1.5em 480px -> ?em 480 / 16 = 30em
14 Go to code Rwd-em.hmtl Rwd-px.html Show zoom breakpoints Show text em / px diff
15 BREAKPOINTS mobile first 竜隆旅留亮 亮旅留 旅凌竜了溜隆留 亮竜 虜凌 侶僚 虜留了竜侶 留凌溜留侶 竜旅竜凌亮劉僚凌 竜 mobile devices ﾏ留.
Responsive Images Flexible images and media 隆旅留僚凌亮流 凌 虜留略了侶了凌 留竜溜凌 硫留侶 凌 了留凌 侶 虜竜流.
17 RESPONSIVE IMAGES 粒旅留旅 1 Load time 2 Load weight
18 RESPONSIVE IMAGES picture element 里凌 <picture> element 竜溜僚留旅 劉僚留 container 凌 凌凌溜凌 隆溜僚竜旅 了侶凌凌溜竜 凌僚 browser 粒旅留 留 凌旅竜溜留 亮旅留 竜旅虜僚留. 竜粒竜慮凌 Pixel density format <picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 992px)"> <source srcset="examples/images/large.jpg" media="(min-width: 768px)"> <img srcset="examples/images/medium.jpg" alt=The responsive image alt"> </picture>
19 RESPONSIVE IMAGES 亮硫留侶留 里凌 <picture> element 凌侶溜龍竜留旅 亮僚凌 留凌 凌僚 chrome 38 留流 侶 旅粒亮侶 (隆竜僚 凌虜溜龍凌亮留旅). 旅留 僚留 竜凌亮竜 亮硫留侶留 竜 了凌 凌 browser 侶旅亮凌凌旅凌亮竜 凌 picturefill.js http://scottjehl.github.io/picturefill/ <script src=/KostasCharalampidis/responsive-workflow-wordpress/"picturefill.js"></script>
20 Got to code Picturefill.js
21 RESPONSIVE IMAGES wordpress 凌慮流虜侶 凌 picturefill.js 侶亮旅凌粒溜留 僚 image sizes 凌 慮劉了凌亮竜 僚旅虜留略留侶 凌 image shortcode
22 Go to code Enque picturefill Shortcode code Live demo
流竜旅 裡侶僚 隆旅留慮竜侶 留.
留旅 旅留 侶僚 凌凌流 留.

More Related Content

Responsive Workflow & Wordpress

  • 2. Responsive Workflow & Wordpress ﾏ竜 僚凌 凌僚 developer 凌
  • 3. ﾏ留 律留留了留亮溜隆侶 Lead Developer @ www.timimas.gr www.novelwebdesigns.com www.panadvert.com aka skapator Twitter: @skapator Github: /skapator
  • 4. 3 RESPONSIVE WEB DESIGN 旅 竜溜僚留旅 ? ( 旅 ? 旅 ? ) 旅隆劉留 凌旅 侶 旅凌竜了溜隆留 凌 慮留 凌留亮龍竜留旅 留亮留留 留僚略了凌粒留 侶僚 虜竜流 侶 凌凌溜留 留凌旅略龍竜留旅.
  • 5. 4 ONE SITE TO RULE THEM ALL 裡竜 隆凌了竜旅留 僚留 硫旅虜亮留竜...
  • 6. 5 RESPONSIVE WEB DESIGN 旅 竜旅留龍亮留竜 了凌旅僚 1 A flexible grid based layout 2 Flexible images and media 3 Media queries to determine layout adaptation
  • 7. 2 Breakpoints ( em / px ) 3 Breakpoints ( design / content ) 6 RESPONSIVE WEB DESIGN 慮竜亮留留 5 Responsive Images and Wordpress 6 侶粒劉 了侶凌凌溜僚 7 流竜旅
  • 8. Grid layout 亮侶亮留凌凌溜侶侶 亮旅留 竜了溜隆留 竜 流了竜 (columns)
  • 10. Breakpoints ( em / px ) 9
  • 11. 10 BREAKPOINTS pixel Px 1px 竜溜僚留旅 溜凌 亮竜 劉僚留 pixel 侶僚 凌慮僚侶. (隆竜僚 隆旅僚凌亮竜 侶亮留溜留 竜 虜留虜劉 了劉両竜旅 pixel density 虜了, ﾏ留)
  • 12. 11 BREAKPOINTS em Em 1em 竜溜僚留旅 溜凌 亮竜 凌 劉凌僚 亮竜粒竜慮凌 粒留亮亮留凌竜旅略 凌 竜僚 了粒 凌旅竜溜凌.
  • 13. 12 BREAKPOINTS css media queries @media only screen and (min-width: 480px) @media only screen and (min-width: 30em)
  • 14. 13 BREAKPOINTS pixel to em formula Browser font-size: 16px Em = target px / element font-size 24px -> ?em 24 / 16 = 1.5em 480px -> ?em 480 / 16 = 30em
  • 15. 14 Go to code Rwd-em.hmtl Rwd-px.html Show zoom breakpoints Show text em / px diff
  • 16. 15 BREAKPOINTS mobile first 竜隆旅留亮 亮旅留 旅凌竜了溜隆留 亮竜 虜凌 侶僚 虜留了竜侶 留凌溜留侶 竜旅竜凌亮劉僚凌 竜 mobile devices ﾏ留.
  • 17. Responsive Images Flexible images and media 隆旅留僚凌亮流 凌 虜留略了侶了凌 留竜溜凌 硫留侶 凌 了留凌 侶 虜竜流.
  • 18. 17 RESPONSIVE IMAGES 粒旅留旅 1 Load time 2 Load weight
  • 19. 18 RESPONSIVE IMAGES picture element 里凌 <picture> element 竜溜僚留旅 劉僚留 container 凌 凌凌溜凌 隆溜僚竜旅 了侶凌凌溜竜 凌僚 browser 粒旅留 留 凌旅竜溜留 亮旅留 竜旅虜僚留. 竜粒竜慮凌 Pixel density format <picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 992px)"> <source srcset="examples/images/large.jpg" media="(min-width: 768px)"> <img srcset="examples/images/medium.jpg" alt=The responsive image alt"> </picture>
  • 20. 19 RESPONSIVE IMAGES 亮硫留侶留 里凌 <picture> element 凌侶溜龍竜留旅 亮僚凌 留凌 凌僚 chrome 38 留流 侶 旅粒亮侶 (隆竜僚 凌虜溜龍凌亮留旅). 旅留 僚留 竜凌亮竜 亮硫留侶留 竜 了凌 凌 browser 侶旅亮凌凌旅凌亮竜 凌 picturefill.js http://scottjehl.github.io/picturefill/ <script src=/KostasCharalampidis/responsive-workflow-wordpress/"picturefill.js"></script>
  • 21. 20 Got to code Picturefill.js
  • 22. 21 RESPONSIVE IMAGES wordpress 凌慮流虜侶 凌 picturefill.js 侶亮旅凌粒溜留 僚 image sizes 凌 慮劉了凌亮竜 僚旅虜留略留侶 凌 image shortcode
  • 23. 22 Go to code Enque picturefill Shortcode code Live demo
  • 25. 留旅 旅留 侶僚 凌凌流 留.