The summary.
START FROM THE SMALLEST SCREEN
It forces prioritisation, and adding space is easier than removing it.
Never hide content on small screens that desktop users see — most visitors and search engines see only that version.
PLACE BREAKPOINTS WHERE THE DESIGN BREAKS, NOT AT DEVICE SIZES
Resize the window slowly to find them. Prefer layout that adapts continuously, with as few breakpoints as the design requires.
Write for the smallest screen first, then add at larger widths.
TELL THE BROWSER HOW AN IMAGE WILL BE DISPLAYED
Without that, it assumes full width and chooses too large a file.
Always set dimensions so the layout does not shift, and defer only what is below the visible area.
HOVER DOES NOT EXIST ON MOST DEVICES
Anything depending on it needs a touch equivalent.
Primary actions belong low and central, within thumb reach — not in top corners.
HORIZONTAL SCROLLING IS USUALLY ONE ELEMENT WITH A FIXED WIDTH
TEST ON REAL DEVICES, AND PRIORITISE WHAT YOUR OWN VISITORS ACTUALLY USE
Emulation does not reproduce touch behaviour, performance or real network conditions.
