Luke Wroblewski dal této praxi název v roce 2009, ale logika už tehdy naléhala. Telefony se staly primárním způsobem, jakým se lidé dostali na web, a navrhování rozvržení pro počítače nejprve donutilo designéry, aby později nacpali složitost do malých obrazovek. Zaměření na mobilní zařízení obrací pořadí. Začněte s nejmenší obrazovkou, rozhodněte se, na čem záleží nejvíce, a poté rozšiřujte rozvržení pro tablety a počítače.

Toto omezení je produktivní. Úzký zobrazovací prostor nutí k třídění. Navigace se sbalí do menu. Obsah se přesune do jednoho sloupce. Každá funkce musí odůvodnit svůj prostor. Návrháři načrtávají cíle pro klepnutí, které lze ovládat palcem, zvažují používání jednou rukou a počítají s pomalým připojením. Když se design rozroste na větší obrazovku, další prostor se využije pro prostor pro dýchání a sekundární panely, místo aby se zaplňoval novými prvky.

Základní postupy

• Začněte s drátovými modely na šířce telefonu.
• Nemilosrdně upřednostňujte hierarchii obsahu.
• Navrhněte dotykové terče o velikosti alespoň 44 pixelů.
• Nakonec se rozšiřte na tablety a stolní počítače.

Responzivní design a zaměření na mobilní zařízení (mobile first) často jdou ruku v ruce. Zaměření na mobilní zařízení (mobile first) určuje prioritu. Responzivní design zvládá adaptaci napříč breakpointy.