S

Responsive thinking

 

Use a three column grid to start
the layout of a responsive design. Each grid should be the width of
the phone (think layout not pixels).

The desktop and tablet landscape layout will need no adjustments.

The tablet portrait will need to adjust

a bit. The mobile version will have

everything re-stack. Once you know

how everything stacks you can now adjust the scaling behavior, size adjustments, break points and the behavior in between break points.

 

 

3 COLUMNS

FLUID TEXT

Fluid text will stack & grow in length to adjust to different browser sizes.

SCALE = SVG TEXT

FLUID WIDTH = ADJUST AT ALL POSSIBILITIES

adjusting the layout continuously to every possible width plus adjusting for breakpoints