Per què la teva web es veu malament al mòbil (i què significa exactament)
Una web "es veu malament al mòbil" quan el seu disseny no s'adapta a la mida de pantalla del dispositiu: el text queda massa petit per llegir sense fer zoom, els botons se superposen, les imatges surten del marc o el menú desapareix darrere d'altres elements. No és un problema estètic menor: és una ruptura funcional que impedeix a l'usuari fer allò que ha vingut a fer.
L'origen sol ser un d'aquests tres casos:
- Disseny antic sense responsive: la web es va construir fa anys amb una maquetació fixa en píxels, pensada per a escriptori. Al mòbil es mostra exactament igual, comprimida.
- Plantilla responsive mal configurada: la plantilla diu ser adaptable, però els estils personalitzats o els plugins afegits trenquen el comportament en pantalles petites.
- Absència de proves reals: la web es va dissenyar només mirant l'ordinador. Ningú va comprovar com quedava en un iPhone de 390 píxels d'amplada ni en un Android amb la mida de font del sistema augmentada.
Més del 60 % del trànsit web global arriba des de dispositius mòbils, segons dades de Statcounter GlobalStats. Si la teva web falla al mòbil, falla per a la majoria de les teves visites.
Com saber amb certesa si la teva web té un problema real al mòbil
Pots detectar-ho sense ser tècnic utilitzant tres mètodes que aporten informació complementària:
-
La prova més directa: obre la teva web des del teu propi mòbil i navega com ho faria un client. Intenta fer allò que esperes que faci un usuari: trucar, emplenar un formulari, afegir un producte al carret. Si a tu et costa, a ells també els costarà.
-
Google Search Console: a l'apartat Experiència > Usabilitat en dispositius mòbils apareix un informe amb les URL concretes que Google detecta com a problemàtiques i el motiu exacte (text massa petit, elements clicables massa junts, contingut més ample que la pantalla).
-
L'eina de prova d'usabilitat mòbil de Google: a search.google.com/test/mobile-friendly introdueixes la teva URL i obtens un diagnòstic immediat amb una captura de com Google veu la teva pàgina des d'un dispositiu mòbil.
Quins errors apareixen més en aquests informes
| Error detectat | Què significa a la pràctica |
|---|---|
| Text massa petit | L'usuari necessita fer zoom per llegir; abandona abans |
| Elements clicables massa junts | Els botons i enllaços es toquen; es prem el que no és |
| Contingut més ample que la pantalla | Apareix scroll horitzontal; la pàgina sembla trencada |
| Viewport no configurat | El navegador no sap com escalar la pàgina al mòbil |
Per què una web trencada al mòbil destrueix les vendes
Si la teva web es veu malament al mòbil i no es ven res, la relació causa-efecte és directa i quantificable al teu propi Google Analytics: compara la taxa de rebot i la durada de sessió entre usuaris d'escriptori i de mòbil. A la majoria de webs amb aquest problema, el mòbil té un rebot entre 20 i 40 punts percentuals més alt que l'escriptori.
El mecanisme és simple. Un usuari arriba des de Google o des d'un anunci, veu que la pàgina triga a carregar o que el text és il·legible, i torna enrere en menys de deu segons. No ha vist la teva oferta, no ha llegit el teu preu, no ha trobat el número de telèfon. Aquest rebot indica a Google que la teva pàgina no ha satisfet la cerca, i això pressiona el posicionament a la baixa amb el temps.
El problema s'agreuja a les botigues en línia. Si el procés de compra té un pas que no funciona al mòbil —un botó que no respon, un camp de formulari que el teclat del mòbil tapa sense que la pàgina es desplaci— el carret s'abandona en aquell punt exacte, repetidament, sense que el propietari sàpiga per què.
Des que Google va adoptar el mobile-first indexing, la versió que Google indexa i avalua de la teva web és la versió mòbil, no la d'escriptori. Si la teva web té contingut o estructura diferent al mòbil (o directament està trencada), el que Google està indexant és la pitjor versió del teu negoci. Pots llegir més sobre com això afecta el posicionament a la documentació oficial de Google sobre mobile-first indexing.
Quan es pot arreglar la web actual i quan cal refer-la
La resposta depèn dels anys que té la web i de com està construïda, no del que costi cada opció. Hi ha quatre situacions habituals:
- Plantilla responsive amb configuració trencada: es pot arreglar ajustant els estils CSS i revisant els plugins en conflicte. Temps estimat: entre mig dia i dos dies de treball tècnic.
- WordPress amb constructor visual (Elementor, Divi, etc.) descuidat: cal revisar secció per secció els breakpoints mòbils del constructor. És laboriós però no requereix refer res des de zero.
- Web feta amb HTML fix sense responsive: afegir responsive a una estructura que no ho va contemplar des de l'inici és com reformar l'estructura d'un edifici. Tècnicament és possible, però el cost i el temps solen superar els de fer una web nova correctament.
- Web en plataforma obsoleta o sense accés al codi: si la web està en un sistema del qual ja no tens suport o accés, o si va ser una web de baix cost sense codi editable, l'única sortida pràctica és refer-la.
La pregunta concreta que t'has de fer no és "arreglo o refaig?" sinó "a quant ascendeix el cost d'arreglar-ho i quant de temps porta, comparat amb una solució que a més millori la velocitat, el SEO i la capacitat de venda?" Si el diagnòstic tècnic indica que el problema és profund, un disseny web a mida construït amb responsive real des del primer píxel pot ser més eficient que apedaçar alguna cosa que continuarà donant problemes.
Què ha de tenir una web per funcionar bé al mòbil
Que una web es vegi bé al mòbil no significa només que "càpiga a la pantalla". Aquests són els requisits que de veritat marquen la diferència en conversió:
- Velocitat de càrrega: al mòbil, la connexió és menys estable. Google recomana que el Largest Contentful Paint (el temps fins que apareix el contingut principal) sigui inferior a 2,5 segons.
- Tipografia llegible sense zoom: mida mínima de 16 píxels al cos del text.
- Botons i CTAs amb àrea de toc suficient: mínim 44x44 píxels, amb espai entre ells.
- Formularis optimitzats: els camps han d'activar el teclat correcte (numèric per a telèfons, tipus email per a correus) i la pàgina s'ha de desplaçar perquè el camp actiu quedi visible.
- Imatges optimitzades: una imatge de 3 MB que a l'escriptori passa desapercebuda al mòbil mata la velocitat de càrrega.
- Menú de navegació adaptat: un menú horitzontal d'escriptori amb vuit opcions no cap al mòbil. Cal redissenyar-lo, no comprimir-lo.
