Proč web přizpůsobovat?
Snadná odpověď – aby nám ze stránek neutíkali návštěvníci – potenciální zákazníci. Společnost zároveň ukazuje, jak pečuje o pohodlí svých stávajících i budoucích klientů. Také je to známka přístupu k aktuálním trendům a schopnosti zajistit si kvalitní řešení prezentace a prodeje na internetu. Náročnost řešení se odvíjí od technických specifikací zařízení:
- Velikost a rozlišení obrazovky – různě „malé“ velikosti, možnost okamžitého natočení z vertikálního na horizontální pohled a tím změna šíře nebo různé jemnosti displejů (vysoké rozlišení a obrazová hustota displejů typu Retina od Apple nebo OLED od Samsungu).
- Webový prohlížeč – značná diferenciace verzí prohlížečů značně znesnadňuje vývoj. Na levných a starých zařízeních jsou často proprietální prohlížeče velmi svéhlavě podporující webové standardy. U novějších zařízeních je naštěstí situace lepší, tam už se vyskytuje alespoň nějaký klon Opery či Doplhin nebo Google Chrome.
- Kvalita internetového připojení a dostupnost signálu a tím i dostupný datový tok hraje také významnou roli. Mobilní připojení je řádově pomalejší než pevné a kvalita signálu velmi kolísá zejména v dopravních prostředcích s pokovenými okny (např. vlaky EuroCity apod.).
- Ovládání zařízení – typicky pro ovládání prsty na mobilech nebo tabletech se musí brát na zřetel zvětšení aktivních prvků a formulářových polí nebo odstranění nedůležitých bloků. Samostatnou kategorií je pak ovládání na chytré spotřební elektronice jako jsou televize.
Obr. 1: Princip změny vzhledu a chování mobilních verzí
Jak mít web přizpůsobený pro jakékoliv zařízení?
Možnosti jsou prakticky dvě. Buď vyvinout zcela samostatnou mobilní verzi, která využívá oddělené konstrukční prvky, optimalizované obrázky a jinou logiku ovládání. Developer klientovi vytvoří zcela novou verzi webu s vlastním ovládáním a logikou. Nejčastěji se s tímto použitím setkáme u zpravodajských serverů a velkých finančních společností. Technicky si server zjistí jaký typ zařízení na web přistupuje a podle toho poskytne buď mobilní verzi nebo klasickou pro běžné počítače.
Druhou a v současnosti nejpoužívanější možností je tzv. responsivní design, který spočítá ve vytvoření speciálního stylopisu nad již existující maskou, který bude webovou prezentaci či e-shop rozdílně zobrazovat na různých šířkách – zařízeních. Jedná se tedy pouze o jeden web, který si dané zařízení a prohlížeč sám „přeskládá“ podle designerem definovaných vlastností. Zachová se tak vysoký uživatelský zážitek a použitelnost za „rozumnou“ cenu.
Responsivní design
Jak vyplývá z předchozích řádků, responsivní design je sice „levnější“ variantou, které ovšem nesnižuje užitnou hodnotu nebo uživatelský zážitek. Naopak! Ušetřené finance za tvorbu separátní mobilní verze můžete vložit do implementace nových funkcí nebo do marketingu.
Realizace responsivního designu se nejčastěji provádí na komplexním gridovém a responsivním CSS frameworku, který ošetřuje nejčastější rozměry používané na mobilních zařízeních. Již př návrhu grafiky se web pasuje do sloupcové matrice (gridu), aby bylo snadno definované jaký počet sloupců jaký prvek zabírá a tak se dala snadno přepočítat pozice a rozměry při změně rozlišení.
Nejvíce se použití gridového systému vyplatí při konstrukci fixního responsivního designu, kdy jsou definované pozice a vzhled prvků při daných rozměrech viewportu.
V případě fluidního responzivního designu se šířky a další vlastnosti elementů mění v průběhu změny rozměrů viewportu (typicky změna šíře okna). Jakmile se dosáhne hraničního rozměru, design se „překlopí“ do vzhledu definovaného na dané menší či větší rozměry.
Jen na okraj – mezi další slibnou možnosti realizace patří flexbox režim (Flexible Box Module v CSS3), který aktuálně není v praxi použitelný pro nedostatečnou nebo chybějící podporu v prohlížečích.
Obr. 2: Využití grid systému v responzivní designu
Jak to děláme ve WDT?
Nejprve je nezbytné předně určit jaké informace jsou pro uživatele nejdůležitější a jaký je cíl projektu. Po této úvaze se vypracuje drátěný model rozložení prvků na různé rozměry a následně zapracuje grafická podoba, kterou webmaster realizuje do kódu. Pokud klient souhlasí, obohacujeme web o další vychytávky jako definice ikon stránky pro zobrazení jako zástupce a jako náhledu v oblíbených, definice Pinned Sites pro operační systémy Windows 7 a Vista a to včetně optimalizace pro Windows 8 v prostředí Metro.
Obr. 3: Jedno z možných řešení responsivního designu.
Závěrem
Technika responsivního designu umožňuje za poměrně malé náklady vytvořit uživatelsky dobře ovladatelnou webovou prezentaci nebo e-shop v prostředí tabletů a mobilních telefonů. Praxe ukazuje, že i uživatelé běžných velkých prohlížečů rádi přepnou do mobilní verze webu právě pro maximální přehlednost a snadnou orientaci na stránce. Uživatelé nejsou rozptylováni dodatečným obsahem a jsou přímo cíleni k požadované akci.
