Responzivita

Mobilní verze není samostatný design. Používá stejné komponenty a stejnou informační hierarchii jako desktop, pouze mění jejich rozložení. Každá nová komponenta se navrhuje současně pro desktop i mobil – doladění mobilu až po dokončení desktopu není správný postup.

Jediný breakpoint

@media (max-width: 768px) {
    ...
}

Další breakpoint přidáváme jen tehdy, pokud pro něj existuje konkrétní důvod. Nevytváříme pro jednotlivé komponenty náhodné hodnoty typu 767px, 820px nebo 991px jen proto, že „tak to zrovna sedělo“.

Kde bydlí media query

Responzivní pravidlo komponenty patří přímo do jejího souboru, hned pod definici komponenty – ne do jednoho velkého souboru na konci. responsive.css obsahuje jen pravidla, která nejsou vázaná na jednu konkrétní komponentu.

/* components.css */

.content-card-main { ... }

@media (max-width: 768px) {
    .content-card-main { ... }
}

Stejné třídy, jiné rozložení

Responzivní pravidla používají stejné názvy tříd jako desktopová verze. Nevytváříme zvláštní mobilní varianty komponenty.

.article-mobile-nav { ... }
.article-tablet-search { ... }

Praktický příklad: rozložení Layout se pod 768 px vždy zalomí do jednoho sloupce – zmenši okno prohlížeče na této stránce a sleduj, jak se levé menu přesune nad obsah beze změny tříd.