Jak udělat web responzivní pro mobily

Abyste web udělali responzivní pro mobily, přidejte značku viewport, postavte layout mobile-first s pružnými šířkami a pomocí CSS zlomových bodů ho na větších obrazovkách přeskládejte – sloupce se skládají pod sebe, menu se sbalí a obrázky se přizpůsobí. Pak zkontrolujte každou stránku v šířce telefonu, jestli se nedá posouvat do stran, nemá drobný text a tlačítka, na která nejde pohodlně kliknout. U webu postaveného AI obvykle stačí jeden jasný prompt a průchod v náhledu ve velikosti telefonu, aby se opravila většina problémů.

Co responzivní design vlastně je

Responzivní web používá jednu sadu stránek a URL, které se přizpůsobují obrazovce. Místo samostatného webu „m.“ CSS mění layout při určitých šířkách, kterým se říká zlomové body (breakpoints). Stavební kameny:

• Značka viewport říká mobilním prohlížečům, ať použijí skutečnou šířku zařízení.
• Tekuté layouty používají procenta, flexbox a grid místo pevných šířek v pixelech.
• Media dotazy (nebo třídy frameworků jako md: v Tailwindu) mění layout nad danou šířkou.
• Pružná média – obrázky a videa, které se zmenší, aby se vešla do svého kontejneru.

Záleží na tom, protože velká část návštěvnosti je pravděpodobně z telefonů a protože Google indexuje mobilní verzi vašich stránek. Pokud obsah nebo odkazy existují jen na desktopu, Google je také nemusí vidět.

Možnosti a kompromisy

Mobile-first je obvykle jednodušší: jeden sloupec je nejsnazší layout a přidávat sloupce, jak přibývá místa, je méně práce než je odebírat.

Části, které se obvykle rozbijí

Značka viewport

Pokud stránka na telefonu vypadá jako malý desktopový web, chybí značka viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nepřidávejte maximum-scale=1 ani user-scalable=no. Zablokování přiblížení prsty ztíží používání webu lidem se slabým zrakem.

Pevné šířky a vodorovné posouvání

Nejčastější responzivní chybou je něco širšího než obrazovka: pevný kontejner width: 1200px, široká tabulka, dlouhá URL nebo blok kódu, obrázek bez max-width: 100%. Celá stránka se pak posouvá do stran. Používejte max-width místo width, nechte text se zalamovat a širokým prvkům dejte vlastní oblast pro posouvání.

Navigace

Pět odkazů z desktopového menu se na telefonu zřídka vejde. Obvyklá odpověď je tlačítko menu, které otevře panel. Nechte viditelné dvě nebo tři nejdůležitější akce – „Rezervovat“, „Košík“, „Přihlásit se“ – a ujistěte se, že menu funguje i z klávesnice a snadno se zavře.

Text a dotykové cíle

• Základní text kolem 16 px je na telefonech rozumné minimum. Vstupní pole s menším textem na iPhonu při tapnutí přibližují.
• Tlačítka a odkazy musí jít snadno trefit. WCAG 2.2 AA stanovuje minimum 24 × 24 CSS pixelů (nebo dostatečné rozestupy); kolem 44 pixelů je pohodlnější pro palce.
• Nechte mezi sousedními odkazy mezeru, aby lidé netrefili ten špatný.

Tabulky a data

Široké tabulky jsou nejtěžší částí responzivní aplikace. Možnosti, od nejpreferovanější: na telefonech zobrazit méně sloupců, přeměnit každý řádek na kartu, nebo dát tabulku do vodorovně posouvatelného kontejneru s přichyceným prvním sloupcem. Vyberte podle toho, co lidé potřebují porovnávat.

Obrázky a média

Používejte max-width: 100% a height: auto, na malé obrazovky posílejte menší soubory přes srcset a nastavujte šířku a výšku, aby se layout neskákal. Vložená videa a mapy potřebují responzivní obal, aby si zachovaly poměr stran. Menší obrázky také zrychlují stránky – viz jak zrychlit web.

Formuláře

Štítky dejte nad pole, pole na celou šířku a použijte správné typy vstupů (type="email", type="tel", inputmode="numeric"), aby telefon zobrazil odpovídající klávesnici. Tlačítko pro odeslání umístěte tam, kam palec dosáhne, a nechte ho viditelné, když se otevře klávesnice.

Interakce jen při najetí myší

Telefony nemají hover. Nápovědy, rozbalovací nabídky a náhledy, které se objeví jen při najetí, jsou pro dotykové uživatele neviditelné. Zprovozněte je i při klepnutí.

Prompty, které fungují

U nové stavby to řekněte hned na začátku:

Postav to mobile-first. Na telefonech jeden sloupec, od šířky tabletu dva sloupce, plný layout na desktopu. Žádné vodorovné posouvání na šířce 320 px, základní text alespoň 16 px, dotykové cíle alespoň 44 px, na malých obrazovkách tlačítko menu a tabulky, které se na telefonech změní na karty.

U existující stránky popište, co vidíte:

Na telefonech se stránka /pricing posouvá do stran a tři karty plánů jsou stlačené vedle sebe. Pod 768 px je srovnej pod sebe, srovnávací tabulku nech se vodorovně posouvat ve vlastním kontejneru s přichyceným sloupcem funkcí a desktopový layout nech beze změny.

Zkontroluj každou stránku na šířce 375 px. Vypiš, co přesahuje, se překrývá, má text menší než 16 px nebo dotykové cíle menší než 44 px, nebo funguje jen při najetí, a pak každou položku oprav.

Postup krok za krokem

1. Ověřte značku viewport v hlavičce stránky.
2. Otestujte na šířce 320–375 px v režimu zařízení v prohlížeči nebo v náhledu velikosti telefonu. Projděte každou stránku od shora dolů.
3. Nejprve opravte vodorovné posouvání. Najděte prvek, který je příliš široký; dokud není pryč, všechno ostatní se hůř posuzuje.
4. Srovnejte navigaci: tlačítko menu, klíčové akce viditelné.
5. Zkontrolujte text, dotykové cíle a formuláře v každém klíčovém postupu – registrace, hledání, pokladna, kontakt.
6. Zpracujte tabulky a média: karty nebo posouvací kontejnery, responzivní obrázky a vložené prvky.
7. Zkontrolujte mezivelikosti. Pomalu přetáhněte šířku od telefonu po desktop; layouty se často rozbijí kolem šířky tabletu.
8. Otestujte na skutečném telefonu. Emulátory přehlédnou věci jako klávesnici na obrazovce, která překrývá tlačítko, výřezy displeje nebo to, jak rychle web působí na mobilních datech.

Časté chyby

• Testování jen na jedné velikosti telefonu. Zkontrolujte malý telefon, velký telefon a tablet.
• Skrývání obsahu na mobilu, aby se vešel. Google indexuje mobilní verzi a uživatelé na telefonu chtějí stejné informace.
• Vypnutí přiblížení ve značce viewport.
• Desktopové obrázky na telefonech, které stojí čas načítání a data.
• Hromadění pevně umístěných prvků: lepivá hlavička, lišta s cookies a bublina chatu mohou zakrýt půlku obrazovky telefonu.
• Vyskakovací okna, která nejdou zavřít, protože tlačítko zavřít je mimo obrazovku.

Kontrolní seznam pro mobily

• Značka viewport je přítomná; přiblížení není vypnuté
• Žádné vodorovné posouvání na šířce 320 px na žádné stránce
• Základní text cca 16 px; vstupní pole nespouštějí přiblížení
• Dotykové cíle jsou pohodlně velké a mají rozestupy
• Menu funguje na telefonech i z klávesnice
• Tabulky jsou na telefonech čitelné (karty, méně sloupců nebo posouvací kontejner)
• Obrázky a vložené prvky se přizpůsobují; servírovány jsou správně velké soubory
• Formuláře používají správné typy vstupů; tlačítko pro odeslání je dosažitelné
• Nic důležitého nezávisí na najetí myší
• Otestováno alespoň na jednom skutečném telefonu

Responzivní layout je také součástí přístupnosti: WCAG požaduje, aby obsah fungoval na šířce 320 px a při 200% přiblížení. Pokud stavíte aplikaci, kterou lidé denně používají na telefonech, jak vytvořit webovou aplikaci přátelskou k mobilu jde dál, včetně instalovatelných PWA.

Responzivní design v Mythexu

Mythex staví responzivní webové aplikace a na Pro je může zabalit jako aplikace pro Android a iPhone. V pracovním prostoru klikněte na ikonu telefonu nad Náhledem (Přepnout na mobil) a uvidíte svou aplikaci v rámečku ve velikosti telefonu; okraj rámečku můžete přetáhnout a vyzkoušet další šířky (Náhled a kód). V dokumentaci je krátký startovací prompt pro opravu layoutu na malých obrazovkách v promptech pro responzivní mobilní zobrazení. Zkontrolujte také na skutečném telefonu – otevřete publikovanou URL nebo sdílejte odkaz na náhled a otevřete ho na telefonu.

Otázky