Responzivní design: praktický průvodce
Responzivní design přestal být zvláštní technikou a stal se běžným způsobem stavby. Co stále odlišuje dobré výsledky, je pracovní pořadí a testování na skutečných zařízeních.
Tento průvodce pokrývá přístup, technická rozhodnutí a problémy, které se ukážou až na opravdovém mobilu.
Mobil první, a proč#
Navrhovat nejdřív pro malou obrazovku není estetická preference: je to omezení, které vede k lepším rozhodnutím.
- Vejde se míň, takže je nutné rozhodnout, co je podstatné.
- Co přežije malou obrazovku, na tom na stránce skutečně záleží.
- Přidat prostor pro větší obrazovky je snadné; odebrat obsah bolí.
- Většina návštěvnosti přichází z mobilu ve většině oborů — zkontrolujte vlastní analytiku.
- Výkon vyjde lépe jako vedlejší efekt, protože se ve výchozím stavu načítá míň.
- Zjednodušená mobilní navigace se obvykle ukáže jako lepší i na desktopu.
Opačný vzorec — navrhnout desktop a nakonec «přizpůsobit» — dává improvizovaný mobil, který se pozná okamžitě.
Zlomové body a rozvržení#
Zlomové body mají vycházet z obsahu, ne z modelů zařízení, které se mění každý rok.
| Rozhodnutí | Doporučení |
|---|---|
| Kam umístit zlomové body | Tam, kde se rozvržení rozbije, ne na šířkách zařízení |
| Kolik jich potřebuji | Tři až čtyři stačí pro většinu webů |
| Mřížkový systém | CSS Grid pro stránku, flexbox pro komponenty |
| Šířky | Relativní s maximem, ne pevné hodnoty |
| Typografie | Plynulá s clamp mezi minimem a maximem |
| Odstupy | Konzistentní škála, ne nahodilé hodnoty |
| Kontejnery | Maximální šířka, aby se text neroztahoval na širokých obrazovkách |
Prvky, které se obvykle rozbijí#
Ty stojí za většinou vizuálních problémů na malých obrazovkách.
- Tabulky. Nezmenší se. Buď scrollují vodorovně ve vlastním kontejneru, nebo se změní v karty.
- Obrázky. Potřebují srcset a sizes, aby mobil nestahoval desktopovou verzi.
- Dlouhé titulky. Testujte nejdelším, který se vyskytne, ne tím z ukázky.
- Formuláře. Pole na plnou šířku, správná klávesnice podle typu pole, viditelné popisky.
- Navigace. Sbalené menu musí jít zavřít a ovládat klávesnicí.
- Modály a překryvy. Musí se vejít na obrazovku a scrollovat uvnitř.
- Přilepené prvky. Přilepená lišta na nízké obrazovce může zabrat půl plochy.
- Vložená videa a mapy. Potřebují kontejner s definovaným poměrem stran.
Testovat pořádně#
Simulátor v prohlížeči zachytí problémy rozvržení a skryje všechno ostatní.
- Testujte na skutečných mobilech, včetně starého a pomalého.
- Testujte na omezeném připojení, ne na kancelářské síti.
- Testujte na šířku — tam obvykle selhávají přilepené lišty.
- Testujte se zvětšeným textem v nastavení systému.
- Testujte dotyk palcem, ne myší na simulované obrazovce.
- Zkontrolujte, zda něco nezpůsobuje vodorovné scrollování; je to nejviditelnější vada.
- Zkontrolujte dotykové cíle: minimálně 44 px, s prostorem mezi nimi.
Vodorovné scrollování je vada, které si návštěvníci všimnou okamžitě a kterou simulátory snadno skryjí.
Časté dotazy
Kolik zlomových bodů potřebuji?
Tři až čtyři stačí pro většinu webů. Kritériem je místo, kde rozvržení přestane fungovat, ne šířka konkrétního telefonu. Šířky zařízení se mění každý rok; obsah ne. Zmenšujte okno pomalu a přidejte zlomový bod tam, kde začne něco vypadat špatně.
Potřebuji samostatnou mobilní verzi?
Ne. Samostatné mobilní weby vyžadují dvojí správu, dělí signály pro vyhledávače a jsou prakticky opuštěným přístupem. Responzivní web obsluhuje všechny obrazovky ze stejných adres, což je také to, co dnes vyhledávače očekávají.
Jak řešit tabulky na malých obrazovkách?
Fungují dvě řešení: vodorovné scrollování uvnitř vlastního kontejneru tabulky, které zachová porovnání mezi sloupci, nebo změna každého řádku na skládanou kartu. Volba závisí na tom, zda lidé potřebují porovnávat hodnoty mezi sloupci. Co nikdy nefunguje, je nechat tabulku roztlačit stránku do stran.
Zpomaluje responzivní design web?
Sám o sobě ne. Zpomaluje, pokud posílá desktopové obrázky na mobily, což se děje při chybějícím srcset. S obrázky ve správné velikosti a uspořádaným CSS je responzivní web na mobilu lehčí než špatně udržovaná samostatná verze.
responzivní designmobile firstcss zlomové bodyweb na mobiluresponzivní obrázkyplynulá typografie
