Adapting to width.
WHAT RESPONSIVE MEANS
The layout adapts to the space available.
WHAT TO BASE CHANGES ON
The content, not specific device sizes.
WHY
Devices vary endlessly. Change the layout where it stops working.
WHAT TO ADAPT
Columns, collapsing to one on narrow screens Navigation Image sizes Type sizes, modestly
WHAT NOT TO CHANGE
The content itself The available functionality
WHAT TO AVOID
Fixed widths Horizontal scrolling Elements that overflow
THE HORIZONTAL SCROLL POINT
The commonest responsive fault, usually caused by one element with a fixed width.
WHAT TO ALLOW TO SCROLL
Wide content such as tables, inside its own container.
WHAT TO TEST
Every width between narrow and wide, not only common device sizes.
HOW
Resize the window slowly and watch what breaks.
WHAT TO CHECK
That nothing overlaps That nothing is cut off That text remains readable
