Responsible (adaptabilný) dizajn

Responzívny dizajn z hľadiska biznisu

Res­pon­si­ve de­sign je je­den z naj­čas­tej­šie pou­ží­va­ných poj­mov dneš­ka. Má však vô­bec vý­znam sa ním za­obe­rať? Čo mi mô­že pri­niesť? A ako na to? Na tie­to otáz­ky sa po­kú­si­me od­po­ve­dať.

Res­pon­zív­ny di­zajn je po­mer­ne mla­dý od­bor webo­vé­ho di­zaj­nu. Vzni­kol ako od­po­veď na veľ­mi zlé skú­se­nos­ti pou­ží­va­te­ľov so zob­ra­ze­ním strá­nok na mo­bil­ných za­ria­de­niach. Sku­toč­ný roz­mach pri­šiel s ma­so­vým roz­ší­re­ním pr­vých ver­zií iP­ho­nov v ro­koch 2007 - 2008. Štan­dar­dné roz­lí­še­nie dis­ple­ja smar­tfó­nov bo­lo 320 × 640 pixelov, tak­že z bež­nej strán­ky so šír­kou 960 pixelov vi­del pou­ží­va­teľ len ma­lú časť.

Webo­ví di­zaj­né­ri te­da stá­li pred di­le­mou, ako sa no­vé­mu tren­du pris­pô­so­biť. Pr­vým štá­diom bol vý­voj sa­mos­tat­nej mo­bil­nej webo­vej strán­ky. Na pr­vý poh­ľad ideál­ne rie­še­nie - náv­štev­ník z mo­bi­lu uvi­dí strán­ku pris­pô­so­be­nú pre je­ho za­ria­de­nie a náv­štev­ník z des­kto­pu/no­te­boo­ku uvi­dí úpl­nú ver­ziu.

Exis­tu­je však množ­stvo (nep­re­ko­na­teľ­ných) prob­lé­mov, pre kto­ré sa upus­ti­lo od toh­to rie­še­nia: nut­nosť udr­žia­vať dve sa­mos­tat­né strán­ky, a te­da ná­roč­ná ak­tua­li­zá­cia, zvý­še­né nák­la­dy a v ne­pos­led­nom ra­de ochu­dob­ne­nosť ob­sa­hu mo­bil­nej ver­zie - náv­štev­ník čas­to ne­na­šiel to, čo pot­re­bo­val ale­bo na čo bol zvyk­nu­tý. Ne­ho­vo­riac o čo­raz šir­šom por­tfó­liu za­ria­de­ní, kde sa ťaž­ko hľa­dá de­lia­ca čia­ra me­dzi smar­tfón­mi, tab­let­mi a ultra­book­mi. Čo sa zob­ra­zi­lo pek­ne na iP­ho­ne, na iPa­de bo­lo už ne­pou­ži­teľ­né.

Gri­do­vé fra­mewor­ky a me­dia queries

K šir­šie­mu roz­vo­ju res­pon­zív­ne­ho di­zaj­nu pris­pe­lo nie­koľ­ko zá­sad­ných tech­nic­kých zlep­še­ní - ob­ja­vi­lo sa množ­stvo fra­mewor­kov na tvor­bu flexibil­né­ho gri­du, roz­lo­že­nia strá­nok, kto­ré sa pris­pô­so­bí roz­me­rom pre­hlia­da­ča. Me­dzi prie­kop­ní­kov mô­že­me za­ra­diť Bootstrap od fir­my Twit­ter, Foun­da­tion od fir­my Zurb a ďal­šie. Ďal­šou (a mož­no naj­dô­le­ži­tej­šou) tech­ni­kou sa sta­li me­dia queries, sú­časť špe­ci­fi­ká­cie CSS 3.

V skrat­ke ide o de­fi­ní­cie zob­ra­ze­nia webo­vej strán­ky, kto­ré sa ak­ti­vu­jú len na za­ria­de­niach s ur­či­tý­mi vlas­tnos­ťa­mi - šír­kou dis­ple­ja, je­ho orien­tá­ciou (portrait/lan­dsca­pe) atď. Prá­ve vďa­ka tej­to tech­no­ló­gii je mož­né, aby jed­na a tá is­tá webo­vá strán­ka vy­ze­ra­la na kaž­dom za­ria­de­ní inak. Nap­rík­lad pri šír­ke ok­na pre­hlia­da­ča 1200 pixelov (ultra­book) zob­ra­zí­me 3 stĺpce, pri šír­ke 960 pixelov (iP­ho­ne v po­lo­he lan­dsca­pe) 2 stĺpce a pri šír­ke 480 pixelov (iP­ho­ne v po­lo­he portrait) 1 stĺpec.

Poh­ľad biz­ni­su

Tech­no­ló­gie sú sí­ce fajn, ale má ce­lé úsi­lie o res­pon­zív­ny web zmy­sel aj pre biz­nis? Moh­li by sme od­po­ve­dať ša­la­mún­sky - ako pre ko­ho. Ale ani to­to nie je cel­kom prav­da. Pod­ľa štú­die Wal­ker­Sands Com­mu­ni­ca­tions Quar­ter­ly Mo­bi­le Traf­fic Re­port na vzor­ke nie­koľ­ko de­sia­tok skú­ma­ných webo­vých strá­nok pred­sta­vo­val po­čet mo­bil­ných prís­tu­pov v Q2/2013 tak­mer 30 %. To­to čís­lo sa­mo ose­be ne­má pri­veľ­kú vý­po­ved­nú hod­no­tu, ale napr. v po­rov­na­ní s Q2/2012 na rov­na­kých weboch na­rás­tol po­čet mo­bil­ných prís­tu­pov o 73 %.

A na žiad­nom zo skú­ma­ných webov ne­doš­lo k pok­le­su po­me­ru me­dzi mo­bil­ný­mi a des­kto­po­vý­mi prís­tup­mi. Ten­to trend je ove­ľa pod­stat­nej­ší ako ab­so­lút­ne čís­la - ho­vo­rí to­tiž o zvy­šu­jú­com sa poč­te mo­bil­ných prís­tu­pov a ten­to trend bu­de pok­ra­čo­vať. Sved­čí o tom aj ras­tú­ci po­čet pre­da­ných smar­tfó­nov a tab­le­tov.

Tak­mer kaž­dý z nich má aj dá­to­vý pau­šál, pre­to­že bez ne­ho dnes kú­pa smar­tfó­nu/tab­le­tu ne­má prak­tic­ký vý­znam. Všet­ky tie­to čias­tko­vé in­for­má­cie pre ma­ji­te­ľa webo­vej strán­ky zna­me­na­jú len jed­no - ak za­spí tech­no­lo­gic­ký pok­rok a je­ho strán­ka ne­bu­de mo­bil­ným náv­štev­ní­kom pos­ky­to­vať rov­na­ký kom­fort ako des­kto­po­vým, bu­de pri­chá­dzať o klien­tov.

Nie­koľ­ko rád pre ma­ji­te­ľov webo­vých strá­nok

Tvor­ba res­pon­zív­nej webo­vej strán­ky je ove­ľa ná­roč­nej­ší pro­ces ako zho­to­ve­nie webo­vej strán­ky ur­če­nej len na bež­né pre­ze­ra­nie. Pri nej exis­tu­je len je­den kon­text - pou­ží­va­teľ má pred se­bou no­te­book ale­bo mo­ni­tor PC s dos­ta­toč­ným vý­poč­to­vým vý­ko­nom a zrej­me aj s dosť rých­lym inter­ne­tom. Pri res­pon­zív­nom webe tre­ba zoh­ľad­niť množ­stvo kon­textov - náv­štev­ník mô­že ces­to­vať v MHD, ča­kať v reš­tau­rá­cii na obed, le­žať do­ma na gau­či... Ne­poz­ná­me vý­kon za­ria­de­nia, roz­lí­še­nie dis­ple­ja ani rých­losť pri­po­je­nia.

Prá­ve te­raz viac ako ke­dy­koľ­vek pred­tým vy­stu­pu­je do pop­re­dia ob­sah. Aká je hlav­ná úlo­ha webo­vej strán­ky? Čo mô­že náv­štev­ník hľa­dať a čo mu ja mô­žem pos­kyt­núť? Ako nas­me­ru­jem náv­štev­ní­ka k ak­cii, kto­rú si od ne­ho že­lám? Otáz­ky di­zaj­nu v zmys­le ob­ráz­kov a de­ko­rá­cií na vy­pl­ne­nie práz­dna z dô­vo­du ne­dos­tat­ku ob­sa­hu zra­zu strá­ca­jú zmy­sel a rie­šia sa sku­toč­né di­zaj­nér­ske otáz­ky - vi­zuál­na prio­ri­ta, ty­pog­ra­fia, jed­no­du­chá in­fog­ra­fi­ka na­mies­to de­sia­tok riad­kov textu. Ma­sív­ne­mu nás­tu­pu smar­tfó­nov a tab­le­tov vlas­tne mô­že­me vďa­čiť za vý­raz­né skva­lit­ne­nie inter­ne­to­vé­ho pries­to­ru.

Ná­ro­ky na tech­nic­ké aj mar­ke­tin­go­vé spra­co­va­nie res­pon­zív­nej webo­vej strán­ky sú vy­so­ké. Strán­ka mu­sí byť op­ti­ma­li­zo­va­ná na úrov­ni zdro­jo­vé­ho kó­du - níz­ky po­čet HTTP reques­tov, vy­hý­ba­nie sa ná­roč­ným se­lek­to­rom CSS, mi­ni­ma­li­zo­va­né sú­bo­ry JS/CSS a pod., to sú len niek­to­ré zo zna­kov kva­lit­nej webo­vej strán­ky. A vzhľa­dom na fakt, že dr­vi­vá väč­ši­na webo­vých strá­nok je dnes rie­še­ná po­mo­cou re­dak­čných sys­té­mov, tre­ba sle­do­vať aj mož­nos­ti, kto­ré pos­ky­tu­jú jed­not­li­vé rie­še­nia CMS.

Ko­mer­čné sys­té­my ma­jú pod­po­ru res­pon­zív­ne­ho di­zaj­nu rá­do­vo väč­šiu ako open sour­ce rie­še­nia. Ide pre­dov­šet­kým o mož­nos­ti de­tek­cie mo­bil­né­ho prís­tu­pu už pred od­os­la­ním webo­vej strán­ky do pre­hlia­da­ča. Vďa­ka to­mu­to mož­no pris­pô­so­biť napr. roz­lí­še­nie ob­ráz­kov (mo­bil­ný pre­hlia­dač ur­či­te ne­pot­re­bu­je ob­rá­zok v roz­lí­še­ní 5 Mpix), na­čí­tať niek­to­ré ja­vas­crip­to­vé sú­bo­ry len na des­kto­pe a pod. Prá­ve prá­ca s ob­ráz­ka­mi dnes naj­vý­raz­nej­šie od­li­šu­je kva­lit­ných webo­vých vý­vo­já­rov od os­tat­ných.

Sa­moz­rej­me, mož­no ne­chať vša­de veľ­kosť ob­ráz­kov pre des­ktop a zmen­šiť len ich zob­ra­ze­nie po­mo­cou CSS a me­dia queries, ale to­to zby­toč­ne za­ťa­ží náv­štev­ní­ko­vo pri­po­je­nie a len zvý­ši prav­de­po­dob­nosť opus­te­nia strán­ky. Sku­toč­ní exper­ti vám do­kon­ca po­núk­nu na vý­ber nie­koľ­ko rie­še­ní, ako Pic­tu­re­Fill, Hisrc, Adap­ti­ve ima­ges, vy­sve­tlia vám vý­ho­dy/ne­vý­ho­dy a ne­cha­jú vás vy­brať rie­še­nie pod­ľa váš­ho roz­poč­tu a pre­fe­ren­cií. A mož­no eš­te jed­na krát­ka ra­da na zá­ver: Tu sa šet­riť nao­zaj neop­la­tí. Zlý do­jem, kto­rý v (mo­bil­ných) náv­štev­ní­koch za­ne­chá­te, vás vy­jde v ko­neč­nom úč­te ove­ľa drah­šie.

Dá­vid Me­lich, ma­na­ging di­rec­tor Im­pres­sa - inter­ne­to­vá agen­tú­ra, s. r. o.

Zdroj: IW 10/2013


Ohodnoťte článok:
 
 
 

24 hodín

týždeň

mesiac

Najnovšie články

Res­pon­zív­ny di­zajn z hľa­dis­ka biz­ni­su
Responsive design je jeden z najčastejšie používaných pojmov dneška. Má však vôbec význam sa ním zaoberať? Čo mi môže priniesť? A ako na to? Na tieto otázky sa pokúsime odpovedať. čítať »
 
Pre­zen­to­va­nie prís­pev­kov z blo­gu
Po predstavení šablón Grid App a Split App a tried dátového modelu dozrel čas na príklad reálnej aplikácie, ktorá bude zobrazovať údaje z blogov poskytované vo formáte RSS. V príklade bude použitý blog autora http://novywindows.wordpress.com. Vytvorte nový projekt typu Blank Page. čítať »
 
Prog­ra­mu­je­me GPU / 25. časť
Týmto článkom ukončíme oblasť, v rámci ktorej sme sa venovali vertex a fragment shaderom. Zostáva nám uviesť podstatu tzv. odloženého (deferred) tieňovania, resp. renderingu a opísať kroky algoritmu, pomocou ktorého rozmažeme obraz v závislosti od pohybu kamery (tzv. motion blur). čítať »
 
Zdie­ľa­nie zdro­jov me­dzi OS Win­dows a OS Li­nux / 14.
V predchádzajúcej časti seriálu sme ukázali, akým spôsobom môžeme zabezpečiť prenos údajov medzi klientom a poštovým serverom Postfix. Teraz sa zameriame na niektoré detaily protokolu TLS. čítať »
 
DNS – re­verz­ný zá­znam a ad­re­sá­ro­vá štruk­tú­ra
V predchádzajúcej časti sme si hovorili o prekladoch, a to o doprednom (forward) a spätnom (reverse) preklade. čítať »
 
Nás­tro­je pre webo­vých vý­vo­já­rov PhpStorm a Smar­tGit/Hg
V tomto článku sa zameriame na dva nástroje, ktoré sa mi v rámci niekoľkoročnej praxe v tvorbe webových aplikácií najviac osvedčili. Ku každému z nich existujú alternatívy, pokúsim sa však vysvetliť, na základe akých kritérií som ostal verný práve týmto dvom. čítať »
 
Kniž­né no­vin­ky
Chcete ovládnuť Excel na úrovni, ktorú určite ocení aj váš zamestnávateľ? Pomocou tohto sprievodcu sa naučíte na praktických postupoch krok za krokom kontingenčné tabuľky a grafy naplno využívať, filtrovať a zoskupovať v nich dáta presne tak, ako to budete práve potrebovať. čítať »
 
Preh­ľad vý­vo­jár­skych nás­tro­jov pre Win­dows, Mac, iOS, An­droid a ďal­šie OS
Možno ste sa pri používaní niektorej aplikácie zamysleli, v akom nástroji bola vytvorená. Napriek značnému vyprofilovaniu používateľských a serverových platforiem majú vývojári k dispozícii veľké množstvo vývojárskych nástrojov, či už pre jednu platformu, alebo multiplatformových. čítať »
 
 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter