23.11.2012 00:00 | Bezpečnosť

Responzívny dizajn: Nahradí mobilnú verziu webu

Návštevníkov z mobilu či tabletu nemôžete ignorovať, ale tvoriť samostatnú mobilnú verziu môže byť zdĺhavé. Odpoveďou je responzívny web dizajn.

„Najprv som sa naučil robiť tabuľky a rámce. Potom to bolo zlé. Naučil som sa Flash. Potom to už nebolo zaujímavé. Naučil som sa CSS. Potom prišla prístupnosť. Potom tu bolo XHTML. A potom HTML5. A čo dnes? Responzívny webdizajn! Alebo adaptívny. Záleží od knihy, ktorú čítate.“ Takto začal web dizajnér Rich Quick prezentáciu o responzívnom webdizajne na konferencii DailyWeb 2012.

testy huawei mediapad 7 lite word01
testy huawei mediapad 7 lite word01 Zdroj: Zive.sk

Počet používateľov vlastniacich mobilné zariadenie s prístupom na internet neustále narastá. Päť rokov po uvedení iPhonu a Androidu je na celom svete už cez jednu miliardu (1,038) inteligentných telefónov, čo je oproti minulému roku nárast o 46 percent. Dvadsaťdva percent obyvateľov Veľkej Británie, 40 % obyvateľov USA a cca 50 % obyvateľov Ázie a Afriky nikdy nepristúpilo na web z iného, ako mobilného zariadenia.

Čo je responzívny web dizajn?

Responzívny webdizajn vyhodnocuje parametre zariadenia a následne mu automaticky prispôsobuje dizajn a zobrazenie webovej stránky. Dokáže sa prispôsobiť rôznym veľkostiam a rozlíšeniam displejov mobilných zariadení. Prostredníctvom vlastnosti Media Queries, ktorá je zahrnutá v špecifikácii CSS3 (Cascading Style Sheets Level 3), je možné rozpoznať vlastnosti zariadenia, na ktorom je stránka otvorená a prispôsobiť tak obsah a rozloženie prvkov. Rich Quick opakovane a vtipne pripomenul, že to nie je zložité. Ide len o jeden základný riadok, ktorý sa treba naučiť používať:

@media screen and (min-width:960px) {    ! /* vaše CSS sem */   }.

Príklad zobrazenia responzívneho webu:

testy xps12 obr2buz
testy xps12 obr2buz Zdroj: Zive.sk

Vaša webová stránka už nesedí iba na stole

Je nevyhnutné tvoriť web tak, aby zodpovedal monitoru a zariadeniu rôznych používateľov. To je dôvod, prečo je potrebné pri vytváraní webovej stránky brať do úvahy špecifikácie tabletov, smartfónov, netbookov, televízorov s prehliadačom a podobne. A nezabúdať aj na otáčanie mobilných zariadení. Riešením je flexibilná šírka stránky v percentách a relatívnych jednotkách (em, ex), adaptívne obrázky a rozloženie prvkov schémy, prispôsobené rôznym veľkostiam prehliadača.

BANNER300

Nikdy sa nepodarí docieliť spokojnosť všetkých používateľov. Na niektorých zariadeniach bude stránka príliš malá, inde zbytočne veľká s malými tlačidlami. Budú si ju otáčať, približovať, posúvať. Zabudnite na dve verzie stránky - jedna pre mobilné zariadenia, druhá pre desktopy. Responzívny dizajn je menej náročný finančne, technologicky a ak nevyužívate centralizovaný systém pre správu obsahu,  nemusíte aktualizovať obsah na dvoch miestach. Jediné, do čoho treba investovať, je čas. Strávite ho plánovaním rozvrhnutia obsahu a funkčných prvkov pre niekoľko veľkostných verzií.

Elegantne degradovať ??dizajn – progresívne rozširovať kód

Začnite tradičným spôsobom. Nadizajnujte webovú stránku pre klasický počítač. Následne sa opýtajte, či by to nemohlo byť užšie. Stláčajte stránku v bokoch. Presúvajte veci, ktoré boli vedľa seba, pod seba. Kratšie texty na konci zarovnávajte na stred. Prekrývajte časť hlavného obrázku boxom s textom. A potom sa opýtajte, či by to nemohlo byť ešte užšie. Zarovnajte na stred aj niektoré nadpisy, tlačidlá. Zúžte hlavný obrázok a neprekrývajte ho ničím. Vložte pútací text hneď pod neho. Premiestite logo, ktoré bolo vedľa názvu, nad názov. Skúšajte rôzne variácie.

Je to jednoduchšie pri prezentačnom webe, kde je možné zachovať takmer všetky prvky v rôznych schémach (layoutoch). Ak máte obsahovo orientovaný web, nebojte sa obsah skryť pod odkazy. Odľahčí to stránku a ak používateľ chce, k textu sa preklikne.

Pri kódovaní stránky Rich Quick odporúča celkom opačný postup. Začať pri najužšom dizajne a postupne programovať širší.

Redukcia textu na mobilnom zariadení:

testy huawei mediapad 7 lite word03
testy huawei mediapad 7 lite word03 Zdroj: Zive.sk

Nevýhody a darček od Internet Exploreru

Argumentom proti responzívnemu dizajnu sú prvotné náklady na (re)dizajn a vývoj. Prieskumom a analýzami je možné zistiť, aký typ používateľa navštevuje web z mobilných zariadení. Ide o informačne alebo akčne-orientovaného používateľa? Koľko času trávi na stránkach? Na ktorých? Podľa toho sa v návrhoch pracuje s navigačnými prvkami, organizačnou a klasifikačnou schémou, skrytým a viditeľným obsahom, tlačidlami, ktoré by mali byť väčšie, ako tie na klasickej stránke a podobne.

Vzhľadom na to, že responzívny web sa len nedávno začal vyvíjať, zatiaľ neboli vytvorené štandardy pre jeho tvorbu. Existujú len odporúčania. Dizajnér si preto musí vyhradiť dlhší čas na návrh webu, spracovanie projektovej dokumentácie, tvorbu wireframov (tzv. „drôtený model“ alebo skica webu), mockupy (prototypy dizajnu s aspoň čiastočnou funkcionalitou)a testovanie.

Problematické je umiestnenie reklamných plôch. Ak stránka obsahuje reklamy iných subjektov, môže si robiť nárok na vyššiu pozíciu svojho banneru v rámci rozloženia prvkov. Na klasickej stránke si používateľ vybuduje bannerovú slepotu, no v novom dizajne reklama hneď na začiatku naruší celkový pocit z webu.

Internet Explorer vo verzii staršej ako 8 nepodporuje Media Queries, teda CSS3 modul, ktorý umožňuje responzívne vykresľovanie webových stránok na základe činiteľov, ako rozlíšenie a veľkosť obrazovky. Komplikácie sa vyskytujú aj s javaskriptovými polyfill-mi (modernizr.js, respond.js, css3-media-queries.js, a pod.). Ide o HTML5 techniku, kedy kódy imitujú rozhranie aplikačného programu (API) nového prehliadača tak, aby ostala zachovaná funkcionalita v staršom prehliadači.  Na obrázku nižšie vidno, ze IE vôbec nezobrazuje prvky ako tieňovanie, nakláňanie či zaoblené rohy.

Rovnaký prvok stránky - hore v prehliadačoch Safari, Chrome, Firefox, Opera a dole v prehliadači IE:

testy xps12 obr4buz
testy xps12 obr4buz Zdroj: Zive.sk

Mobil nie je len o menšom displeji

Užitočné nástroje

Ľudia nepoužívajú svoj smartfón rovnakým spôsobom, ako tablet alebo notebook. Veľkosť displeja a rozlíšenie nie je jediné, čo ich definuje. Zvyčajne sú na ceste v MHD, vlaku, idú pešo, čakajú v rade, sú rušení inými médiami (paralelné pozeranie televízie). Môžu byť netrpezliví, potrebujú informáciu rýchlo, hľadajú len kontakt, otváracie hodiny alebo špecifickú stránku a ak sa im neotvorí do troch sekúnd, polovica sa vráti k vyhľadávaniu, otvorí inú a k predošlej sa už nikdy nevráti.

Webová analytika, testovanie a znalosť svojich návštevníkov dokáže pomôcť pri rozhodovaní, či zvoliť osobitnú mobilnú verziu webu alebo responzívny dizajn. Príklad pre porovnanie: webová stránka medicínskeho centra.

Prezentačné weby s bohatou grafikou, kolosálnym obsahom alebo vysokou mierou interakcie môžu pri tvorbe responzívneho dizajnu predstavovať problém. Kameňom úrazu je komplexný používateľský zážitok v rámci adaptácie. Nie je správne penalizovať používateľov tým, že budú ochudobnení o obsah len preto, lebo používajú staršie, menšie zariadenie. Je lepšie používať odkazy, zoznamy, aby bolo jasné, že informácie sú prítomné, stačí len ťuknúť.

Treba myslieť aj na tých, ktorí majú slabšie pripojenie alebo obmedzený dátový balík. Je dobré vytvárať jednoduché obrázky, použiť postupné sťahovanie stránky. Ak má klasická stránka 1 MB, pri úzkej sa odporúča stlačiť to na nevyhnutné minimum.

Ušetríte jedno SEO

Jedna verzia webovej prezentácie pre všetky zariadenia znamená nižšie prevádzkové náklady na správu obsahu. Oproti osobitnej mobilnej verzii sú nižšie aj finančné náklady.

Výhodou je využitie geolokalizácie, napr. pri formulároch. Používateľ ušetrí čas vypĺňaním mesta/štátu. Optimalizácia pre vyhľadávacie nástroje (SEO) neutrpí žiadne ujmy, keďže všetky odkazy a záložky smerujú na jednu URL adresu. Nie je potrebné optimalizovať dve separátne stránky - jednu pre mobilné zariadenia, druhú pre klasickú webovú stránku. Centralizovaná a jednotná je taktiež webová analytika a monitorovanie.

Webový konzultant Lukáš Hroch na rovnakej konferencii vo svojom príspevku o responzívnom webe povedal, že pri dizajnovaní sa treba pokúsiť o dokonalosť, akú popísal Antoine de Saint-Exupéry: dokonalosť sa nedosiahne tým, že už nie je možné nič pridať, ale ak sa už nedá nič odobrať.

 

Diskusia 1 Príspevkov