Slide 1

Slide 1 text

Mobile First Intro @markodugonjic

Slide 2

Slide 2 text

CONTENT OUT MOBILE FIRST RESPONSIVE WEB VISUAL DESIGN LOGO © YOUR COPY GOES HERE

Slide 3

Slide 3 text

(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';

Slide 11

Slide 11 text

ADD HORIZONTAL VALUES @media (min-width: 768px) and (max-width: 1023px) { #primary { width: 50%; } #secondary { width: 25%; } /* padding: 1.5em 6.25%; */ } }

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

general proportions, vertical spacing, colors, links etc. GENERAL DESIGN LAYOUT DESIGN horizontal spacing, float, position, overflow etc. 4 x {

Slide 14

Slide 14 text

. . .

Slide 15

Slide 15 text

http:/ /www.w3.org/TR/css3-mediaqueries/ max-width min-width max-device-width min-device-width orientation (landscape, portrait) device-pixel-ratio . . .

Slide 16

Slide 16 text

THANKS :* @markodugonjic