Responsivní popisky odkazů

Při šetření místa na malých obrazovkách může být nevyhnutelné řešit zmenšení prvků jako jsou tlačítka, odkazy nebo položky v menu.

Zmenšení velikosti

Jako první se nabízí zmenšit velikost textu pomocí font-size.

Problém tohoto postupu je, že malé písmo bude… malé.

Kromě horší čitelnosti bude malý odkaz i špatně trefitelný prstem na dotykovém displeji.

Docela populární řešení této situace je používání tlačítek s ikonkou doplněných malým popiskem:

  1. Plocha zůstane rozumně velká.
  2. Význam tlačítka jde pochopit jen ze symbolu ikony.

Tento koncept používá třeba Twitter:

Různé délky textu

Oříznutí textu

Asi nejsnazší možnost je odkazu/tlačítku nastavit maximální rozměry a zbytek nekompromisně oříznout. Díky text-overflow: ellipsis jde automaticky doplnit na konec trojtečku.

Kdo bude přistižen, bude mu ustřižen.

Bohužel v takovém případě může utrpět srozumitelnost. Zvlášť u dotykových zařízení je komplikované umístit plný text popisku do atributu title, protože se k němu uživatelé nejspíš nedostanou.

Jiné texty

Jiná možnost je v závislosti na šířce viewportu (např. podle @media pravidel) měnit varianty popisků.

  • Na velkém monitoru tak zobrazit například Přidat nový fytopuf,
  • na menším jen Přidat fytopuf
  • a na nejmenší obrazovce jen Nový.

Jak na to?

Duplicitní odkazy

Asi nejsnazší je odkazy/tlačítka zkrátka zduplikovat:

<a href="akce" class="desktop">
  Přidat nový fytopuf
</a>
<a href="akce" class="mobile">
  Nový
</a>

A podle @media určit, která z variant se má zobrazovat:

.mobile {display: none}
@media (max-width: 50em) {
  .mobile {display: inline}
  .desktop {display: none}
}

Toto řešení není úplně ideální pro vyhledávače nebo hlasové čtečky, které mohou odkaz zaznamenat dvakrát.

Nabízí se tak pro informačně chudší obsah použít atribut aria-hidden:

<a href="akce" class="mobile" aria-hidden="true">
  Nový
</a>

Obalení slov

V některých případech může stačit řešení, kdy se některá slova popisku obalí <span>em a na mobilu skryjí:

<a href="akce">
  Přidat<span class="desktop"> nový fytopuf</span>
</a>

Na mobilech se potom skryje řetězec „ nový fytopuf“:

@media (max-width: 50em) {
  .desktop {display: none}
}

Toto řešení není moc universální – spoléhá na to, že v úsporném popisku bude slovní spojení, které je i v tom dlouhém pro desktop.

Další problém nejspíš nastane v případě vícejazyčného webu, kdy bude muset být text překladu rozdělen na dvě části nebo používat zástupné znaky pro doplnění HTML značek:

"Přidat %s nový fytopuf %s", "<span class='desktop'>", "</span>"

Text v atributu

Relativně výhodné tak může být umístit různé popisky do data-* atributů a pomocí :before/:after je vyvolat díky vlastnosti content:

<a href="akce" class="button" data-title="Nový">
  <span>Přidat nový fytopuf</span>
</a>

Popisek pro různé šířky se umístí do vlastního data-* atributu, plné znění popisku se obalí <span>em, aby šel dlouhý obsah skrýt, a zbytek zařídí CSS:

@media (max-width: 50em) {
  .button:after {
    content:attr(data-title);
  }
  .button span {
    display: none;
  }
}

Podpora v prohlížečích je limitována od IE 9 kvůli media queries a od IE 8 kvůli :before.

Samostatná živá ukázka

Různé překlady

Celou situaci ještě komplikují různé jazykové verse, kvůli kterým je prakticky nemožné spoléhat na nějakou šířku textu.

Příklad délky pozvánek k události na Facebooku v němčině a angličtině:

Různé délky textu

Dobrý poměr universálnosti, srozumitelnosti a pracnosti tak nabízí používání ikonek a oříznutí textu.

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ářů ↓

Proč nepoužívat hamburger menu

Proč hamburger menu nefunguje

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

Odkaz pro poslání SMS

Odkaz pro předvyplnění SMS

Jak dát na stránku odkaz, který na mobilech předvyplní číslo a text SMS.

Meta tag viewport

Značka <meta name=viewport>

K čemu používat <meta> tag name=viewport.

Responsivní web

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

Responsivní tabulky

Responsivní tabulky

Co udělat s tabulkami, aby se rozumně zobrazovaly na mobilech/tabletech.

Komentáře