Datum koncertu ukryté v široké tabulce se na telefonu snadno přehlédne. Čtenář vidí první sloupec, zbytek zůstává mimo obrazovku a nic nenaznačuje, že má posunout tabulku do strany. Mobilní web přitom nemusí ohromovat vzhledem. Potřebuje člověku umožnit přečíst informaci, otevřít související text a vrátit se zpátky bez zápasu s rozvržením.
U hudebního blogu na tom záleží zvlášť. Ke staršímu textu o české industriální scéně se dá dostat přes zprávu, vyhledávání i archiv. Také na malé obrazovce musí být jasné, o jaké kapele a období se píše a odkud pochází uvedené tvrzení. Pokud je nutné každý odstavec přibližovat, není chyba v čtenářově pozornosti, ale ve stránce.
Mobilní přívětivost není zmenšená verze počítačového webu
Telefon má úzkou obrazovku, ovládá se prstem a lidé na něm často čtou po chvilkách: cestou, před koncertem nebo při rychlém ověřování názvu nahrávky. Stránka s tím má počítat. Text se přizpůsobí šířce displeje, zůstane čitelný bez přibližování a na ovládací prvky se dá pohodlně klepnout.
Řešením není schovat polovinu článku ani založit samostatný mobilní web s menším množstvím informací. Podstatné údaje mají zůstat dostupné na každém zařízení; mění se jejich uspořádání. Tři sloupce se mohou složit pod sebe, doplňující informace přesunout za hlavní text a navigace zabrat méně místa. V archivu nahrávek mohou na počítači stát obaly vedle popisů, zatímco na telefonu se názvy, roky a popisy čtou lépe v samostatných blocích.
Čitelnost rozhoduje dřív než výtvarný dojem
Temné barvy a strohá typografie se k industriální hudbě hodí. Na displeji ale rychle vyjde najevo slabý kontrast: šedý text na černém pozadí může na monitoru působit jemně, venku na telefonu však splývá. Dekorativní písmo unese nadpis nebo grafický motiv; delší výklad o zvuku, textech či místní scéně potřebuje čitelnější řez.
Záleží i na šířce řádku. Pevná šířka určená pro počítač nutí čtenáře posouvat text vodorovně. Text natlačený až k okrajům displeje zase ztěžuje hledání začátku dalšího řádku. Pomáhají přiměřené okraje, čitelná velikost písma, prostor mezi řádky a odstavce členěné podle myšlenek, ne mechanicky po každé větě.
Co má fungovat bez přibližování
- Hlavní text: odstavce, popisky i poznámky ke zdrojům mají zůstat čitelné při výchozím zobrazení.
- Odkazy: sousední cíle potřebují dost místa, aby čtenář omylem neotevřel jiný článek.
- Nadpisy: mají pomáhat s orientací, ne zabrat celou obrazovku několika obřími řádky.
- Obrázky: obal nahrávky či archivní materiál se má vejít do šířky stránky bez oříznutí důležité části.
Čitelnost se prověří i ve chvíli, kdy má někdo v telefonu nastavené větší písmo nebo si stránku sám zvětší. Rozvržení by se nemělo rozpadnout a plovoucí panel nesmí zakrýt odstavec. Tady se pozná rozdíl mezi pružnou stránkou a počítačovým webem násilně vměstnaným do mobilu.
Orientace v archivu na malém displeji
Čtenář kulturního blogu často nezačíná na úvodní stránce. Otevře starší recenzi a až potom zjišťuje, kdo ji napsal, kdy vznikla a kam patří v archivu. Na telefonu proto potřebuje hned najít název článku, datum tam, kde ovlivňuje platnost informací, a cestu k dalším souvisejícím textům.
Rozbalovací nabídka šetří místo, neměla by ale být jedinou cestou k základním rubrikám. Ikona bez popisu nemusí být srozumitelná a dlouhý seznam drobných položek se špatně ovládá. Při hledání textů o proměnách lokální scény poslouží několik jasně pojmenovaných rubrik lépe než efektní nabídka, kterou je třeba opakovaně rozklikávat.
Podobné je to s odkazy v článku. Když jsou součástí věty, čtenář ví, kam povedou. Pokud text pojednává také o tom, jak kapela nakládá se soubory pro web a tisk, může odkázat na návod, jak udržet pořádek v digitálních materiálech kapely. To je na telefonu užitečnější než shluk neurčitých položek pod článkem.
Rychlost ovlivňuje i porozumění
Pomalé načítání nebo přeskakující stránka nenarušují jen pohodlí. Když se nad rozečteným odstavcem dodatečně objeví velký obrázek, věta ujede z obrazovky. Pozdě načtená reklama nebo navigace může posunout odkaz právě ve chvíli, kdy na něj chce čtenář klepnout. Připojení na ulici, ve vlaku či uvnitř klubu navíc nemusí být stabilní.
Hudební web potřebuje obrazový materiál: obaly, plakáty, fotografie pódia i detaily vydání. Není však důvod posílat každému návštěvníkovi soubor v rozlišení pro tisk. Vyplatí se připravit vhodné velikosti, obrázky komprimovat bez zjevné ztráty kvality a vyhradit jim místo v rozvržení ještě před načtením. Méně důležité obrázky v dlouhém článku se mohou načíst až ve chvíli, kdy se k nim čtenář blíží.
Vložené přehrávače a videa mohou výklad o hudbě doplnit, ve větším počtu ale zpomalí stránku a zaplní displej. U nahrávky má být z textu patrné, proč je pro daný odstavec důležitá a co z výkladu pochopí i ten, kdo si ji právě nemůže pustit. Automatické přehrávání by mu tuhle volbu vzalo.
Dotykové ovládání mění drobné detaily
Na počítači lze přesně mířit na malou ikonu nebo najetím myši vyvolat skrytou nabídku. Na telefonu nic takového nefunguje stejně. Pokračování článku, filtr archivu i ovládání přehrávače musí reagovat na klepnutí; zároveň má být zřejmé, že jde o ovládací prvek.
Vedle dalších tlačítek a u okrajů displeje se snadno klepne vedle. Nestačí proto zvětšit samotný nápis: důležitá je celá dotyková plocha a mezery kolem ní. Jsou-li v archivu natěsnané volby jednotlivých roků vydání, opakované omyly mohou čtenáře odradit ještě před otevřením textu.
Stránka má obstát i při ovládání jednou rukou, po otočení telefonu nebo po návratu z jiné aplikace. Otevření nabídky by nemělo ztratit rozečtené místo. A okno, které zakryje celý článek a má sotva viditelné zavírací tlačítko, překáží zvlášť tehdy, když si člověk přišel ověřit jediný údaj.
Přístupnost pomáhá v různých situacích
Mobilně přívětivý a přístupný web nejsou totéž, řada úprav ale pomáhá v obou případech. Srozumitelné nadpisy usnadní zběžné procházení článku i orientaci pomocí čtečky obrazovky. Textový popis obrázku může sdělit, co je na plakátu podstatné, když se obrázek nenačte nebo ho návštěvník nevidí. Dostatečný kontrast pomůže lidem se zrakovým omezením i těm, kdo čtou venku na slunci.
Informace by neměla záviset jen na barvě. Pokud archiv rozlišuje živá vystoupení červeně a studiové nahrávky šedě, potřebuje také slovní označení. A u fotografie starého koncertního plakátu nelze spoléhat na to, že každý na telefonu přečte drobné písmo. Podstatné údaje patří i do běžného textu stránky.
Jak mobilní podobu ověřit bez rozsáhlého projektu
Náhled v editoru pomůže, skutečný telefon však ukáže i odlesky, nepřesné klepnutí nebo chování při pomalejším připojení. Nestačí zkontrolovat úvodní stránku. Starší článek s obrázky, archivní rozcestník a stránka s přehrávačem mohou mít každý jinou závadu.
- Otevřete článek na telefonu ve výchozím měřítku a přečtěte dva delší odstavce bez přibližování.
- Najděte konkrétní údaj, třeba rok vydání, a přejděte na související text.
- Otočte telefon, zvětšete písmo a ověřte, zda něco nezakrývá obsah.
- Projděte obrázky, nabídku a vložená média; sledujte vodorovné posouvání i nečekané přesuny textu.
- Pokud můžete, vyzkoušejte stejný postup také na starším nebo menším telefonu.
Zjištění si zapište jako pozorovatelný problém, ne jako dojem. „U plakátu musím posouvat celou stránku doprava“ se dá opravit snáz než „mobilní verze působí špatně“. Opakuje-li se závada ve více článcích, bývá lepší upravit společnou šablonu než měnit každý příspěvek zvlášť.
Začít můžete jedním starším článkem s obalem nahrávky a delším seznamem skladeb. Na telefonu zkontrolujte, zda obal nepřesahuje okraj, názvy skladeb se nepřekrývají s dalšími údaji a seznam zůstává čitelný i po zvětšení písma. Taková zkouška ukáže, co opravit, než se pustíte do celého archivu.
