Disseny adaptatiu: com saber si el teu web aguanta el mòbil
El disseny adaptatiu prepara unes quantes maquetes d'amplada fixa i mostra la que toca segons la pantalla; el responsive en fa una de sola, fluida, que s'ajusta a qualsevol amplada. Per al negoci, la tècnica compta menys que el resultat: Google indexa a partir de la versió mòbil, i el que no hi surt no compta per posicionar-te.
Per a qui té un web, o l'ha d'encarregar, i vol saber si funcionarà bé al mòbil.
Responsive, servei dinàmic i URL separades: les tres configuracions de Google
Adaptatiu o responsive: què canvia de debò
Tots dos volen el mateix, que el web funcioni a qualsevol pantalla; canvia com s'hi arriba. Avui el responsive és l'enfocament estàndard, segons MDN, i mètodes de maquetació com Flexbox i CSS Grid ja són fluids de base.
El nostre criteri: no discuteixis el nom de la tècnica, que a més es confon: la documentació de Google en castellà anomena «diseño adaptable» el responsive. Sigui quina sigui, abans d'acceptar el lliurament comprova amb el teu mòbil el contingut, el menú, els formularis i la velocitat.
El que Google mira quan entra pel mòbil
Des del 5 de juliol de 2024, Google rastreja amb el seu robot de mòbil, Googlebot Smartphone, i un web que no és accessible des del mòbil deixa de ser indexable. La seva guia en destaca quatre:
El mateix que a l'ordinador
Només el que surt al mòbil es fa servir per indexar. Plegar-lo en acordions o pestanyes és correcte; treure'l, no.
Les mateixes metadades
Title, meta description, etiquetes robots i dades estructurades, equivalents a totes dues versions.
Bona resolució i el mateix alt
Res d'imatges massa petites o d'URL que canviïn a cada càrrega, i el mateix text alternatiu.
Res amagat darrere d'un toc
Google no carrega el contingut que només apareix si algú llisca, fa clic o escriu.
També compta la velocitat: les Core Web Vitals formen part dels sistemes de rànquing de Google. Els llindars de «bo», amb dades de visites reals:
Compte: Google diu que sempre busca el contingut més rellevant, encara que l'experiència sigui fluixa. Una bona nota ajuda, però no et posa primer.
Cinc errors que es veuen en un minut
Què has de demanar abans de signar
El mateix contingut a totes les pantalles
Per escrit: tot el text, les imatges i els enllaços de l'ordinador també al mòbil, encara que plegats.
Proves en mòbils de veritat
L'emulador ajuda, però el tacte, el teclat i una connexió lenta es proven amb un telèfon. Pregunta amb quins.
Com mesuraran la velocitat
Lighthouse abans de publicar i, amb visites reals, l'informe de Core Web Vitals de Search Console.
Accessibilitat de base
Zoom permès, text ampliable fins al 200 %, botons de 24 píxels com a mínim i cap bloqueig de l'orientació.
Revisa el teu web amb el mòbil a la mà
Deu comprovacions per fer amb el teu telèfon a les pàgines que més t'importen. Van per ordre d'impacte: la primera que falla és la primera que has d'arreglar. No es desa res.
Contesta les deu comprovacions i veuràs què has d'arreglar.
El teu web aguanta el mòbil. Repeteix-la quan canviïs la plantilla o el menú.
Cap error a la vista, però et queden comprovacions per fer.
Tens feina concreta. Comença per la de sota.
El mòbil no està resolt. Amb tres errors o més, revisa la plantilla sencera abans de fer retocs.
Arregla primer
Torna el contingut al mòbil. Google indexa aquesta versió. Si et cal espai, plega'l en acordions, però no el treguis.
Revisa el viewport. Sense aquesta meta tag, el mòbil pinta la pàgina com si fos d'ordinador. Si hi és, busca l'element més ample que la pantalla.
Arregla el menú. Si un submenú només s'obre passant-hi el ratolí per sobre, al mòbil no s'hi arriba.
Prova el formulari sencer. Camps que es vegin, teclat numèric al del telèfon i un enviament que arribi.
Canvia la finestra per un bàner. Una franja petita que deixi llegir, no una capa sobre tota la pàgina.
Aprima la primera imatge. Serveix-la a la mida del mòbil i no en difereixis la càrrega. La LCP bona és de 2,5 s o menys.
Fes més grans els botons. Almenys 24 × 24 píxels CSS, o més espai entre els petits.
Reserva l'espai del que carrega tard. Amplada i alçada a les imatges, i compte amb anuncis i fonts.
Desbloqueja el zoom. Treu user-scalable=no del viewport: deixa sense llegir qui hi veu poc.
Deixa girar la pantalla. Bloquejar l'orientació només es justifica si és imprescindible.
Després, revisa
- Contingut
- Lectura
- Menú
- Formulari
- Finestres
- Velocitat
- Botons
- Salts
- Zoom
- Horitzontal
Revisió orientativa, amb el nostre criteri.
Quan el mòbil ja no es resol retocant
- La revisió et dona tres errors o més i cada arranjament n'espatlla un altre.
- Search Console et marca URL lentes al mòbil i no saps què les frena.
- Dubtes entre arreglar el web que tens o fer-ne un de nou.
- Encarregues un web i vols el mòbil resolt des del principi.
A Daimatics fem webs en què el disseny, el SEO, la velocitat i la mesura es pensen alhora, des del primer esbós. I el web queda a nom teu.
Dubtes sobre el disseny adaptatiu
El que al mòbil no hi és, per a Google tampoc no hi és. Revisa el teu web primer amb el telèfon.
Quina diferència hi ha entre disseny adaptatiu i responsive?
És millor un web adaptatiu o responsive per al SEO?
Què vol dir mobile first?
Com sé si el meu web està adaptat al mòbil?
Google penalitza un web que no està adaptat al mòbil?
Fonts oficials
Google Search Central
- Indexació mobile-first
- Només Googlebot Smartphone
- Experiència de pàgina
- Finestres intrusives
- Retirada de la prova per a mòbils
- Informe de Core Web Vitals
web.dev i Chrome for Developers
MDN i W3C
