Zhruba polovina všech přístupů na internet se odehrává skrze mobilní zařízení. Je tak vcelku pochopitelné, že i řada samosprávných celků se při zadávání vývoje či aktualizace jejich webů na mobily také soustředí.
Rozvržení obsahu na telefonu a na počítači se už víc lišit nemůže (chytré hodinky raději necháme stranou úplně). Protože lidé zpravidla přecházejí z jednoho zařízení na druhé, musí být řešení pro oba displeje co nejpodobnější.
Mobil jako dáma – má přednost
Když se začíná s mobilem, pro desktop se pak musí zpravidla nějaké prvky přidávat. Pokud je pro zadavatele důležité mít obsah 1:1, pak riskuje jen to, že stránky na velkém monitoru budou vypadat poněkud chudě, což se dá snadno vyřešit jednou či dvěma fotkami.
Naproti tomu, když se začíná rozvržením pro full HD monitor, bude se obsah pro mobil muset osekat, nebo opravdu dobře přeskládat. Pokud se to nepodaří, může se stát, že stránka bude na mobilu nepřehledná nebo příliš dlouhá a bude se na dotykovém displeji špatně ovládat.
Z hlediska designu je tedy výhodnější začít mobilním rozvržením. V čem je ale háček? V ústupcích, které se musejí udělat nejpozději ve chvíli, kdy se začne kreslit hrubý návrh nové stránky či webu (wireframe). Mobil má totiž řadu limitů:
- tlačítka musí být dostatečně velká pro dotykové ovládání (dotyková plocha prstu má tvar kolečka o průměru 1 cm) a musí mít kolem sebe prostor,
- nelze si pomoci ‚hover efektem‘ (= textem zobrazeným na počítači po najetí kurzoru myši, bez kliknutí),
- omezený prostor pro navigaci, různá menu a lišty,
- rozsah je nutno držet zkrátka, aby uživatel neskroloval tak dlouho, že zapomene, kde vlastně je,
- mobily se také častěji používají v nepříhodných podmínkách (MHD, prudké slunce) a design by to měl zohlednit.
Proto je příprava pro mobilní zobrazení náročnější než pro desktop. Na druhou stranu, když se to podaří, je vyhráno. Na počítači už to bude jednodušší.
Responzivita v grafice
Responzivní znamená reagující. Toto slovo je dnes výhradně spojené s rozložením webových stránek, které reaguje na výstupní zařízení a přizpůsobí se mu. Převod může být více či méně automatický, záleží hlavně na tom, kolik je obec ochotna investovat do uživatelského zážitku na různých zařízeních.
Podívejme se na dva příklady, kdy se může jít nad rámec běžné responzivity:
- Pokud se už při výběru nebo pořizování fotek myslí na to, kde budou použité, je to plusový bod. Dobrá fotka pro web má jeden hlavní motiv a kolem něj prostředí, které dodává kontext a hlavní motiv v něm ukotvuje. Cílem je, aby byl motiv dostatečně zřetelný na velkém monitoru i na mobilu. Kontext v menších formátech je často stejně důležitý jako motiv sám.
Ukázka univerzálně použitelné fotografie: Hlavním motivem je pohled na centrum města, kontext dodává signifikantní věž Státního hradu a zámku Český Krumlov. Původní fotka je na šířku, na velkém monitoru tedy dobře vyzní. Zároveň fotograf pojal kompozici jako celek a věž tedy není na displeji nepřirozeně velká. Na mobilu působí výřez přirozeně, stále je vidět dostatek kontextu, aby bylo na první pohled jasné, o jaké místo se jedná.
- Loga, ikony a ilustrace nejsou univerzálně použitelné ve všech velikostech. Jde hlavně o míru prokreslení a množství detailů. Řešením je nechat rozkreslit jeden motiv alespoň ve dvou verzích:
- miniaturu v malé velikosti,
- prokreslenou verzi pro zobrazení ve větší velikosti.
Když se vše připraví s citem, budou obě varianty na první pohled příbuzné. V logo designu se velikostní řady připravují běžně, u ikon a ilustrací se s responzivitou lze setkat jen výjimečně. Náklady na přípravu jsou přitom zanedbatelné.
Na závěr trocha inspirace:
Milan Průcha
Jednatel ve firmě PIXMAN s.r.o.
Firma PIXMAN se zabývá vývojem webových stránek a aplikací. Se svými 7 projektovými týmy se starají o blaho klientů z řad korporací a samospráv. Tvoří ucelené digitální prezentace s cílem 100 % dostupnosti pro čtenáře a maximálního komfortu pro správce obsahu.