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. 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. Ευχαριστώ
Για την προσοχή σας.