Plocha odkazu

Častým nedostatkem na webových stránkách je malá plocha odkazu. Zvlášť problematické je to na dotykových zařízeních s menšími displeji, kdy je problém malý odkaz prstem trefit.

V řadě případů přitom jde plochu odkazu zvětšit prostým využitím prázdného místa.

Budeme-li mít například následující menu:

  • První odkaz
  • Druhý delší odkaz na více řádků
  • Odkaz
  • Bylo by lepší, kdyby odkazy klikaly po celé šířce, často k tomu stačí jen přidat display: block.

  • První odkaz
  • Druhý delší odkaz na více řádků
  • Odkaz
  • Klikněte zde

    Dále nedostatečnou plochou trpí prosté odkazy typu:

    Pro jako zobrazení klikněte zde.

    Zvětšit klikací plochu jde snadno uvedením výzvy k akci:

    Kromě zvětšení plochy je to výhodné i pro uživatele, protože když se při rychlém pročítání stránky zastaví na odkazu jakožto výrazném prvku, rychle pochopí jeho význam (nemusí číst text okolo).

    Obzvlášť důležitý odkaz je rozumné ještě zvýraznit odlišným stylem.

    Jako zobrazit

    Stránkování

    Níže uvedené stránkování bude nejspíš velmi nepohodlné.

    1 2 3 4 5

    Šlo by lehce vylepšit přidáním vycpávky (paddingu):

    1 2 3 4 5

    Zrovna v případě stránkování se ale dá celý problém často řešit úplně jinak a lépe:

    Příliš velká plocha

    Opačným problémem je naopak příliš velká klikací plocha. Uživatelé používající pro ovládání myš si ji potřebují někam odložit – mít kursor v části stránky, která nic nedělá. Hodí se to třeba při přepínání mezi nemaximalisovanými okny nebo pro použití kontextové nabídky.

    Typickým (většinou) špatným příkladem je výpis témat v diskusním fóru, kde „klikají“ celé řádky.

    Pro uživatele dotykových zařízeních to většinou problém nebývá.

    Odstupy od odkazů

    Co je naopak zásadní problém některých responsivních webů na dotykových zařízeních je nedostatečný prostor mezi jednotlivými odkazy. V kombinaci s malou plochou to může totálně znemožnit pohodlné trefení se na požadované místo.

    Testování

    Google při testování stránek, jestli se hodí pro mobilní zařízení, posuzuje jako jednu z věcí i právě velikost a rozestupy mezi odkazy. Úspěšné stránky potom označuje jako „mobile-friendly“.

    Mobile-Friendly Test

    To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

    Sledujte:

     

    Připomínky mi pište do komentářů ↓

    Lepší podtržení odkazu

    Lepší podtržení odkazu

    Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

    Proč nepoužívat hamburger menu

    Proč hamburger menu nefunguje

    Hamburger menu je oblíbený postup řešení responsivní navigace. Proč se mu vyhnout.

    Tlačítko na webu

    Tlačítko na webu

    Jaké HTML značky používat pro tlačítka na webových stránkách a aplikacích.

    Odkazy ze starých článků

    Odkazy ze starých článků

    Do starých článků je dobré doplňovat odkazy na související nový obsah.

    Komentáře