Potřebuju samostatnou mobilní verzi na adrese m.domena.cz?

Ne. Dneska se dělá jeden web, který se přizpůsobuje šířce displeje. Samostatná mobilní adresa znamená dvě verze obsahu, které se dřív nebo později rozejdou, a k tomu starosti s tím, která z nich je ta kanonická pro vyhledávač. Výhodu nemá žádnou.

Jak velká musí být tlačítka, aby se do nich lidé trefili?

WCAG 2.2 stanovuje minimum 24 × 24 px na úrovni AA, s výjimkou pro prvky, kolem kterých je dost volného místa. Prakticky je lepší mířit výš, zvlášť u hlavní akce stránky — a hlídat si odstup mezi sousedními prvky, protože nejvíc chyb vzniká tam, kde jsou dvě tlačítka těsně vedle sebe.

Proč se mi na mobilu rozjíždí stránka do strany?

Skoro vždycky kvůli jednomu prvku, který je širší než displej — nejčastěji tabulka, obrázek s pevnou šířkou v pixelech nebo dlouhá adresa bez mezer. Stačí jeden a rozjede se celá stránka. Najdete ho tak, že ve vývojářských nástrojích nastavíte šířku 390 px a postupně skrýváte sekce, dokud posouvání nezmizí.

Má smysl testovat zvlášť na tabletu?

Většinou ne. Když web funguje na 390 px a na širokém monitoru, šířky mezi tím zvládne. Výjimka jsou weby s tabulkami nebo plánovacími mřížkami, kde se rozložení mění až někde uprostřed — tam je potřeba se podívat i na ten mezistav.

Proč je responzivní design nezbytný

Responzivní design není o tom, že se stránka na telefonu zmenší. Je o tom, že se na malém displeji dá použít jednou rukou, vestoje, v tramvaji. A protože Google hodnotí mobilní vykreslení stránky, platí nepříjemná věc: co na mobilu není, to pro vyhledávač neexistuje — i když je to na počítači vidět.

Co znamená, že Google indexuje mobilní verzi

Google přešel na takzvané mobile-first indexování: pro hodnocení i zařazení do indexu používá to, jak stránka vypadá na telefonu. Ne na počítači.

Většina textů z toho dělá hrozbu — „Google vás penalizuje“. Žádná penalizace za nemobilní web neexistuje a je to zbytečné strašení. Skutečný důsledek je ale konkrétnější a nepříjemnější: co na mobilní verzi chybí, to Google nevidí.

Typický případ: někdo schová na telefonu dlouhý popis produktu, protože „na mobilu by to nikdo nečetl“. Na počítači text zůstane. Pro index ale ta stránka ten text nemá. Není to trest, je to prostý důsledek toho, která verze se čte.

Responzivní není zmenšený

Co se na malém displeji musí doopravdy změnit
Prvek	Co dělá zmenšený web	Co má dělat responzivní
Rozložení	Tři sloupce se zúží na tři proužky.	Tři sloupce se složí pod sebe v pořadí podle důležitosti.
Text	Zmenší se, aby se vešel.	Zůstane čitelný a zalomí se dřív. Řádek se krátí, ne písmo.
Menu	Zůstane jako lišta a položky se přetlačují.	Schová se za tlačítko, které jde dosáhnout palcem.
Tabulka	Rozjede stránku do šířky.	Posouvá se vodorovně sama, zbytek stránky stojí.
Obrázek	Stáhne se v plné velikosti a zmenší se až v prohlížeči.	Stáhne se menší soubor, protože větší nemá kam.
Formulář	Políčka vedle sebe, klávesnice překryje odeslání.	Jedno pole na řádek, správný typ klávesnice.

Pět míst, kde se to láme

Příliš malé dotykové cíle
WCAG má na to konkrétní číslo: cíl pro ukazovací zařízení má být aspoň 24 × 24 px (kritérium 2.5.8, úroveň AA). Menší se dá obhájit, jen když je kolem něj dost volného místa. V praxi jsou nejhorší dvě věci vedle sebe — třeba křížek a odkaz — kde se člověk trefí do té druhé.
Vodorovné posouvání celé stránky
Jediný prvek širší než displej rozjede celý web do strany a všechno se začne hýbat. Bývá to tabulka, dlouhá adresa bez mezer nebo obrázek s pevnou šířkou v pixelech.
Text pod čitelnou mez
Pod zhruba 15–16 px začne na telefonu bolet. A když musí člověk přiblížit, aby si přečetl větu, odejde dřív, než ji dočte.
Fixní prvky, co zaberou půl displeje
Lepící se hlavička, lišta se souhlasem, chatovací bublina a „odebírejte newsletter“. Každá z nich je zvlášť drobnost. Všechny najednou nechají na obsah třetinu obrazovky.
Formuláře s nesprávnou klávesnicí
Pole na telefon má vyvolat numerickou klávesnici, pole na e-mail tu s zavináčem. Je to jeden atribut v kódu a rozhoduje o tom, jestli formulář někdo dokončí.

Jak si to otestujete i bez telefonu

V prohlížeči otevřete vývojářské nástroje (F12) a zapněte zobrazení pro zařízení. Nastavte šířku 390 px.
Zkuste scrollovat do strany. Když to jde, máte problém — hledejte prvek, který přetéká.
Projděte stránku a zkuste trefit každé tlačítko palcem, ne myší. Na telefonu, ne v simulaci.
Vyplňte vlastní formulář na telefonu až do konce. Tohle většina majitelů webu nikdy neudělala.
Zkuste to na datech, ne na Wi-Fi, a nejlépe někde, kde není plný signál.

Poslední bod souvisí s tím, proč se rychlost počítá v penězích — na mobilních datech se rozdíl mezi dobrým a špatným webem znásobí.

Mobilní zobrazení webu Sakura Bowl — Sakura Bowl na telefonu. Rozvržení se nezmenšilo — složilo se pod sebe a ovládací prvky zůstaly dost velké na palec. Projekt v portfoliu.

Responzivitu nekontroluju tažením okna na počítači. Vezmu telefon, postavím se a projdu web jednou rukou. Půlku chyb, co takhle najdu, by zmenšené okno nikdy neukázalo — třeba že se na odeslání formuláře nedá dosáhnout palcem.
Marian Bendák

Co je dneska samozřejmost

Pár věcí, které byly před lety téma a dnes už se o nich nediskutuje:

Samostatná mobilní verze na vlastní adrese se nedělá. Jeden web, který se přizpůsobuje, je levnější i spolehlivější.
Mobile-first jako postup návrhu — kreslí se nejdřív telefon. Nutí to rozhodnout, co je opravdu důležité, protože se víc věcí nevejde.
Tablet není samostatný případ. Když web funguje na 390 px a na širokém monitoru, mezi tím si poradí sám.

Jak tohle vypadá na hotových projektech, je vidět v portfoliu. Co rozhoduje o ceně takového webu, rozebírám zvlášť.

Co s tím dál

Udělejte si těch pět testů výš — zaberou čtvrt hodiny a většinou vyplave jedna konkrétní věc, která stojí za opravu. Víc takových kontrol mám v dvacetiminutovém auditu.

Jestli vám z toho vyjde, že je potřeba zasáhnout hlouběji, projdeme to spolu na konzultaci zdarma.