Diseinu arduratsuaz esandakoa IEB 2013 biltzarrean

Hona laburbilduta, zer azaldu nuen atzo IEB 2013 bilkuran, Donostian. Telefonoak eta Informatika zen goiburua, eta Interneteko garapenaren ikuspegitik, diseinuak ere kontestu horretan garrantzia duela irudituta proposatu genuen hizketaldi hau: Diseinu arduratsua, web garapena gailu mugikorretarako.

Teknologia eskaintzak eta garapenak ziztu bizian garatzen ari diren gaurko bizitza honetan, gure beharrak ere zeharo aldatzen ari dira. Orain 15 urte ia gutako inork ez zeukan mugikorrik, baina gaur egun ezin gara bera gabe bizi. Webgune desberdinen estatistikak begiratzen baditugu emaitzak ere zeharo aldatu dira; eta tendentziak ere gorako joera dute ondorengo urteetan. 2013ko estatistikak diote gure webguneen kontsulten %10-15 inguru mugikorrez egiten direla. Eta portzentaje hau bikoiztu eta kasu batzuetan hirukoiztu egin da urte betean; 2012an %4-%8 ingurukoak baitziren emaitzak.

Oso adierazgarria da era berean, The Guardian-ek argitaratu berri dituen grafikoak. Bertan ikusten da arratsaldetik aurrera beraien edukira erabiltzaileen gehiengoa tablet eta mugikorren bidez heltzen dela; eta ez ordenagailutik.

Guzti honen aurrean webguneen edukia mugikorretara egokitu behar dugula garbi dago. Kasu konkretu batzuetan garapen espezifiko bat beharko da bertsio mugikor edo aplikazio natibo bat adibidez; baina argi dago webgune batek bere horretan edukia egoki erakutsi behar duela mugikorrean... eta hori lortzeko Responsive design edo Diseinu arduratsua deritzon teknika erabili behar dugu edukia egokitu dadin bereizmen eta plataforma guztietara.

Web diseinu arduratsua webguneak garatzeko eta diseinatzeko teknika bat da eta berari esker webgunea erabiltzailearen ingurunera (gailuaren ezaugarrietara) moldatzea da.

Diseinu arduratsua egiteko pauso batzuk jarraitu behar ditugu garatzaileok; baina batez ere desberdin pentsatzera eraman behar gaitu guzti honek. Oinarriak finkatzerako orduan eta lan egiteko eran buelta bat eskatzen du: hobeto da lan prozesuan zehar lehenik bertsio mugikorrean pentsatzea eta ondoren pantaila handietara egokitzea!

Sarean dauden webguneei ere aplikatu ahalko diegu ezaugarri hau baina diseinu arduratsua aplikatzean ez da html-a aldatzen; beraz, baliteke muga batzuk aurkitzea kodean eta emaitza ez izatea egokiena.

Pantailaren tamainaz gain pentsatu behar dugu mugikorretatik nabigatzerako orduan konexioa ere beti ez dela optimoena izango. 3G sistemaren bidez nabigatu dezakegu adibidez eta, beraz, eskaintzen dugun web orrien pisuan ere kontu handia izan beharko dugu.

Diseinu arduratsua lantzeko estilo orrietan aldaketa ugari egin beharko ditugu eta kontuan izan beharreko ezaugarriak ikusiko ditugu. Lehenik eta behin grid edo erretikuluari likidotasuna emango diogu eta, hortaz,edukian dauden irudi eta bideoek adibidez malgutasuna beharko dute baita ere.

Estilo orrietan aplikatuko dugun beste kode berri bat “media query”-ak izango dira.

Media query-ek posible egiten dute gure estilo orrietako agindu konkretu batzu aplikatzea edo ez pantailaren tamainaren arabera; izan ere, tamaina minimo edo maximoetara mugatu daitezke.

Hortaz, media query-ak aplikatuko ditugu emaitza desberdinak eskaintzeko plataforma edo erresoluzioen arabera.

Normalean erabiltzen diren inflexio puntu estandarrak hauek dira:

Dena den gomendatuko nuke diseinua apurtzen den puntuan aplikatzea media query-a eta ez puntu hauetan; izan ere merkatuan momentu honetan mugikor oso desberdinak ditugu eta batek daki bi urteren buruan.

Hemen adibidez diseinu arduratsua edo responsive design teknikaz landutako zeinbait webgune...

• The Boston Globe, 3-2-1 zutabe egiturarekin
• Simon Collison.
• Mondragon Unibertsitatea, geuk garatua
• Bertsozale Elkartea, geuk garatua, duela gutxi irekia, hemen behean irudia.

Beste ezaugarri batzu ere kontuan izan behar ditugu Diseinu arduratsua aplikatzean:

• Tipografiak: hauen tamaina ere flexible jarriko dugu noski eta media query-en bidez tamaina desberdinak ezkeini ahal izango ditugu beharrezko dela estimatu ezkero adibidez titularretan.

• Botoien tamaina ere egokitu beharko da behatzekin ukitzeko erabilgarri izan daitezen.

• Menuak ere aldatu ahalko ditugu. Hemen adibide bat, geuk garatutako Niagarank-eko mugikorreko ikusmiran nola kolapsatzen den menua, eta klikarekin bistan geratzen den.

• Hain errelebantea ez den edukia ezkutatu ahal izango dugu

• Loturen “hover” ezaugarria mugikorretan ez dabilela kontuan izango dugu...

• Orrien pisua ahalik eta txikiena eman beharko dugu. Kontuz ibili beharko gara irudien tamaina eta erresoluzioekin, publizitatearekin, fondoko irudiak... Gure gomendioa da bertsio mugikorra ahalik eta garbiena ezkeintzea bizkortasunari garrantzi handia emanaz.

Aipatu nuen baita ere, Twitter Boostrap bezelako framework-ak erabili ditzakegula gure proiektuak lantzeko. Hauek HTML , GRID eta CSS bat ematen digute diseinu arduratsua landuta daukana eta abantaila bezela gainera gailu desberdinetara testeaturik! Proiektu batzuetan interesgarri izan daiteke hauen erabilpena; guk geuk erabili izan dugu.

Esan bezela oinarri oinarrizkoak aipatu ditut diseinu arduratsua aplikatzeko eta askoz gehiago zakondu daiteke.

Hauek dira hitzaldian azaldutako puntuak, nolabait laburbilduta. Orain banoa beste biltzar batera, Valladolidera UXSpain 2013 topaketara, baina lehenago itsatsita uzten dizuet erabili nuen aurkezpena:

Eskerrik asko atzo IEBra bertaratu zinetenoi.