Mobilní web design

Sedm z deseti návštěv na webech, které stavím, přijde z telefonu. Přesto většina firemních webů pořád vzniká na velkém monitoru a mobil dostane až to, co zbude z rozpočtu a z trpělivosti.

Mobil není zmenšená verze desktopu

Když otevřu analytiku libovolného firemního webu, který mi klient pošle k auditu, poměr je skoro vždy stejný: 65 až 78 procent návštěv z telefonu, zbytek desktop a tablet. Přesto ten web někdo navrhoval na velkém monitoru a mobilní verzi dořešil zúžením sloupců. Výsledek je web, který na mobilu technicky funguje, ale nedá se používat. Rozdíl mezi tím dvojím se pozná až na počtu odeslaných poptávek.

Zmenšená verze desktopu má typické znaky. Hlavní nadpis přeteče na pět řádků, protože byl napsaný pro šířku 1440 pixelů. Tabulka s parametry se zalomí tak, že se čte jen vodorovným posouváním. Menu se schová do hamburgeru včetně telefonního čísla, které je přitom na mobilu nejdůležitější prvek celé stránky. A patička s kontaktem je po dvanácti swipech někde dole ve tmě.

Návrh pro mobil začíná opačně. Nejdřív určím, co má návštěvník na malé obrazovce udělat, a tomu podřídím pořadí obsahu. Pak teprve řeším, jak stejný obsah roztáhnout do šířky. Tenhle postup zabere zhruba stejně času jako ten opačný, ale odpadne u něj celá fáze, kdy se hotový desktop bolestivě mačká do 390 pixelů a při každé úpravě se něco jiného rozbije.

Dosah palce rozhoduje o tom, kam patří tlačítko

Telefon drží většina lidí jednou rukou a ovládá ho palcem. Palec pohodlně dosáhne na spodní dvě třetiny obrazovky, na horní okraj se dostane jen překlopením telefonu v dlani. Z toho plyne jednoduché pravidlo: akce, které mají lidé dělat často, patří dolů. Levý horní roh je nejhůř dostupné místo na celém displeji a přesto tam většina webů dává hlavní navigaci.

Prakticky to znamená plovoucí lištu u spodní hrany s tlačítkem Zavolat a Napsat poptávku. Na webech řemeslníků a servisů, kde jsem tuhle lištu nasadil, tvoří kliky z ní 40 až 60 procent všech kontaktů. Není to designový detail, je to hlavní konverzní prvek celého webu. Ostatní tlačítka na stránce pak můžou být klidnější, protože ta lišta jede s návštěvníkem celou dobu.

Velikost dotykové plochy má taky svoje číslo. Minimum je 44 na 44 pixelů, pohodlné je 48 a mezi dvěma sousedními tlačítky chci aspoň 8 pixelů mezery. Nejčastější chyba jsou odkazy v běžícím textu naskládané pod sebou po jednom řádku. Kdo má větší prst nebo jede v tramvaji, trefí se napůl a přistane na úplně jiné stránce, než chtěl.

• Hlavní akce patří do spodní třetiny displeje, ne do horní lišty
• Telefonní číslo nikdy neschovávat do hamburgerového menu
• Dotyková plocha minimálně 44 na 44 pixelů, mezera mezi prvky aspoň 8
• Plovoucí lišta Zavolat a Poptávka u spodní hrany, viditelná pořád
• Formulářová pole na plnou šířku, jedno pod druhým, nikdy dvě vedle sebe
• Odkazy v textu odlišit barvou i podtržením, samotná barva nestačí

Rychlost na LTE, ne v kanceláři s optikou

Web se testuje na tom připojení, na kterém ho lidi doopravdy otevírají. To je často LTE se dvěma čárkami v autě u zákazníka nebo přetížená wifi v kavárně. Cíl, který si dávám, je Largest Contentful Paint do 2,5 sekundy na simulované pomalé 4G. Nad čtyřmi sekundami odchází podle měření zhruba čtvrtina lidí dřív, než se stránka vůbec stihne vykreslit.

Největší zátěž jsou skoro vždy obrázky. Fotka z telefonu má 4 až 8 MB a na web jde tak, jak vylezla z fotoaparátu. Po převodu do WebP nebo AVIF a zmenšení na potřebnou šířku z ní zbude 80 až 200 kB. Na stránce s dvanácti fotkami je to rozdíl mezi šedesáti megabajty a dvěma, tedy mezi třiceti sekundami čekání a dvěma.

Druhý žrout jsou skripty třetích stran. Chat, dva pixely, heatmapa, cookie lišta a widget s recenzemi dohromady snadno přidají 900 kB javascriptu, který blokuje vykreslení. Většinu z toho jde načíst až po prvním vykreslení nebo úplně vyhodit. U měření Pixelu a CAPI, které dělám za 6 900, jde měřicí kód schválně serverovou cestou, aby prohlížeč neplatil výkonem za každou událost.

• LCP do 2,5 sekundy na simulované pomalé 4G, ne na kancelářské optice
• Fotky do WebP nebo AVIF, maximálně 200 kB na kus
• Rozměry obrázků napevno v kódu, aby text neposkakoval při načítání
• Fonty jen dva řezy, s lokálním fallbackem a nastavením display swap
• Skripty třetích stran až po prvním vykreslení, cookie lišta bez blokujícího JS
• Video na mobilu nikdy automaticky, jen náhled s tlačítkem přehrát

Formulář, který jde vyplnit jednou rukou v tramvaji

Poptávkový formulář je nejcitlivější místo mobilního webu a každé pole navíc stojí konverze. Na firemních webech mi funguje trojice jméno, telefon a jedna věta k zakázce. E-mail nechávám dobrovolný, protože kdo píše z telefonu, radši zavolá. Devítipoložkový formulář s adresou, IČO a rozbalovacím seznamem krajů je spolehlivý způsob, jak přijít o dvě třetiny poptávek ještě před odesláním.

Technická stránka rozhoduje o tom, kolik lidí to dopíše. Pole pro telefon musí mít typ tel, aby vyskočila numerická klávesnice. E-mail typ email, aby se nezapínalo velké písmeno na začátku. Atribut autocomplete vyplní jméno a číslo z paměti prohlížeče jedním ťuknutím. Bez těchhle tří věcí trvá vyplnění třikrát déle a část lidí to vzdá už u druhého pole.

Poslední kus je zpětná vazba. Po odeslání musí přijít okamžitá odpověď na obrazovce a do minuty automatický e-mail nebo SMS s potvrzením. Ticho po odeslání je hlavní důvod, proč lidé pošlou stejnou poptávku ještě dvěma konkurentům. Tři kroky s ukazatelem postupu fungují líp než jedna dlouhá stránka, protože první krok vypadá jako otázka, ne jako úřední tiskopis.

Co mobilní verze reálně stojí

Mobilní verze není položka, kterou by šlo objednat zvlášť. U všeho, co stavím, je responzivní chování součástí ceny od začátku, protože oddělit ho znamená dělat stejnou práci dvakrát. Cena se liší podle toho, jestli jde o nový web, nebo o záchranu existujícího, kde se musí respektovat cizí kód a cizí rozhodnutí. Druhá varianta bývá paradoxně dražší než stavba od nuly.

U nového webu od 19 990 je v ceně návrh pro mobil, tablet i desktop, optimalizace obrázků, rychlost a poptávkový formulář s notifikací. Growth System od 39 900 přidává vícekrokové formuláře, napojení na CRM a A/B varianty vstupních stránek. Měření Pixelu a CAPI za 6 900 řeším jako samostatnou položku, protože ho ne každá firma potřebuje hned první měsíc.

Kdo přebírá existující web, měl by počítat s tím, že cena záleží hlavně na kvalitě původního kódu. U webu postaveného na šablonovém systému s dvaceti pluginy bývá levnější postavit nový než opravovat cizí vrstvy, které na sebe nesedí. Proto se vždycky nejdřív podívám do kódu a teprve pak řeknu číslo, nikdy naopak.

Testování na skutečném telefonu, ne v prohlížeči

Zúžené okno prohlížeče na počítači je jenom náhled. Neukáže, jak se chová klávesnice, která zabere polovinu displeje, ani jak vypadá web se zvětšenými systémovými fonty, které má zapnutá spousta lidí nad padesát let. Neukáže ani, jak se web tváří pod jasným sluncem, kde světle šedý text na bílém pozadí zmizí úplně a tlačítko splyne s okolím.

Můj testovací postup je krátký a pokaždé stejný. Otevřu web na starším Androidu, pak na iPhonu, jednou rukou, v poledne venku. Projdu celou cestu od výsledku ve vyhledávači po odeslanou poptávku a měřím čas. Pokud mi to trvá přes devadesát sekund, něco se musí zjednodušit. Pak totéž zkusí někdo, kdo ten web nikdy předtím neviděl.

Kontrolu opakuji po každém zásahu do webu, i po tom zdánlivě neškodném. Přidaný widget s recenzemi umí posunout plovoucí lištu pod ohyb, nová fotka v hlavičce umí zvednout LCP o vteřinu a půl. Proto je hlídání rychlosti součástí měsíční péče, ne jednorázová akce po spuštění. Web se kazí pomalu, nenápadně a bez varování.

• Reálný telefon, ne jen zúžené okno prohlížeče na počítači
• Test jednou rukou, druhá ruka drží tašku nebo klíče
• Kontrola na přímém slunci kvůli kontrastu textu a tlačítek
• Systémové písmo zvětšené na 130 procent, jestli se něco nerozbije
• Celá cesta od vyhledávače po odeslanou poptávku pod 90 sekund
• Opakovat po každé úpravě webu, i po přidání jediného skriptu

Časté otázky

Stačí, když je web responzivní?

Responzivní znamená jen to, že se obsah přizpůsobí šířce displeje. To je minimum, ne cíl. Responzivní web může mít tlačítka o velikosti špendlíkové hlavičky, načítat se osm sekund a mít telefonní číslo schované ve třetí úrovni menu. Rozhodující je, kolik lidí z mobilu dokončí poptávku, ne jestli se sloupce správně zalomily pod sebe.

Vyplatí se dělat samostatnou mobilní verzi na adrese m.domena.cz?

Ne. Oddělená mobilní doména znamená dva weby, dva obsahy a dvojí údržbu, plus stálé problémy s tím, kterou verzi vyhledávač indexuje. Google navíc hodnotí weby podle jejich mobilní verze, takže jedna dobře postavená stránka pro všechna zařízení je jednodušší, levnější a spolehlivější. Samostatné mobilní domény jsou pozůstatek roku 2013.

Jak dlouho trvá opravit existující web pro mobil?

Pokud jde o šablonový web s rozumným kódem, tři až pět pracovních dní: layout, dotykové plochy, komprese fotek, formulář a plovoucí lišta. U starších webů s napečeným kódem a desítkami rozšíření se často vyplatí postavit nový, protože oprava spolyká víc času než stavba od nuly. Nový web dodávám do sedmi dní.