Responzivní design - moderní trendy webdesignu

V časopise PIXEL vyšlo několik našich článků na téma responzivního designu a UX. Zveřejňujeme náš první článek, který vyšel v čísle 217 (1/2015).

Technologický vývoj

Ještě před několika málo lety bylo běžně používaným rozlišením na počítačích 1024x768px. Tón udávaly především nejrozšířenější a cenově dostupné značky počítačů a monitorů a cenově dostupné notebooky. Většinou se jednalo o monitory čtvercového formátu s poměrem stran 4:3 přičemž dnes jsou daleko běžnější širokoúhlé monitory formátu 16:9 (16:10).

Mobilní telefony měly prohlížeč, který fungoval přes protokol WAP. Následně přišly první telefony s prohlížeči, které fungovaly na bázi protokolu HTTP. Datové připojení bylo navíc účtováno podle objemu přenesených dat a bylo velmi drahé.

Dnes se rozlišení zvětšilo natolik, že klasické weby, tvořené před třemi lety vypadají na rozlišeních 1920×1080 jako tenké nudle uprostřed monitoru a to kolikrát i na rozměrově menších displejích. Z dnešního pohledu nevyužívají vůbec možnosti větších displejů a staré weby tak plýtvají místem.
V prodeji jsou již nějakou dobu displeje s ještě vyšším rozlišením než 1920×1080. Jsou již cenově dostupnější než dříve a na trh přichází displeje s rozlišením 4K, takzvané Ultra HD, které disponuje horizontálním rozlišením přibližně 4000px. Na takovém displeji by standardní web tvořený na šířku 960pixelů využíval jen necelou čtvrtinu displeje.

Přístupy z mobilních zařízení

K tomu všemu je potřeba přihlédnout k dalšímu zásadnímu faktoru a tím je prudký nárůst přístupů na webové stránky z mobilních zařízení. Dnes již nelze při návrhu webu myslet jen na počítače.

V celé řadě oborů již dnes překonává návštěvnost z mobilních zařízení 20%. Málokdo si může dovolit téměř čtvrtinu návštěvníků ignorovat.

Za prudký nárůst může především záplava nejrůznějších modelů telefonů s operačním systémem Android, Windows Phone a iOS, které počítají s téměř trvalým připojením k internetu.

Významným způsobem pomohla také datová revoluce v podobě neomezených tarifů a výrazné zlevnění datových balíčků, kdy ke spoustě i nižších tarifů je datový balíček v ceně tarifu. Dalším krokem je zrychlování sítí ze standardního 3G na LTE a pokrývání více lokalit rychlejším mobilním internetem.

Tradiční web se zobrazením na takovém zařízení vůbec nepočítal, a tak pro něj nebyl optimalizován ani graficky, ani datově a už vůbec ne z pohledu user experience.

Jen díky přítomnosti klonů desktopových prohlížečů na mobilních telefonech se starší webové stránky na mobilu zobrazí. Zobrazí se i poměrně slušně – tzn. nejsou vysloveně deformované.

Spousta javascriptu a datová náročnost (často přes 3 MB) však načtení webu protahují na desítky sekund (v případě připojení EDGE dokonce minuty), kdy se na displeji telefonu nic neděje a u uživatele klesá prvotní motivace si takový web prohlédnout.

Pokud se o to náhodou pokouší v pražském metru, je téměř jisté že váš web neuvidí. Nestihne se mu zkrátka ve stanici, než vjede opět do tunelu, načíst. To samé, pokud jede vlakem. Přitom to jsou nejčastější situace, kdy uživatel vytahuje telefon aby si zkrátil dlouhou chvíli.

Pokud by měl uživatel tak velkou motivaci, že by všechny předchozí strasti překonal ,což je velmi nepravděpodobné, je i tak web nepoužitelný z mnoha dalších důvodů. Webové stránky se sice načtou, ale nedají se dobře ovládat. Obsah bez zoomování kvůli drobné velikosti nepřečtete.

Uživatel musí neustále jezdit prstem zleva doprava, nahoru a dolů, přičemž velmi jednoduše ztratí orientaci, kde se vlastně na webu nachází. Pokud k tomu přidáme kliknutí na konkrétní odkaz na druhý až třetí pokus, protože se zkrátka nemůže do miniaturního odkazu trefit prstem a pomalé načítání jednotlivých podstránek (přičemž se například překlikne omylem na jinou podstránku než původně chtěl), bude procházení takového webu pro uživatele silně frustrující.
Takový uživatel se určitě raději obrátí na konkurenci, která má mobilní verzi, nebo responzivní verzi webu.

Základní výhody responzivního webu

• Responzivně vytvořený web se přizpůsobuje rozlišení daného zařízení. Není tedy vázán na nějaké konkrétní zařízení (ať už značku, nebo typ).
• To je obrovská výhoda, protože rozlišení i velikost mobilních telefonů postupně roste a zvětšuje se různorodost zařízení, přes která uživatelé na web přistupují (“chytré” televize, mobilní telefony, levnější tablety s Androidem, nebo dražší tablety s iOS)
• Responzivní web není další verze webových stránek ale jedná se stále o ten samý web, pouze jinak zobrazený na zařízeních s nižším či vyšším rozlišením (nemusíte tak řešit dvojí správu obsahu a jeho duplicitu z pohledu vyhledávačů).
• Je ošetřen přístup ze všech zařízení (je zachována struktura webu včetně URL adres). Díky tomu je umožněna jednoduchá migrace mezi zařízeními (uživatel, který si přepošle odkaz například přes e-mail z počítače, se dostane na stejnou podstránku webu i když na odkaz následně klikne z telefonu či tabletu

Jaký funguje responzivita webu?

Web “zjistí” pomocí CSS a Media Queries zobrazovací schopnosti daného zařízení. Na základě toho následně web přizpůsobí podle zadaných “break pointů”.

Media Queries je rozšiřující specifikace CSS 3, která umožňuje nadefinovat podmínky při jejichž splnění se přizpůsobí CSS styly danému zařízení.

Základem přitom je, že velikosti objektů webových stránek jsou definovány relativně a flexibilně ke svému okolí. Nikoli fixně jako tomu většinou bývalo u klasického webu.

Responzivní design v porovnání s mobilní verzí

I mobilní verzi lze samozřejmě udělat kvalitně. Výhoda responzivního designu je zejména v bezproblémovém pokrytí většího množství různorodých zařízení.

U mobilní verze dochází často k optimalizaci pro mobilní zařízení přičemž je tím myšlen primárně mobilní telefon (tzn. zařízení s malou obrazovkou).

Trend je ale jednoznačný. Zvětšující se velikost displeje a pokud ne přímo plochy displeje tak rozlišení displeje. Na některých displejích, kde je rozlišení “hraniční” – například na šířku má displej 1024px, vypadá mobilní verze zbytečně obrovská. Tlačítka jsou zkrátka zbytečně velká a displej je nevyužitý – zobrazuje se na něm minimum informací.

Při mobilní verzi je třeba si dát pozor na správnou detekci zařízení. Narazil jsem na celou řadu webů, kde se web přepnul do mobilní verze i při zobrazení na tabletu na šířku.

Častým neduhem mobilních verzí je absence některého obsahu z pohledu struktury webu. Některé stránky jsou oproti počítačové verzi zcela vypuštěné a tak při prohlížení, při kterém uživatel střídá zařízení (například něco najde na počítači, pak si to chce přečíst na telefonu) takovou stránku mobilní verze vůbec nezná. S tím souvisí i jiná struktura webu a neošetření správného přesměrování, když uživatel přichází z desktopového odkazu.

Dochází často k nepříjemnému jevu, kdy kliknutím na desktopový odkaz je uživatel přesměrován na domovskou stránku mobilní verze. Tím nutíme uživatele absolvovat celou cestu k informaci, kterou chtěl získat. Tato informace navíc na mobilní verzi webu vůbec být nemusí.

Jak roste zkušenost uživatelů s používáním chytrých zařízení, klesá zároveň jejich ochota tolerovat překážky, které jim při prohlížení jako vývojáři webu klademe.

Pokud se na problematiku podíváme z pohledu nákladů a technických možností, vychází nejlépe pamatovat na responzivitu při nejbližším redesignu webu.

Mobilní verzi je oproti tomu snadnější a levnější implementovat do stávajícího řešení. Toto řešení by však mělo být dočasné do nejbližšího redesignu webu.

Ani odborníci nemají jednoznačný názor na to, které z řešení je nejlepší. Vždy záleží na tom, čím se firma zabývá a jaké cíle má web plnit. Záleží i na tom jaký obsah na webu budete konzumovat.

Již nyní je ale zřejmé, že opomíjet přístupy z mobilních zařízení bude mít zásadní dopad na plnění cílů webových stránek.

Zatímco jsme si zvykli, že na internetu lze téměř veškerou interakci uživatele s našim webem měřit (odkud přišel, na co se na webu díval, odkud odešel, jak dlouho na webu byl, jestli došlo ke konverzi, apod.), mobilní telefony nám ve správném vyhodnocení získaných dat hází klacky pod nohy. Každé zařízení se tváří jako jiný uživatel. Zatímco přes mobil může dojít k prvnímu a důležitému kontaktu s vaší firmou, jako konverzní bude ve statistikách vystupovat desktop.

Nelze proto jednoznačně určit, že mobilní zařízení nepřináší obchodní výsledky. Často tak tomu může být, jen to na první pohled nevidíme, protože je situace složitější.

Správně stanovené cíle

Důležité je ve všech případech správně stanovit cíle pro jednotlivé verze webu. Zatímco u desktopové verze může být hlavním měřítkem úspěchu množství odeslaných objednávek či poptávkových formulářů, u mobilní verze by tomu měla být spíše doba, po kterou uživatel web prohlížel, případně bounce-rate (míra okamžitého opuštění webu).

V případě špatně stanovených cílů můžete zbytečně podcenit význam některých kroků jen kvůli jejich špatnému vyhodnocení.