Disseny responsive i mobile first: molt més que adaptar una web al mòbil

Hui donem pràcticament per fet que una web ha de funcionar en el mòbil. El problema és que “funcionar” pot significar coses molt diferents.

Una pàgina pot cabre dins de la pantalla d’un telèfon i continuar sent incòmoda d’utilitzar. Pot tindre textos massa menuts, botons difícils de prémer, menús poc pràctics, blocs que apareixen en un orde estrany o elements dissenyats pensant en un ratolí que perden tot el sentit quan interactuem amb ells utilitzant el dit.

Per això, quan parlem de disseny responsive i de mobile first, no parlem simplement d’aconseguir que una web es faça més menuda. Parlem de dissenyar una experiència capaç d’adaptar-se a l’espai disponible sense perdre claredat, funcionalitat ni jerarquia.

I encara que els dos conceptes solen utilitzar-se junts, responsive i mobile first no signifiquen exactament el mateix.

Què significa realment que una web siga responsive

El disseny responsive permet que una mateixa web adapte la seua distribució a diferents grandàries i característiques de pantalla. Una composició que utilitza diverses columnes en un monitor gran pot passar a dos columnes en una tauleta i reorganitzar-se completament quan es visualitza des d’un telèfon.

La idea pareix senzilla, però una bona implementació va prou més enllà de tindre una versió per a escriptori, una altra per a tauleta i una altra per a mòbil.

Actualment existix una enorme varietat de grandàries, resolucions i proporcions de pantalla. Entre un telèfon menut i un monitor ultrapanoràmic tenim portàtils, tauletes, dispositius plegables, finestres del navegador que no ocupen tota la pantalla i multitud de situacions intermèdies. Intentar dissenyar una versió específica per a cada una seria impossible.

Per això resulta més útil pensar en interfícies flexibles que en una col·lecció tancada de dispositius.

El contingut, les imatges, les columnes, els espais i els diferents components han de poder reorganitzar-se de manera natural segons l’espai disponible. La documentació de MDN sobre responsive web design explica precisament este enfocament com una manera de construir layouts capaços de funcionar correctament entre diferents grandàries i resolucions de pantalla.

Això enllaça amb una cosa que ja comentàvem quan parlàvem de què necessita actualment una web professional: que una web funcione correctament en mòbil ja no hauria de considerar-se una característica addicional, sinó part de la qualitat bàsica del projecte.

Responsive i mobile first no són exactament el mateix

Encara que moltes vegades s’utilitzen quasi com a sinònims, convé separar els dos conceptes.

Responsive descriu principalment el comportament de la interfície: una web capaç d’adaptar-se correctament a diferents espais disponibles.

Mobile first, en canvi, descriu una manera de plantejar el disseny i el desenvolupament.

En un enfocament tradicional podem començar construint una versió ampla per a escriptori i, després, anar reduint, recol·locant o eliminant elements fins a aconseguir que tot funcione dins d’una pantalla menuda.

Mobile first planteja el procés en sentit contrari. Primer construïm una experiència clara i funcional per a l’espai més limitat i, a mesura que augmenta l’amplària disponible, ampliem progressivament les possibilitats del disseny.

Podem introduir noves columnes, utilitzar composicions més àmplies, incrementar espais, modificar alineacions o mostrar informació secundària d’una manera diferent quan realment disposem de l’espai necessari per a fer-ho.

MDN utilitza precisament este plantejament quan explica l’ús de media queries i disseny mobile first: començar amb una disposició adequada per a pantalles estretes i anar afegint complexitat a mesura que augmenta l’espai disponible.

Això no significa que dissenyem únicament per a mòbils. Significa que comencem per allò essencial i ampliem després l’experiència en lloc d’intentar comprimir-la.

El problema de dissenyar primer per a escriptori i encongir després

Dissenyar pensant inicialment en una pantalla gran resulta còmode perquè disposem de molt d’espai. Podem col·locar imatges enormes, diverses columnes, menús complets, elements secundaris i molta informació visible simultàniament.

Els problemes apareixen quan intentem traslladar posteriorment eixa mateixa composició a una pantalla d’uns pocs centímetres.

De sobte, una navegació que funcionava perfectament deixa de cabre. Quatre columnes han de convertir-se en una. Una gran imatge ocupa pràcticament tota la primera pantalla. Determinats controls són massa menuts per a utilitzar-los amb el dit i alguns blocs necessiten canviar completament de posició perquè el contingut conserve el sentit.

És aleshores quan comença una espècie de negociació permanent amb el disseny: què ocultem, què reduïm, què movem i què deixem com estava encara que ja no funcione massa bé.

El resultat pot acabar sent una versió comprimida del disseny d’escriptori en lloc d’una interfície realment pensada per a mòbil.

L’enfocament mobile first obliga a prendre abans algunes d’eixes decisions. Què necessita vore primer l’usuari? Quina és l’acció realment important? Quina informació és secundària? Quins elements necessiten espai per a poder utilitzar-se còmodament?

I el més interessant és que respondre bé a estes preguntes sol millorar també la versió d’escriptori. Dissenyar amb restriccions obliga a establir prioritats.

Un mòbil no és simplement un monitor menut

Un dels errors més habituals quan es planteja un disseny responsive és pensar únicament en dimensions.

L’experiència canvia perquè també canvia la manera d’utilitzar el dispositiu.

En un ordinador disposem normalment d’un teclat, un punter precís i una pantalla relativament gran. En un telèfon utilitzem els dits, podem navegar amb una sola mà, estar caminant, trobar-nos sota el sol, utilitzar una connexió mòbil pitjor que la fibra de casa o consultar una pàgina durant només uns segons.

Tot això afecta directament les decisions de disseny.

Els botons necessiten superfícies prou còmodes per a prémer-los. Els formularis haurien d’evitar camps innecessaris i utilitzar controls adequats. Els textos necessiten una grandària i una longitud de línia que permeten llegir sense esforç. Els menús han de ser fàcils d’obrir i recórrer, i les accions principals han de continuar sent evidents fins i tot quan desapareixen moltes de les possibilitats visuals que proporciona una pantalla gran.

També canvia l’orde del contingut. Dos blocs que apareixen junts en escriptori necessàriament hauran de col·locar-se un darrere de l’altre quan la composició passa a una sola columna. Decidir quin apareix primer deixa de ser una qüestió purament estètica i passa a afectar l’experiència.

Per això una bona experiència mòbil no es resol únicament afegint unes quantes media queries al final del desenvolupament. Obliga a pensar com s’utilitza realment la interfície.

Els breakpoints haurien de respondre al contingut, no a l’últim model de mòbil

Durant anys ha sigut prou habitual treballar amb una llista fixa de resolucions: mòbil, tauleta, portàtil i escriptori. Continua sent útil disposar d’algunes referències, però convertir-les en regles rígides té cada vegada menys sentit.

Un breakpoint hauria d’aparéixer principalment quan el disseny el necessita.

Si dos columnes comencen a quedar massa estretes, eixe pot ser el moment adequat per a convertir-les en una. Si una navegació deixa de tindre espai suficient, potser és el moment de canviar el seu comportament. Si una col·lecció de targetes comença a perdre llegibilitat, podem reduir el nombre de columnes.

No necessitem saber si eixa amplària correspon exactament a un iPhone, un Samsung Galaxy, una tauleta concreta o una finestra de Chrome reduïda manualment per l’usuari.

El que importa és detectar el punt en què el contingut deixa de funcionar correctament.

Esta és també la idea que planteja MDN quan explica les media queries: resulta més robust introduir els canvis quan el mateix contingut o la composició els necessiten que intentar perseguir una llista interminable de dispositius concrets.

Responsive també significa pensar en les imatges

Les imatges són un altre bon exemple de per què adaptar una web no hauria de limitar-se al layout.

Una fotografia pensada per a ocupar 1.600 píxels d’amplària en un monitor pot no necessitar el mateix arxiu quan acaba mostrant-se a 350 píxels dins d’un telèfon. Descarregar sempre la imatge més gran i limitar després la seua grandària mitjançant CSS pot funcionar visualment, però obliga el dispositiu a transferir informació que potser mai utilitzarà.

HTML disposa de mecanismes per a proporcionar diferents recursos segons les necessitats de representació, i una bona arquitectura frontend pot combinar grandàries adequades, formats moderns i una càrrega correctament prioritzada.

La conseqüència és doble: la composició s’adapta millor i, a més, evitem fer pagar a l’usuari mòbil, en dades i temps de descàrrega, per recursos destinats a una pantalla molt més gran.

Disseny responsive i rendiment estan molt més relacionats del que pareix

Una interfície pot estar perfectament organitzada en una pantalla mòbil i continuar oferint una experiència prou roïna si tarda massa a carregar o respon lentament.

En dispositius mòbils cobren especial importància qüestions com el pes de les imatges, la quantitat de JavaScript executat, les fonts utilitzades, els recursos externs o l’estabilitat visual mentre es carrega la pàgina.

Per això disseny responsive i rendiment haurien de treballar-se junts.

No té massa sentit construir una experiència mòbil visualment impecable si per a vore-la necessitem descarregar diversos megabytes de recursos innecessaris o esperar mentre el navegador processa una aplicació molt més pesada del que hauria de ser.

En el nostre article sobre per què una web ràpida ven més ja explicàvem que la velocitat no és només una mètrica tècnica: condiciona l’experiència, la percepció de qualitat i la possibilitat que l’usuari continue utilitzant la pàgina.

I quan volem analitzar el problema amb més precisió entren en joc mètriques com LCP, INP i CLS. En el nostre article sobre Core Web Vitals expliquem com utilitzar-les per a diagnosticar què està passant realment en una web en lloc de limitar-nos a perseguir una puntuació de PageSpeed.

Dissenyar per a mòbil també significa aprendre a prioritzar recursos.

Mobile first no significa fer una web més simple

Una altra interpretació prou habitual consistix a associar mobile first amb eliminar funcionalitats.

No té per què ser així.

Una aplicació complexa pot tindre una gran quantitat de ferramentes i continuar funcionant perfectament des d’un telèfon. La diferència està en com organitzem i presentem eixes funcions.

En una pantalla gran podem mostrar simultàniament una navegació lateral, filtres, informació secundària, contingut principal i diverses accions. En mòbil potser necessitem distribuir eixes mateixes possibilitats mitjançant menús, panells, pestanyes, acordions o controls contextuals.

La funcionalitat pot continuar estant disponible; el que canvia és la manera d’accedir-hi.

De fet, ací es troba una de les diferències entre simplement “fer responsive” una interfície i dissenyar-la realment per a diversos contextos. Si únicament canviem grandàries i amaguem allò que molesta, probablement estarem perdent funcionalitat. Si replantegem la interacció, podem conservar-la d’una manera molt més adequada.

Quina relació té mobile first amb el SEO?

L’experiència mòbil tampoc està aïllada del posicionament.

Google utilitza la versió mòbil del contingut d’una pàgina per als seus processos d’indexació i rànquing, el que denomina mobile-first indexing. En la seua documentació sobre mobile-first indexing, Google explica la importància que la versió mòbil mantinga el contingut i els elements rellevants de la pàgina.

Això no significa que existisca un truc SEO anomenat “mobile first” que faça pujar automàticament una pàgina en Google.

La conseqüència pràctica és prou més lògica: el contingut important, els enllaços, les imatges rellevants, les dades estructurades i la informació principal de la pàgina haurien de continuar disponibles en l’experiència mòbil.

Si construïm una versió d’escriptori completa i després reduïm la versió mòbil fins a deixar només una part del contingut, podem estar oferint una experiència pitjor tant als usuaris com als sistemes que necessiten interpretar eixa pàgina.

La solució no consistix a dissenyar pensant en Google. Consistix a evitar que el mòbil siga una versió de segona categoria.

Provar responsive és molt més que obrir DevTools i triar un iPhone

Les ferramentes del navegador faciliten moltíssim comprovar diferents dimensions, però una validació responsive seriosa hauria d’anar un poc més enllà.

Canviar l’amplària del viewport servix per a detectar molts problemes de layout, però també convé utilitzar realment la interfície: obrir el menú, omplir formularis, prémer botons, recórrer carrusels, provar filtres, canviar l’orientació de la pantalla, comprovar continguts llargs i revisar què passa amb missatges d’error, estats buits o components dinàmics.

També és important provar amplàries intermèdies.

Una interfície pot vore’s perfectament a 375 píxels i a 1.440 píxels i trencar-se d’una manera espectacular a 820. El famós territori en què ningú va fer una captura per a Figma però on també viuen usuaris.

Per això preferisc entendre responsive com un comportament continu i no com tres fotografies anomenades mòbil, tauleta i desktop.

Una bona web responsive no hauria de cridar l’atenció per ser responsive

Quan tot està ben resolt, probablement l’usuari ni tan sols hi pense.

Simplement pot llegir còmodament, navegar, trobar allò que busca, completar un formulari o utilitzar una aplicació independentment del dispositiu des del qual haja entrat.

Eixe hauria de ser l’objectiu.

Hui una web pot obrir-se des d’un telèfon menut, una tauleta, un portàtil, un monitor enorme, una finestra que ocupa mitja pantalla o dispositius que encara ni tan sols havíem tingut en compte quan es va dissenyar el projecte.

Intentar preparar una versió independent per a cada possibilitat seria absurd.

El disseny responsive ens permet construir interfícies prou flexibles per a respondre a eixa realitat. I l’enfocament mobile first ens ajuda a fer-ho començant per allò que realment importa: contingut, jerarquia, interacció i funcionalitat.

Després podem aprofitar progressivament tot l’espai addicional que oferixen les pantalles més grans.

Perquè una bona web responsive no hauria de paréixer una web d’escriptori que hem aconseguit ficar a pressió dins d’un telèfon. Hauria de sentir-se com una experiència correctament dissenyada, independentment d’on l’òbrigues.

Si estàs pensant a crear una web nova o tens una web actual que no acaba de funcionar bé en mòbil, podem analitzar què està passant i plantejar una solució adaptada al projecte. Conta’ns el teu projecte a través del formulari de contacte de Tornem i en parlem.