Què és el disseny web responsive i com funciona de debò

Què és el disseny web responsive

El disseny web responsive (o disseny web adaptatiu) és la tècnica que fa que una pàgina web ajusti el seu layout, tipografia i imatges automàticament segons la mida de pantalla del dispositiu que la visita, sense crear versions separades del lloc. El resultat és una sola URL que funciona bé tant en un mòbil de 360 px com en un monitor de 2560 px.

El terme el va encunyar Ethan Marcotte el 2010 en un article per a A List Apart, i des de llavors s'ha convertit en l'estàndard de facto de la indústria. La idea central és senzilla: en lloc de preguntar "quin dispositiu fa servir aquest visitant?", el disseny pregunta "quant espai tinc disponible?" i es reorganitza en conseqüència.

Tres pilars tècnics fan possible això:

1. Grid fluid: les columnes es defineixen en percentatges, no en píxels fixos, i així escalen amb el contenidor.
2. Imatges flexibles: amb max-width: 100% una imatge mai desborda el seu contenidor.
3. Media queries de CSS: regles que apliquen estils diferents segons l'amplada (o alçada, orientació, resolució) de la pantalla.

Per què el disseny responsive importa el 2026

Més del 60 % del trànsit web global arriba des de dispositius mòbils, segons les dades de Statcounter. Això sol ja justifica la inversió, però hi ha dues raons més que pesen encara més a la pràctica.

La primera és l'índex Mobile First de Google. Des del 2019, Google indexa i posiciona les pàgines a partir de la seva versió mòbil. Si el teu web es trenca en pantalles petites, el teu posicionament se'n ressent directament. No és un advertiment futur: passa avui.

La segona és l'experiència d'usuari. Un web que el visitant ha de pessigollejar i fer zoom per llegir perd conversions en qüestió de segons. Google ho mesura a través de les Core Web Vitals, on l'apartat d'estabilitat visual (CLS) penalitza precisament els layouts que es reordenen malament en carregar.

Un disseny responsive ben executat no és només estètica: és infraestructura de negoci. Un web que no s'adapta al mòbil regala visites a la competència.

Com funciona tècnicament: media queries, flexbox i CSS Grid

El nucli tècnic del disseny responsive és la media query de CSS, una condició que activa un bloc d'estils només quan es compleix. L'exemple més habitual:

@media (max-width: 768px) {
  .columnas {
    flex-direction: column;
  }
}

Aquesta regla converteix un layout de columnes horitzontals en un apilament vertical quan la pantalla mesura menys de 768 px. Els breakpoints més usats el 2026 continuen sent els que va popularitzar Bootstrap: 576 px (mòbil petit), 768 px (tauleta), 992 px (tauleta gran / portàtil) i 1200 px (escriptori).

Juntament amb les media queries, Flexbox i CSS Grid són les eines modernes que van reemplaçar els hacks de flotació de fa una dècada. Flexbox resol molt bé l'alineació de components en una sola dimensió (menús, targetes, barres d'eines). CSS Grid és més potent per a layouts bidimensionals complets, com l'estructura general d'una pàgina.

Per a la tipografia adaptable hi ha dos enfocaments complementaris:

• Unitats relatives (rem, em, %) en lloc de píxels fixos en la mida de lletra.
• Viewport units (vw, vh) per a mides que escalen proporcionalment amb la pantalla, tot i que convé combinar-les amb clamp() per evitar textos massa petits o massa grans.

Un detall que s'oblida amb freqüència és l'etiqueta <meta name="viewport"> al <head> de l'HTML. Sense ella, els navegadors mòbils renderitzen la pàgina a 980 px i la redueixen a escala, que és justament el contrari del que volem. La versió estàndard és:

<meta name="viewport" content="width=device-width, initial-scale=1">

La documentació de MDN sobre disseny adaptatiu cobreix aquests conceptes amb exemples interactius si vols aprofundir en el codi.

Eines i frameworks per al disseny web responsive

Les eines adequades redueixen a la meitat el temps de desenvolupament i minimitzen els errors. Aquí teniu les més usades el 2026, segons el tipus de projecte:

Bootstrap continua sent el framework més instal·lat en projectes WordPress, però Tailwind ha guanyat molt terreny en desenvolupaments a mida perquè genera CSS més lleuger en producció.

Per comprovar si un web ja publicat és responsive, Chrome DevTools és el punt de partida: F12 > icona de dispositiu > tria el model de mòbil. Per a proves més rigoroses amb dispositius reals, BrowserStack és la referència del sector.

Exemples de disseny web responsive a la pràctica

Entendre el concepte és més fàcil veient què canvia entre pantalles. Aquests són els patrons més habituals:

• Menú hamburguesa en mòbil: el menú de navegació horitzontal de l'escriptori es replega en una icona de tres línies que desplega un panell vertical. És el patró més reconeixible del disseny responsive.
• Columnes que s'apilen: un layout de tres columnes en escriptori passa a una sola columna en mòbil, en ordre de prioritat de contingut.
• Imatges retallades amb object-fit: en lloc de deformar la imatge, es retalla l'enquadrament perquè encaixi en l'espai disponible sense distorsió.
• Taules amb scroll horitzontal: quan una taula no cap en mòbil, s'embolica en un contenidor amb overflow-x: auto perquè l'usuari pugui lliscar.
• Tipografia que creix amb la pantalla: títols que en mòbil mesuren 24 px i en escriptori arriben a 48 px gràcies a clamp() o media queries específiques.

Molts negocis locals a Lleida tenen webs que en escriptori es veuen raonablement bé però perden clients en mòbil perquè els botons de crida a l'acció queden fora de vista o els formularis són impossibles d'omplir amb el polze. És un problema de conversió abans que de disseny.

Errors freqüents que trenquen el responsive

Saber què falla en les implementacions dolentes estalvia molt temps de depuració:

• Imatges amb amplada fixa en píxels: si poses width: 800px en una imatge, en mòbil desbordarà el contenidor. La solució és sempre max-width: 100%.
• Text massa petit en mòbil: Google penalitza el text per sota de 12 px. La mida base recomanada per al cos de text és 16 px.
• Elements tàctils massa petits: botons o enllaços de menys de 44x44 px són difícils de prémer amb el dit. Les guies d'accessibilitat de W3C ho recullen com a criteri d'èxit.
• Ús de px absoluts en media queries: si l'usuari té la lletra del navegador augmentada, els breakpoints en píxels poden comportar-se de manera inesperada. Molts desenvolupadors prefereixen em a les media queries per aquest motiu.
• No provar en dispositius reals: el simulador del navegador ajuda, però no reprodueix exactament el comportament d'un iPhone o un Android físic.

Disseny responsive i WordPress

La majoria de projectes WordPress el 2026 fan servir temes que es declaren responsive, però "responsive" a la fitxa de producte d'un tema i "responsive que funciona bé al teu web específic" no sempre és el mateix. Els constructors de pàgina com Elementor o Bricks Builder inclouen controls de responsive per columna i per secció, cosa que dóna molta flexibilitat, però també multiplica les maneres de trencar-ho si no es revisa en cada breakpoint.

Si estàs començant amb WordPress, l'article sobre com crear un lloc web amb WordPress des de zero cobreix el procés complet, inclosa la selecció del tema amb criteris de rendiment i adaptabilitat.

Per a un projecte on el disseny responsive ha d'estar garantit des de l'arquitectura, no apedaçat després, l'enfocament de disseny web a mida permet definir els breakpoints i el comportament de cada component des del primer esbós, sense dependre del que el tema permeti o no.

Si tens un projecte en marxa i no estàs segur de si el teu web passa el tall en mòbil, escriu-nos i fem una revisió: en la majoria de casos els problemes de responsive es detecten i es resolen en una auditoria inicial.