{"id":18345,"date":"2017-09-12T13:38:37","date_gmt":"2017-09-12T13:38:37","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-responsive\/"},"modified":"2026-04-20T19:13:19","modified_gmt":"2026-04-20T19:13:19","slug":"disseny-web-responsive","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/ca\/blog\/disseny-web-responsive\/","title":{"rendered":"Disseny web responsive"},"content":{"rendered":"

L\u2019arribada dels smartphones va suposar una aut\u00e8ntica revoluci\u00f3 en el m\u00f3n del disseny web<\/strong>. De cop, tots vol\u00edem ser els primers a crear llocs web amb un disseny web responsive<\/strong>. Semblava cosa de m\u00e0gia: redimensionar el navegador feia que tot el web s\u2019adapt\u00e9s a la nova resoluci\u00f3, fins i tot canviant-ne l\u2019estructura.<\/p>\n

Quan ho mostr\u00e0vem als clients, encara que ara sembli estrany, sovint quedaven bocabadats. No fa tants anys d\u2019aix\u00f2, i avui dia ja \u00e9s una pr\u00e0ctica totalment estesa.<\/p>\n

Tot i aix\u00ed, encara queda molta feina per fer dins del disseny web responsive<\/strong> o adaptatiu. No n\u2019hi ha prou amb utilitzar un framework CSS com Bootstrap i esperar que faci tota la feina per nosaltres. Si volem connectar amb l\u2019usuari final<\/strong>, hem d\u2019oferir-li una experi\u00e8ncia d\u2019usuari adaptada al seu dispositiu<\/strong> i, per aconseguir-ho, cal entendre com interactua amb ell. \u00c9s fonamental captar la manera com el visitant espera navegar pel nostre web.<\/p>\n

Si l\u2019usuari navega des d\u2019un ordinador de sobretaula, el ratol\u00ed ser\u00e0 l\u2019eina principal de navegaci\u00f3. En canvi, si accedeix des d\u2019un smartphone, la interacci\u00f3 ser\u00e0 t\u00e0ctil i, per tant, hem de facilitar aquesta experi\u00e8ncia en el nostre disseny web<\/strong>.<\/p>\n

Claus per a un bon disseny web responsive<\/h2>\n

Men\u00fa de navegaci\u00f3<\/h3>\n

\u00c9s essencial que el men\u00fa de navegaci\u00f3 sigui f\u00e0cil d\u2019utilitzar<\/strong> per a l\u2019usuari. Ho podem aconseguir amb un bot\u00f3 que desplegui el men\u00fa<\/strong> del nostre disseny web<\/strong>, ja sigui des d\u2019un lateral o cap avall. Aix\u00ed, optimitzem l\u2019espai i mantenim l\u2019ordre per a l\u2019usuari.<\/p>\n

\"dise\u00f1o<\/a><\/p>\n

 <\/p>\n

Imatges adaptables i coherents<\/h3>\n

Hem d\u2019assegurar-nos que les imatges del nostre disseny siguin realment adaptables<\/strong>. Han de veure\u2019s correctament tant en una pantalla de 27″ com en un iPhone<\/strong>.<\/p>\n

Tot i que aix\u00f2 \u00e9s b\u00e0sic, sovint s\u2019oblida un aspecte clau: la coher\u00e8ncia de les proporcions. Les imatges han de ser coherents amb l\u2019orientaci\u00f3 del dispositiu<\/strong> o pantalla. Si en la versi\u00f3 d\u2019escriptori utilitzem una imatge massa panor\u00e0mica, en un smartphone pot quedar redu\u00efda a una franja molt estreta i ampla, cosa que habitualment no t\u00e9 gaire sentit.<\/p>\n

Per aix\u00f2, el m\u00e9s recomanable \u00e9s oferir un tall intermig<\/strong> o b\u00e9 substituir la imatge<\/strong> en la versi\u00f3 per a m\u00f2bil.<\/p>\n

Ordre i jerarquia<\/h3>\n

L\u2019ordre en qu\u00e8 col\u00b7loquem cada secci\u00f3 del nostre disseny web \u00e9s fonamental. Quan adaptem el web a una mida de smartphone, la majoria de continguts quedaran en una sola columna, un sota l\u2019altre. Cal planificar l\u2019ordre en qu\u00e8 volem que l\u2019usuari visualitzi les seccions<\/strong>, situant les m\u00e9s importants tan amunt com sigui possible<\/strong>.<\/p>\n

Menys \u00e9s m\u00e9s<\/h3>\n

Seguint la l\u00f2gica anterior, el m\u00e9s recomanable quan dissenyem per a pantalles de m\u00f2bil \u00e9s eliminar les seccions que no siguin rellevants<\/strong> per als usuaris que accedeixen des d\u2019aquests dispositius. Per exemple, els t\u00edpics peus de p\u00e0gina es poden suprimir completament o, com a molt, deixar-hi nom\u00e9s una l\u00ednia amb la informaci\u00f3 de contacte.<\/p>\n

Utilitza totes les eines disponibles<\/h3>\n

Quan dissenyem l\u2019experi\u00e8ncia de navegaci\u00f3 per a m\u00f2bil, cal tenir en compte totes les funcionalitats addicionals que ofereix. Per exemple, si a la versi\u00f3 d\u2019escriptori hi ha un mapa de contacte, a la versi\u00f3 m\u00f2bil podem afegir un bot\u00f3 per obrir el navegador GPS<\/strong>. Tamb\u00e9 podem incorporar botons de trucada directa<\/strong> per facilitar la interacci\u00f3.<\/p>\n

Altres dades d\u2019inter\u00e8s<\/h2>\n

Actualment, les dades mostren que ja hi ha m\u00e9s usuaris que visiten webs des de dispositius m\u00f2bils<\/strong> que des d\u2019escriptori. Les xifres s\u00f3n: 51% de visites des de m\u00f2bil<\/strong>, 42% des d\u2019escriptori<\/strong> i un 7% restant des d\u2019altres dispositius.<\/p>\n

\"diseno<\/a><\/p>\n