Vytvoření posuvníku — HTML struktura a CSS
Krok za krokem vysvětlení HTML značek a CSS stylů. Naučíte se, jak strukturovat div prvky pro posuvník a správně je nastylovat.
Jak zajistit, aby posuvník fungoval perfektně na malých obrazovkách. Touch eventy, velikost grip handleru a citlivost.
Posuvník před a po je skvělý prvek pro porovnávání obrázků. Jenže na mobilu se chová úplně jinak než na počítači. Dotykový vstup má své specifika — kurzor tu není, prsty jsou širší než myš a očekávání uživatelů jsou jiná.
Když se s tím nepočítá, uživatel se frustruje. Nedokáže přesně ovládat posuvník, chytí jej mimo grip handler, nebo se mu omylem spustí scroll stránky. Výsledek? Odejde na konkurenci. Proto je správná optimalizace pro dotek tak zásadní.
To je první věc, kterou musíte pochopit. Na mobilu se nepoužívají
mousemove
a
mousedown
. Těch eventů prostě nejsou.
Místo toho se používají
touchstart
,
touchmove
a
touchend
. Každý z nich obsahuje objekt
touches
, který vám řekne přesnou pozici prstu na obrazovce.
Ale pozor — nesmíte je prostě nahradit. Touch eventy se chovají jinak. Když uživatel položí prst a hned jej zdvihne, dostanete
touchstart
a
touchend
. Nemusíte ani jeden
touchmove
. To je důležité pro správné ošetření.
Lidský prst má průměr okolo 10-15 milimetrů. To se na mobilu s hustotou pixelů 326 ppi (iPhone) nebo 420 ppi (Android) rovná přibližně 50-80 pixelům. Když si vezměte, že Apple a Google doporučují minimálně 44×44 pixelů, vidíte, že to není moc.
Grip handler by měl být alespoň 60 pixelů vysoký a 40 pixelů široký. Lépe 80×50. Uživatel potom chytí posuvník bez problémů, i když spěchá nebo jede v tramvaji. Zkušenost je pak mnohem příjemnější.
Navíc můžete handler vizuálně zvýraznit — změnit barvu, přidat stín nebo jemný zoom efekt, když se dotkne. To uživateli řekne: „Tady chyť a táhni.” Funguje to.
Tento průvodce poskytuje vzdělávací informace o optimalizaci posuvníků pro dotykové zařízení. Konkrétní implementace se bude lišit v závislosti na vašem konkrétním projektu a cílové skupině uživatelů. Vždy testujte na reálných zařízeních, abyste zajistili nejlepší uživatelský zážitek.
Weby mají jednu zásadní vlastnost — jsou scrollovatelné. Když na mobilu položíte prst a táhnete, prohlížeč se snaží zjistit, jestli chcete scrollovat stránku nebo interagovat s prvkem. To trvá.
Právě proto existuje CSS vlastnost
touch-action
. Když na grip handler napíšete
touch-action: none;
, řeknete prohlížeči: „Přestaň čekat. To je čistě můj prvek, scroll se tady neděje.” Výsledek je okamžitý pohyb bez jakéhokoliv zpoždění.
Bez toho máte na mobilech typicky 100-150ms zpoždění. S tím je interakce hladká a přímo odpovídá pohybu prstu. Rozdíl je obrovský.
Nahraďte mousemove a mousedown touch eventy. Detekujte pozici z objektu touches.
Minimálně 60×50 pixelů. Čím větší, tím lépe se chytá. Uživatelé budou vděční.
CSS vlastnost touch-action: none odstraní zpoždění. Interakce bude okamžitá a hladká.
Emulátor není dost. Vezměte si iPhone a Android. Cítíte rozdíl? Já ano.
Optimalizace pro dotyk není jen o technologii. Je to o respektu k uživateli. Když posuvník funguje hladce a přesně, uživatel si jej užije. Bude se těšit, až jej opět vidí. A to je přesně to, čeho chceme dosáhnout.