Post on 01-Jul-2015
description
transcript
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 LAYOUTbasic idea
9
Breakpoints ( em / px )
10
Px
1px είναι ίσο με ένα pixel στην οθόνη.
(δεν δινουμε σημασία σε κακές λέξεις όπως pixel density κλπ, τώρα)
BREAKPOINTSpixel
11
Em
1em είναι ίσο με το τρέχον μεγεθος γραμματοσειράς του εν λόγω στοιχείου.
BREAKPOINTSem
12
BREAKPOINTScss media queries
@media only screen and (min-width: 30em)
@media only screen and (min-width: 480px)
13
BREAKPOINTSpixel 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
Ο σχεδιασμός μιας ιστοσελίδας με σκοπό την
καλυτερη παρουσίαση περιεχομένου σε
mobile devices πρώτα.
BREAKPOINTSmobile first
Responsive ImagesFlexible images and media
Η διανομή του κατάληλου αρχείου βαση του πλατους της συσκευής.
17
RESPONSIVE IMAGESγιατι
1 Load time
2 Load weight
18
<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>
RESPONSIVE IMAGESpicture element
Το <picture> element είναι ένα container το οποίο δίνει πληροφορίες στον browser για τα στοιχεία μιας εικόνας.
• Μεγεθος• Pixel density• format
19
RESPONSIVE IMAGESσυμβατότητα
Το <picture> element υποστηρίζεται μόνο απο τον chrome 38 αυτή τη στιγμη (δεν ορκίζομαι).
Για να πετύχουμε συμβατότητα σε όλους τους browser χρησιμοποιούμε το picturefill.js
<script src="picturefill.js"></script>
http://scottjehl.github.io/picturefill/
20
Got to code
Picturefill.js
21
RESPONSIVE IMAGESwordpress
• Προσθήκη του picturefill.js• Δημιουργία των image sizes που θέλουμε• Αντικατάσταση του image shortcode
22
Go to code
Enque picturefill
Shortcode code
Live demo
Στην διαθεση σας.
Ερωτήσεις
Ευχαριστώ
Για την προσοχή σας.