(collect and) understand content
make a plan
design basic module
reuse and expand
Slide 4
Slide 4 text
GROUP CONTENT
Slide 5
Slide 5 text
HOW MANY BREAKPOINTS?
Slide 6
Slide 6 text
RESPONSIVE WEB DESIGN
Design master layouts
for different devices
Slide 7
Slide 7 text
HEADLINE
IMAGE
PARAGRAPH
Slide 8
Slide 8 text
html {
font-size: 10px; }
p {
font-size: 1.2rem;
line-height: 1.5em;
margin: 0 0 1.5em }
rem = root em
Slide 9
Slide 9 text
Control layout via parent
element (320 x 480)
/* portrait: */
padding: 1.5em 6.25%
/* landscape: */
padding: 1.5em 4.166%
6.25% od 320px = 20px
4.166% od 480px = 20px
Slide 10
Slide 10 text
CONTROL IMAGES
max-width: 100%;
height: auto;
if (parent.offsetWidth > 440)
img.src = 'big-image.jpg';