Test mobilní verze webu: viewport, použitelnost a výkon

Tři vrstvy mobilního problému

„Web na mobilu nefunguje“ znamená jednu ze tří různých věcí:

• Nepřizpůsobí se displeji – telefon dostane zmenšený desktop a návštěvník přibližuje a posouvá.
• Nedá se pohodlně používat – malá tlačítka, špatně čitelný text, odkazy k nerozeznání od okolí.
• Pomalu se načítá – to je samostatná disciplína se samostatným měřením.

Každá vrstva má jinou příčinu i nápravu, proto je náš audit měří odděleně – a proto nevěřte žádnému „mobile-friendly“ razítku, které je slije do jednoho ano/ne.

Vrstva první: viewport

Základem je jeden řádek v kódu stránky – mobilní viewport. Říká prohlížeči, aby web rozložil podle skutečné šířky zařízení, a ne jako zmenšené desktopové plátno. Bez něj vypadá web na telefonu jako miniatura, kterou musíte roztahovat prsty.

Není to exotická chyba: z 59 webů, které jsme změřili, nemělo mobilní viewport 11 – telefon u nich dostává desktopové rozložení. A pozor i na opačný detail: viewport s napevno zadanou šířkou je stejná závada v jiném převleku. Náš audit rozezná obojí.

Vrstva druhá: responzivní chování

Samotný viewport layout nevyřeší – responzivní design znamená, že se obsah skládá podle dostupného prostoru. Neřídí se seznamem modelů telefonů, ale okamžikem, kdy se obsah přestává skládat srozumitelně: široká tabulka, obrázek s pevnou šířkou nebo dlouhé české slovo umí vytvořit vodorovné posouvání i na webu, který jinak responzivní je. Testujte proto úzký i široký telefon, otočení displeje a skutečný obsah – ne jen jeden screenshot.

Vrstva třetí: ovládání dotykem a čitelnost

Na telefonu rozhodují detaily, které na počítači nebolí:

• dost velká tlačítka a odkazy s rozestupy, aby se daly trefit palcem,
• text s dostatečným kontrastem vůči pozadí,
• popisky u interaktivních prvků, aby bylo jasné, co dělají,
• odkazy rozpoznatelné i jinak než jen odstínem barvy,
• možnost stránku přiblížit – někteří to potřebují vždycky.

Část z toho audit najde automaticky a ukáže konkrétní prvek („tlačítko je 37 × 21 bodů“). Poctivá hranice: automatické kontroly jsou indikátory k opravě, ne úplné posouzení každého formuláře a scénáře – a nejsou to WCAG certifikace.

Vrstva čtvrtá: mobilní výkon

„Vejde se na displej“ a „rychle se načte“ jsou dvě různé vlastnosti. Rychlost měříme zvlášť – laboratorní simulací pomalého telefonu a tam, kde existují, i daty skutečných návštěvníků, která mají přednost. V reportu proto rychlost najdete v kategorii Rychlost a výkon, ne schovanou v mobilní známce dvakrát.

Co automatický test nenahradí

Pět minut s vlastním telefonem odhalí to, co žádný stroj:

1. otevřete menu a zkuste všechny jeho položky,
2. vyplňte a odešlete formulář – i s klávesnicí na půl displeje,
3. otočte displej na šířku,
4. dokončete hlavní úlohu webu: objednávku, rezervaci, telefonát,
5. sledujte, jestli obsah nikde neujíždí do stran.

Audit je triáž: rychle a měřitelně ukáže, kde jsou závady. Ruční test hlavních úloh na skutečném zařízení je finální kontrola – tu za Vás neudělá nikdo.

Jak číst výsledek auditu

Čtěte ho v pořadí vrstev: nejdřív viewport (bez něj je vše ostatní vedlejší), pak konkrétní nálezy ovládání a čitelnosti, nakonec mobilní výkon ve vlastní kategorii. A poslední poctivost: zelené řádky znamenají, že změřené kontroly prošly – ne že se web chová bezchybně na každém telefonu světa.

Časté dotazy