Responsive Workflow & Wordpress
Download as PPTX, PDF0 likes326 views
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
Ad
More Related Content
Viewers also liked (6)
Similar to Responsive Workflow & Wordpress (20)
Ad
Responsive Workflow & Wordpress
- 1. Hello
- 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)
- 9. GRID LAYOUT basic idea
- 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="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
- 24. Ερωτήσεις Στην διαθεση σας.
- 25. Ευχαριστώ Για την προσοχή σας.