Segurament menys del que et penses, i no te n'hauries assabentat, perquè només l'has vista a l'ordinador on es va dissenyar. La gent que decideix si et truca té un mòbil a la mà, és dreta en algun lloc i té un polze lliure.
Així es comprova bé en uns deu minuts, i això és el que pots fer amb el que trobis.
Per què una web que es veu bé al portàtil falla al mòbil?
Perquè «hi cap» i «funciona» són proves diferents, i la majoria de webs només passen la primera.
Gairebé totes les webs fetes en l'última dècada són responsive: la composició es recol·loca segons l'amplada de la pantalla. Aquesta part sol anar bé. El que es trenca és tot el que depenia d'un ratolí, d'una pantalla ampla o d'una connexió ràpida: menús que s'obren quan hi passes el ratolí per sobre, taules de preus que tenien tres columnes i ara no hi ha qui les llegeixi, formularis que eren curts al portàtil i al mòbil es fan eterns, i imatges pensades per a la portada d'un ordinador que el mòbil ha de descarregar senceres amb poca cobertura.
Res d'això no apareix quan es revisa el disseny. Apareix en forma de gent que se'n va.
Com ho comproves sense comprar res?
Tres passades. Fes-les en aquest ordre.
Primera passada: el teu propi mòbil, amb dades mòbils i no amb la wifi de l'oficina. Apaga la wifi. Carrega la teva portada. I fes el que faria un client: busca l'horari, busca un preu, arriba al formulari de contacte i envia't una consulta de prova. Cronometra-ho. Si qualsevol d'aquestes coses et porta més de tres tocs o has d'ampliar per llegir alguna cosa, aquí tens la troballa.
Segona passada: un mòbil que no sigui el teu. Si pot ser, d'una persona gran, amb una altra companyia i que no hagi vist mai la web. Dona-l'hi i no diguis res. Fixa't en quin punt dubta. Aprendràs més en noranta segons que amb qualsevol informe.
Tercera passada: la teva analítica. No endevinis quantes de les teves visites arriben des del mòbil. Obre Google Analytics, mira la categoria de dispositiu i compara el rebot i les conversions entre ordinador i mòbil. Si el trànsit mòbil és alt i les consultes des del mòbil no, ja saps on se'n van els diners. És el mateix diagnòstic que hi ha darrere de les visites que mai no es converteixen en consultes.
Què es trenca primer?
Més o menys en l'ordre en què m'ho trobo més sovint.
Objectius tàctils massa petits o massa junts. Botons, opcions del menú i enllaços pensats per a un cursor. La WCAG 2.2 fixa el mínim en 24 per 24 píxels CSS per als objectius de punter, en el criteri de conformitat 2.5.8 (W3C, Understanding SC 2.5.8 Target Size (Minimum)), i això és un mínim, no una meta. Dos enllaços apilats a pocs píxels en un peu de pàgina vol dir que algú prem una vegada i una altra el que no és i acaba rendint-se.
El telèfon que no és un enllaç. Si el teu número està escrit com a text pla o, pitjor, posat dins d'una imatge, tocar-lo no fa res. En un mòbil hauria de trucar. I si dones un WhatsApp, el botó hauria d'obrir el xat directament. És un arranjament de cinc minuts que la gent deixa passar durant anys.
Formularis que demanen massa. Cada camp és un motiu per abandonar en una pantalla petita. Nom, contacte i un camp per al missatge. Posa el tipus de teclat correcte a cada camp, perquè el del correu tregui el teclat del correu i el del telèfon, el teclat numèric. I comprova que de debò s'envia, perquè els formularis que fallen en silenci són l'error més car que pot tenir una web petita.
El menú amagat amb tot a dins. Una icona d'hamburguesa està bé. Una icona d'hamburguesa que amaga catorze opcions, de les quals n'importen tres, no. Les dues o tres coses per a les quals ve la gent s'haurien de veure sense obrir res.
Capçaleres fixes que es mengen la pantalla. Una barra fixa queda endreçada al portàtil i s'empassa un terç de la pantalla del mòbil. Pitjor encara, pot quedar a sobre del camp que acabes de tocar, i no veus el que escrius.
Text posat dins d'una imatge. Bàners amb l'oferta escrita dins del JPEG. En una pantalla estreta aquest text s'encongeix fins a desaparèixer, i no es pot seleccionar, traduir ni llegir en veu alta.
Taules. Les llistes de preus i les taules de característiques pensades per a una pantalla ampla surten per un costat o s'aixafen en columnes que ningú no pot llegir. En un mòbil normalment s'han d'apilar com a targetes.
Això afecta si surts o no a Google?
Sí, i més directament del que espera la majoria.
Google diu clarament que fa servir la versió mòbil del contingut d'una web, rastrejada amb el seu agent per a telèfons intel·ligents, per indexar-la i posicionar-la (Google Search Central, indexació mobile-first). La versió que es jutja és la del mòbil. La seva guia també avisa que, si la web mòbil té menys contingut que la d'ordinador, pots perdre trànsit, perquè Google té menys material amb què treballar.
A la pràctica: si al mòbil amagues part dels textos dels teus serveis perquè la composició quedi neta, és com si aquest text no fos a la teva web. Posa'l en un desplegable o en una pestanya en lloc de treure'l. Això és a la base de sortir a les cerques locals, on qui busca gairebé sempre ho fa des del mòbil.
I la velocitat al mòbil?
Prova-la amb la connexió que tenen els teus clients, no amb la de la teva oficina.
Les Core Web Vitals de Google consideren un problema un Largest Contentful Paint de més de 2,5 segons, i en un mòbil aquest element més gran és gairebé sempre la imatge principal. Enviar al mòbil una imatge de la mida de l'ordinador és la causa més habitual, i l'arranjament és cosa del programador: dimensions correctes per a cada dispositiu, formats moderns i que res no es carregui abans que calgui. Tota la cadena l'explico a per què la teva web va lenta.
Necessites una web a part per al mòbil?
No. Aquesta solució va morir fa anys i va deixar un munt de subdominis m. abandonats. Una web, un sol contingut, amb una composició diferent segons l'amplada.
Els maquetadors visuals ho compliquen. Gairebé tots et deixen ajustar la vista mòbil per separat, cosa que és útil i també vol dir que algú ho ha de fer de debò. Una plantilla que mai no es va ajustar per al mòbil no és culpa de l'eina. És una feina per acabar.
Arreglar-la o refer-la?
Arreglar-la, en la majoria de casos. Objectius tàctils, un telèfon que truca, un formulari més curt, un menú retallat i imatges de la mida correcta són hores de feina sobre la web que ja tens, no un projecte.
Refés-la quan la versió mòbil està trencada perquè la web és tan antiga que el disseny responsive s'hi va afegir després, quan va lenta per l'estructura i no per les imatges, o quan l'havies de redissenyar de totes maneres. Si ets en aquest punt, fes-ho sense llençar les posicions que ja tens a Google. El que costa depèn sobretot del nombre de pàgines, de si hi ha botiga o reserves i de quants idiomes porta, i els meus preus són a la pàgina de preus.
En qualsevol cas, fes avui la primera passada. Mòbil a la mà i sense wifi: intenta contractar-te a tu mateix.
Si prefereixes que ho faci una altra persona, escriu-me i el mateix dia laborable tens un preu tancat i una data per arreglar-ho.