Building for any screen.
WHAT IT MEANS
One codebase adapting to the available space.
WHAT THAT REQUIRES
Flexible layouts Flexible images and media Adaptation at points where the layout stops working
WHAT TO START FROM
The smallest screen.
WHY
It forces prioritisation, and adding space is easier than removing it.
WHAT THAT PRODUCES
A layout that works everywhere, rather than a desktop design compressed.
WHAT NOT TO DO
Build for desktop and adapt downward Hide content on small screens that desktop users see
WHY THAT SECOND POINT
Most visitors and search engines see only the small-screen version.
WHAT TO BASE ADAPTATION ON
The content, not specific device sizes.
WHY
Devices vary endlessly, and today's sizes are not tomorrow's.
HOW TO FIND THE POINTS
Resize the window slowly and change the layout where it breaks.
WHAT TO TEST
Every width between narrow and wide, not only common sizes.
WHAT TO ENSURE
That nothing overflows and nothing is cut off.