Zdroj: archiv autora Zdroj: archiv autora

Responzivita v praxi aneb jak na písmo, aby se četlo jak na monitoru, tak na smartphonu samo? Díl III.

V závěrečném dílu seriálu o přístupné typografii nakoukneme do zákulisí zobrazování textu na webových stránkách: jak se může responzivita designu projevit u typografie či proč je důležité korektní HTML tagování.

Responzivní design

Při návrhu webových stránek a jiných digitálních médií klademe důraz zejména na responzivitu designu, tj. jeho schopnost přizpůsobit se různým zobrazovacím zařízením různých velikostí. Stránka zobrazená na 27palcovém monitoru bude jistě vyžadovat jinou velikost písma než totožná stránka na displeji smartphonu — na každé ze zařízení totiž návštěvník hledí z jiné vzdálenosti. Obecně tak platí, že čím větší je obrazovka zařízení, tím větší by mělo být i písmo. Či jinak: relativní (vnímaná) velikost písma by měla být přibližně stejná, díváme-li se na různá zařízení z pro ně obvyklé vzdálenosti.

Responzivita designu: relativní (vnímaná) velikost písma by měla být přibližně stejná, díváme-li se na různá zařízení z pro ně obvyklé vzdálenosti. Zdroj: archiv autoraResponzivita designu: relativní (vnímaná) velikost písma by měla být přibližně stejná, díváme-li se na různá zařízení z pro ně obvyklé vzdálenosti. Zdroj: archiv autora

Absolutní velikost písma na 27palcovém monitoru by tak měla být větší, než u smartphonu. Zdroj: archiv autoraAbsolutní velikost písma na 27palcovém monitoru by tak měla být větší, než u smartphonu. Zdroj: archiv autora

Často opomíjeným aspektem je pak i délka řádku — je-li řádek příliš dlouhý (nad cca 80 znaků), raději zvolme vícesloupcovou sazbu. Responzivní design nám umožní počet sloupců i dynamicky přizpůsobovat velikosti okna prohlížeče.

Hierarchie textu

Zvláště u webových stránek bychom měli klást velký důraz na korektní hierarchizaci textu, tedy označení logických celků textu adekvátními HTML tagy. To je důležité zejména pro zobrazování stránek na zařízeních s omezenou schopností interpretace vizuálních aspektů stránky (např. čtečky pro nevidomé). Hlavní nadpis (H1) by tak měl odpovídat nejdůležitějšímu nadpisu na stránce a ve většině případů tak být na každé stránce pouze jednou (výjimku budou tvořit stránky, na kterých je v nejvyšší úrovni několik rovnocenných celků, každý se svým hlavním nadpisem). Další úrovně nadpisů pak označujme systematicky tagy H2, H3 apod. Kde je to možné, používejme specifické identifikátory elementů (p, header, footer, …) místo těch obecných (div). Dobrý obrázek o korektním členění získáme, pokud si necháme zobrazit stránku s vypnutým stylováním (tedy bez CSS) — stránka by měla zůstat přehledná a logicky uspořádaná.

Porovnání zobrazení webových stránek projektu Blind Friendly se zapnutými (vlevo) a vypnutými (vpravo) styly. Zdroj: blind friendly webPorovnání zobrazení webových stránek projektu Blind Friendly se zapnutými (vlevo) a vypnutými (vpravo) styly. Zdroj: blind friendly web

Důležitost testování

Ať již upravujeme text pro použití v tištěném či elektronickém médiu, nejpodstatnější bude ověřování našich domněnek v praxi. Nechme si tak časovou rezervu na dostatečné testování typografické úpravy, zvláště zástupci našich cílových skupin. U elektronických médií je potřeba otestovat zobrazení na co největším množství různých zařízení s různými operačními systémy (alespoň však Mac OS X, Windows, iOS, AndroidWindows Phone) a v různých prohlížečích (Safari, Firefox, Chrome, Opera, Internet Explorer, …). Nezapomínejme též na slabozraké a nevidomé návštěvníky internetových stránek – zde nám mohou dobře posloužit informace ze stránek projektu Blind Friendly. Jako všude jinde i zde totiž platí, že jak se do lesa volá, tak se z něj i ozývá.

Galerie

Další články