Obres una web al mòbil i has de fer zoom, moure el dit d'un costat a l'altre i endevinar on tocar. Això és una web que no és responsive. El disseny web responsive fa que la teva pàgina es vegi i funcioni bé en qualsevol pantalla, sense versions separades. Aquí veuràs què és, com funciona i per què avui és obligatori.
Pensa en l'última vegada que vas entrar en una web des del mòbil i vas haver de fer zoom per llegir, o vas prémer un botó i vas tocar el del costat. Frustra, i el normal és tancar i buscar en un altre lloc. Aquest és el problema que resol el disseny web responsive: que la teva web es vegi i funcioni bé a la pantalla que sigui, sense que l'usuari s'hi hagi de barallar.
El disseny web responsive és la manera de construir una web perquè s'adapti sola a la mida de la pantalla. A l'ordinador aprofita l'amplada; al mòbil, el contingut s'apila en una sola columna, la lletra creix i els botons s'engrandeixen. És la mateixa web, amb el mateix contingut, reordenant-se segons on s'obri. El terme el va popularitzar el dissenyador Ethan Marcotte el 2010, i avui és l'estàndard; ho explica bé la documentació de Mozilla (MDN).
Fa anys es feien dues webs: la «normal» i una «m.latevaweb.com» per a mòbils. Això ja no es porta, i dona problemes: dues webs per mantenir, contingut que es descquadra i embolics de SEO. El disseny web responsive és una sola web que s'adapta a tot. Una adreça, un contingut, zero duplicats.
No és una moda. És que la gent ja no entra des de l'ordinador. La majoria de les visites arriben des del mòbil, i si la teva web no està pensada per a això, perds gairebé tothom abans de començar.
A això s'hi suma Google. Des de fa anys fa servir la versió mòbil de la teva web per decidir la teva posició (el que s'anomena «mobile-first»). Una web que no és responsive no només es veu malament: posiciona pitjor. Google t'empeny cap avall per no cuidar el mòbil.
Per dins, el disseny web responsive es recolza en tres idees senzilles:
Si vols el detall tècnic, la guia de web.dev de Google ho explica amb exemples.
Això no va de tecnicismes, va de vendes. Una web responsive:
Es detecten a la primera:
El disseny web responsive ha canviat l'ordre de les coses. Abans es dibuixava la web per a l'ordinador, amb espai de sobres, i després s'encongia a la força per al mòbil. El resultat gairebé sempre era una versió mòbil atapeïda, amb elements que sobraven i textos que no hi cabien.
L'enfocament «mobile-first» ho capgira: primer es pensa com es veu i s'usa al mòbil, amb l'essencial a la vista i un sol camí clar cap a l'acció. Després s'aprofita l'espai extra de l'ordinador. Com que el mòbil és on hi ha la majoria de la teva gent, començar per aquí t'obliga a quedar-te amb el que de debò importa i a treure el soroll. I una web sense soroll converteix millor en qualsevol pantalla.
Una web responsive és el punt de partida, però no n'hi ha prou per si sola. Ha d'anar de la mà d'una bona velocitat de càrrega, perquè al mòbil cada segon compta, i de pàgines pensades per convertir. Si envies trànsit a una landing page que es veu bé i carrega ràpid al mòbil, la teva taxa de conversió puja sola. Tot això és part d'un bon disseny i desenvolupament web, i alimenta la teva generació de leads.
No cal ser tècnic. Obre la teva web al mòbil i fes-te tres preguntes: es llegeix sense fer zoom?, el botó principal es veu a la primera?, pots navegar amb el polze sense errar? Una altra prova ràpida a l'ordinador: encongeix la finestra del navegador i mira si el contingut es reordena amb ordre o es trenca. Si alguna cosa falla, la teva web t'està costant clients. Per a la base teòrica, la entrada de disseny web a la Viquipèdia resumeix el concepte.
A Magnes Factory no fem webs «per a l'ordinador» i després les apanyem per al mòbil. Comencem al revés:
Si la teva web dona guerra al mòbil, gairebé segur que hi estàs perdent vendes. Escriu-nos i hi fem una ullada.
El disseny web responsive és la tècnica que fa que una mateixa web s'adapti a qualsevol pantalla: mòbil, tauleta o ordinador. El contingut es reordena sol perquè sempre es llegeixi bé i sigui fàcil d'usar, sense tenir una versió a part per a cada dispositiu.
Perquè la majoria de la gent entra des del mòbil. Si la teva web no s'adapta, es veu malament, costa fer-la servir i se'n van. A més Google indexa la versió mòbil primer, així que una web no responsive posiciona pitjor.
A la pràctica sí que es fan servir com a sinònims. «Responsive» ve de l'anglès i «adaptable» és la seva traducció. Tots dos descriuen una web que canvia el disseny segons la mida de la pantalla.
Obre-la al mòbil: si has de fer zoom per llegir o els botons són diminuts, no ho és. També pots reduir la finestra del navegador a l'ordinador; si el contingut es desordena o apareix una barra horitzontal, falla.
Depèn de la mida de la web. Avui una web nova ja es fa responsive de sèrie, sense cost extra. Adaptar-ne una d'antiga que no ho és pot costar més, però gairebé sempre surt a compte pel que es guanya en vendes i posicionament.
Sí. Google fa servir la versió mòbil de la teva web per posicionar-te i valora que sigui fàcil d'usar al mòbil. Una web responsive ràpida i clara té avantatge davant d'una que obliga a fer zoom.
L’ajut del Govern per digitalitzar el teu negoci torna a obrir-se. Quan obre, s’esgota: es concedeix per ordre d’arribada i qui hi arriba amb els papers fets hi entra; qui comença a mirar-s’ho aquell dia, no.
El que solen demanar: ser autònom, microempresa o pime amb domicili fiscal a Espanya, estar al corrent amb Hisenda i la Seguretat Social i tenir fet el test d’autodiagnòstic. El calendari el publica el Govern a acelerapyme.gob.es.