Responsive design
Web, který se přizpůsobí jakékoliv velikosti obrazovky
Co je responsive design
Responsive design je způsob tvorby webu, při kterém se rozvržení stránky přizpůsobuje šířce obrazovky, na které se zobrazuje. Jeden web, jedna adresa, jeden obsah. Na monitoru se sloupce roztáhnou vedle sebe, na telefonu se poskládají pod sebe a menu se schová pod ikonu.
Proč se od zvláštní mobilní verze ustoupilo
Kdysi se vedle hlavního webu stavěl ještě samostatný na adrese začínající m. Znamenalo to dvojí správu obsahu, dvojí měření a pravidelné dohady, proč je na mobilu jiná cena než na počítači. U responzivního webu tohle odpadá, protože obsah je jeden a mění se jenom jeho uspořádání. V CSS to obstará několik pravidel, která se zapnou od určité šířky okna.
Kde se to v praxi láme
Responzivní šablona ještě neznamená použitelný mobil. Nejčastěji narazím na tabulky, se kterými se na úzké obrazovce nedá pohnout, na filtry v e-shopu schované tak hluboko, že je nikdo nenajde, a na vyskakovací okno s křížkem velikosti dvou pixelů. Všechno to prošlo testem responzivity a stejně to lidem brání dokončit nákup. Pořadí, ve kterém se návrh dělá, řeší mobile-first přístup.
Telefon ze šuplíku
Když přebírám web klienta, otevřu si ho na svém telefonu a pak ještě na jednom starším a menším, který mám kvůli tomu schovaný v šuplíku. Simulátor v prohlížeči je dobrý na kontrolu rozvržení, neukáže ale, jak se ovládá formulář palcem v tramvaji. Jedu vždycky celou cestu k objednávce: přidat do košíku, vyplnit adresu, potvrdit. Když tahle cesta na telefonu funguje, drobné kosmetické vady jinde web snese bez problémů.