Disseny sensible (Responsive design)

Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos dissenys web separats per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet no tant) ha crescut en popularitat: oblidar-se de la detecció del user-agent des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo disseny web sensible. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.

Avantatges

Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres objectius del desenvolupament web per a mòbils:

• Presentació — Emprant un layout flexible a la teva web juntament amb media queries de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.
• Contingut — Alterant el contingut basant-te en les característiques del navegador via JavaScript, pots adaptar el missatge a cada usuari.

Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del user-agent del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.

Inconvenients

Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.

Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un layout flexible. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.

Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.

Quan és adient escollir aquesta opció

Tal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.

Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.

Exemples

Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:

• https://teixido.co/ – un dels meus dissenys sensibles favorits, que tambè he capturat abans en la imatge!
• https://adactio.com/journal/1696 – un bon article per a llegir, que inclou més enllaços amb exemples
• https://thinkvitamin.com/
• https://stephencaver.com/
• https://hicksdesign.co.uk/

Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que primer generis un disseny per a pantalla petita, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.

També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant media queries [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els media queries encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs aquí.

Enfocs del desenvoulpament web

Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.

• Què vol dir ser un disseny amigable amb els mòbils?
• Dissenys diferents per a diferents pantalles
• Un enfoc híbrid

Llegeix també

• Disseny web sensible per obtenir més recursos