Les bales de plata costen de trobar en el desenvolupament web — és molt més probable que empris estratègies que fan ús de vàries tècniques segons les circumstàncies. I això ens du a la nostra tercera solució pel desenvolupament web amigable amb el mòbil, que tracta d'evitar les deficiències de les altres dues solucions (diferents webs i única web amb disseny sensible), combinant-les.
Aquest enfoc híbrid se centra en atacar per separat cada un dels tres objectius del desenvolupament web per als mòbils, i aplicar les millors solucions tècniques disponibles a cada un d'ells. Aquest article presenta aquí una potencial combinació de tècniques, però en altres circumstàncies pot convenir una combinació diferent. El concepte clau que cal recordar i entendre és que per resoldre les teves necesitats concretes pots combinar les tècniques que calgui de banda del servidor amb les aplicades al navegador.
El disseny sensible (responsive design) està força bé — ara mateix [NT: juny 2011] és la millor tècnica disponible per a fer que els nostres layouts web es vegin bé en una àmplia varietat de circumstàncies. Si l'ús que se li ha de donar a les versions mòbil i de PC de la teva web són suficientment similars, llavors aquesta és la solució preferible pels teus layouts. Encara que -no s'ha d'oblidar- pot ser una mica cansat continuament usar tècniques (CSS i Javascript) per modificar la presentació de continguts que es presenten segons el context.
Afortunadament, no hi ha motius tècnics que ens forcin a emprar tècniques de la banda del navegador per a aquesta tasca: tenim l'opció de fer servir la detecció del user-agent des de la banda del servidor per a escollir el contingut que volem mostrar a l'usuari. Això no reduirïa la complexitat d'alterar el contingut des de la banda del servidor, però encara permetria que els nostres layouts es beneficiessin de la flexibilitat i futura llegibilitat del disseny sensible.
L'ús de la detecció del user-agent pel contingut i no pas pel layout també et permetria tenir una única URL per a ambdós continguts, puix que el contingut pot adaptar la seva disposició al navegador de l'usuari. Això normalment es veu com a una bona solució. En lloc de mantenir dues versions completament diferents de la web, simplement redirigim els usuaris a les planes amb el contingut que els hi escau. I donat que el disseny és sensible, saps que cada plana es veurà tan bé com és possible a la pantalla de l'usuari.
També podem donar solució a alguns dels problemes de rendiment del disseny sensible incorporant certes tècniques des de la banda del servidor. Per exemple, un dels punts més criticats als dissenys sensibles és que les imatges són enviades a tots els dispositius amb la mateixa resolució, incloent telèfons els quals redimensionen les imatges inteligentment. Una tècnica per a evitar aquest inconvenient empra la detecció del user-agent des del servidor juntament amb la llibreria de detecció de capacitat del dispositiu de WURFL per a enviar una imatge ja reescalada segons el dispositiu de l'usuari. Estan sorgint una àmplia gama de productes que proporcionen això com a webservice. És clar, aquesta tècnica pateix els desavantatges associats a la deteccció del user-agent. Però inclús si això no funciona, el rendiment no és pitjor que emprant només imatges fluides.
Combinant les tècniques ja mencionades, podem obtenir una estratègia de desenvolupament web mòbil que és més flexible que les webs fetes diferents (mòbil vs. PC) i té millor rendiment que un disseny sensible pur.
Un inconvenient de les solucions híbrides és que poden conduir a un augment en el nombre de vies de codi que treballen en paralel, tant del costat del navegador com del servidor. Això és tradueix en un molt probablement major consum de temps en programació que d'altres solucions. Encara que amb la correcta planificació, podem tenir el codi organitzat d'una manera asequible per les tasques de manteniment.
Un altre inconvenient és que com que aquesta solució romàn sobre l'ús d'un disseny sensible, és més factible i eficaç per a projectes de nova planta o que ja disposen d'un layout flexible, però no és així per a webs que ja tenen la versió d'escriptori ben construida. De igual forma, puix que emprem la detecció del user-agent, hauràs d'actualitzar les regles de detecció amb el temps continuament. [NT: donat que ja s'ha esmentat que hi ha web services que faciliten aquesta tasca amb un grau òptim de fiabilitat i amb facilitat d'integració en qualsevol CMS com una extensió o llibreria, no li veig al què a aquest inconvenient... és una opinió personal].
Sempre té sentit considerar combinar tecnologies del costat del navegador i del servidor; n'hi ha tantes opcions disponibles en aquest sentit que convé calibrar els pros i els contres de cada tècnica que emprem.
En molts casos, no és necesària la complexitat afegida del model híbrid. Per exemple, potser ni necesites ajustar el contingut en funció del dispositiu emprat per l'usuari —podria ser suficient sabent si una característica és present al seu navegador. Això ho podries discernir des del costat del navegador emprant una detecció per javascript. No pot fer mal excavar una mica i preguntar-te al voltant de quin eix vols centrar el teu contingut en cada cas.
Hem parlat d'afegir tècniques del costat del servidor a un disseny sensible, però també hi ha formes d'implementar un sistema híbrid per a casos on necesites que les versions mòbil i d'escriptori siguin diferents. Podries, per exemple, augmentar la flexibilitat d'amdós versions incorporant a cada una d'elles media queries [NT: indicar al navegador que carregui i apliqui diferents fulls d'estils CSS segons les característiques físiques del navegador] i un layout flexible. D'aquesta forma podries fer que la teva versiò mòbil treballés millor -més adaptativament- sobre les tabletes.well.
Per a la web demo de Mozilla O’ Wonder, vam provar una versió bàsica de solució híbrida, amb resultats positius. Vam emprar alguns elements de disseny web sensible per donar a la web un layout mòbil, mentres que empràvem la deteccció de user-agent per a oferir videos amigables amb el mòbil i per a re-ordenar les demos si l'usuari era en un telèfon. Fes una ullada al seu codi si vols, que tenim al github.
Ben aviat podríem estar fent més desenvolupaments en aquesta línia! De fet, una possible via per a la web principal de Mozilla s'ha esbossat amunt a la secció "Avantatges":
De moment no hi ha gaire que veure pel mòbil, puix que encara som a la etapa de planificació del desenvolupament, però sempre pots visitar i veure com creix el nou mozilla.org al github. Suscriu-te al bloc Mozilla Webdev per assebentar-te dels progressos que fem.
No hi ha una solució única per tots els casos. Les aplicacions web que pels usuaris de la versió mòbil necesiten adaptar molt els continguts o les funcionalitats que ofereixen probablement hauran de desenvolupar una web diferent a la d'escriptori. En canvi, planes orientades al contingut que no necesiten modificar el contingut pels usuaris mòbils quedaran bastant satisfets amb un disseny web sensible. Si el que necesites és canviar només lleugerament el missatge pels usuaris mòbils, i vols conservar els beneficis d'un disseny sensible, una solució híbrida pot ser la teva millor opció. Decisions com aquesta són al cor del desenvolupament de webs mòbils: sigues concret en quan al que t'agradaria aconseguir, i escull una solució pràctica sient conscient dels avantatges i inconvenients. Bona sort!
Llegeix els articles següents per a entendre el fons i les estratègies de desenvolupament per a mòbils.
Aquest article va ser publicat originalment al 27 de Juny de 2011, al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 4 – A Hybrid Approach", per Jason Grlicky.