Přejít k navigační liště

Zdroják » Webdesign » Responsivní popisky tlačítek

Responsivní popisky tlačítek

Články Webdesign

Jak na různě velkých obrazovkách měnit popisky odkazů a tlačítek.

Článek původně vyšel na autorově webu Je čas.

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 lze 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.

<p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 15em">Kdo bude přistižen, bude mu ustřižen.</p>

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 univerzá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é verze, 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

Závěr

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

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Roman Sova

Responzivni text neni ale jen o delce textu, ale i jeho velikosti. Male displeje pozorujeme z mensi vzdalenosti a taky proto maji vetsi dpi.
Doporucuju pouzivat napr. font-size: calc(100vw / 50) a omezit maximalni a maximalni velikost pomoci @media.

Dominik Geršák

Osobne by som zdoraznil, ze toto je vec designu, ktory by mal byt nielen pekny, ale aj ucelny a mal by zodpovedat obsahu stranky. Myslim tym to, ze ak designer doda krasne ikonky s kratkym textom, ale viem, ze realne pri tych ikonkach budu texty dlhe, tak mi taky design za vela nestoji. Jednoducho treba vopred mysliet na to, co kde bude a menu navrhnut podla toho.

Ak su dlhe texty, najjednoduchsie je zrobit napr. rozbalovacie menu a nasledne na kazdy riadok (pripadne viac riadkov) nechat 1 link. Kym menu nieje rozbalene, kludne mozu byt v hlavicke napr. len ikonky bez akehokolvek textu.
Alebo urobit poriadne na mieru responzivny design, nebat sa veci „poprehadzovat“ tak, aby sa to tam voslo. Obecne nemam dobre skusenosti s tym, ze sa odrezuje cast textu ci meni velkost fontu, pretoze to vzdy zoberie prilis vela casu kym sa vychyta a potom staci ze pride 1 este dlhsi popisok a celu robotu treba zrobit na novo.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.