4 GIFS TO WARM UP
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
3 STEPS
RECIPE
Slide 41
Slide 41 text
1. FLUID WIDTH
2. FLEXIBLE MEDIA
3. MEDIA QUERIES
Slide 42
Slide 42 text
ADAPTIVE VS FLUID
EXAMPLE
Slide 43
Slide 43 text
MAKING IT FLUID
TARGET / CONTEXT = RESULT
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
300px
Slide 46
Slide 46 text
300px
940px
Slide 47
Slide 47 text
300px
940px
300/940 = 0.319148936
Slide 48
Slide 48 text
300px
940px
300/940 = 0.319148936
31.9148936%
Slide 49
Slide 49 text
1. FLUID WIDTH
2. FLEXIBLE MEDIA
3. MEDIA QUERIES
Slide 50
Slide 50 text
LET MEDIA TAKE
MORE AVAILABLE SPACE
Slide 51
Slide 51 text
1. FLUID WIDTH
2. FLEXIBLE MEDIA
3. MEDIA QUERIES
Slide 52
Slide 52 text
Print
Monochrome
Width
Height
Aspect Ratio
Orientation
And more…
Slide 53
Slide 53 text
Print
Monochrome
Width
Height
Aspect Ratio
Orientation
And more…
@media (min-width: 600px) {
}
Slide 54
Slide 54 text
LOAD ME
NOT YET
NOT YET
Slide 55
Slide 55 text
LOAD ME
NOT YET
NOT YET
Slide 56
Slide 56 text
LOAD ME
NOT YET
NOT YET
Slide 57
Slide 57 text
LOAD ME
LOAD ME
LOAD ME
Slide 58
Slide 58 text
Know your
Breakpoints
Slide 59
Slide 59 text
Breakpoints. Break. Points. Points at
which things break in your design.
http://www.markboulton.co.uk/journal/theinbetween
“
Slide 60
Slide 60 text
Start small.
Slide 61
Slide 61 text
Increase the width.
Slide 62
Slide 62 text
Identify problems.
Slide 63
Slide 63 text
Add a breakpoint
and fix it.
Slide 64
Slide 64 text
Keep going!
Slide 65
Slide 65 text
The importance of
MOBILE FIRST
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
IGNORING MOBILE FIRST WILL
PROBABLY BITE YOU LATER
Slide 70
Slide 70 text
ITS OK TO DESIGN IT
IN THE BROWSER
Slide 71
Slide 71 text
UX Design
Code
Slide 72
Slide 72 text
The web’s greatest strength, is often
seen as a limitation, as a defect.
http://alistapart.com/article/dao
Slide 73
Slide 73 text
It is the nature of the web to be
flexible.
http://alistapart.com/article/dao
Slide 74
Slide 74 text
It should be our role as designers and developers
to embrace this flexibility, and produce pages
which, by being flexible, are accessible to all.
http://alistapart.com/article/dao
Slide 75
Slide 75 text
The journey begins by letting go
of control, and becoming flexible.
http://alistapart.com/article/dao