L’enfocament Mobile First: Dissenyant per a l’èxit en línia

https://www.freepik.es/psd-gratis/diseno-maqueta-pantalla-telefono-movil_3576516.htm#query=M%C3%B3vil&position=24&from_view=search&track=sph

L’enfocament Mobile First:

Dissenyant per a l’èxit en línia

L’ era digital ha arribat per quedar-s’hi i l’ús dels mòbils és un dels primers indicadors que es poden observar actualment. Aquesta tendència està en constant creixement i és per això que les empreses estan interessades a dissenyar els llocs web prioritzant la visualització des dels dispositius mòbils. A això se’l coneix com a Mobile First i, a continuació, t’expliquem tots els detalls per poder implementar-lo.

 

Què vol dir Mobile First?

Mobile First fa referència a un model de disseny que prioritza la visualització als smartphones. Això vol dir que es potencia l’experiència d’usuari als dispositius mòbils a l’hora de dissenyar i desenvolupar una pàgina web.

Per tant, si vols implementar aquest tipus de disseny, has de començar incloent mides de pantalla més petits i anar pujant. Això pot resultar una mica confús si estàs acostumat a prioritzar primer les mides grans, tenint en ment lescriptori. No obstant això, els temps canvien i els dissenyadors web s’adapten a les exigències del mercat.

 

La relació entre Mobile Firts amb l’HTML i CSS

Per poder elaborar un disseny Mobile First has d’entendre els fonaments de l’HTML i el CSS. El primer que has de fer per planificar el teu disseny Mobile First és elaborar un esquema bàsic en paper o en una eina digital com és el cas d’Illustrator. Quan tinguis una idea general de com vols que sigui la teva pàgina web, has de començar amb a inserir el codi HTML i CSS per donar-li vida.

Un dels factors fonamentals d’aquest tipus de disseny és la utilització de consultes de mitjans responsius , coneguts en anglès com a media queries. Aquestes consultes et permeten canviar el codi CSS per adaptar-lo a diferents dispositius (tauletes, ordinadors, etc.) i que es puguin veure bé. Això és realment important en un món que cada cop opta més per la connexió de diferents dispositius digitals.

Un cop hagis acabat el disseny bàsic i hagis configurat les consultes de mitjans responsius, has de començar a afegir el contingut. En aquest camp, la llibertat creativa és crucial. Tingues en compte que pots enfocar-ho a diferents continguts: text, formularis o contingut multimèdia com les imatges i els vídeos. El més rellevant, independentment del contingut que triïs, és que siguis concís i que es puguin llegir amb comoditat a les pàgines més petites.

https://www.freepik.es/foto-gratis/representaciones-experiencia-usuario-diseno-interfaz_36298552.htm#query=M%C3%B3vil%20dise%C3%B1o&position=1&from_view=search&track=ais

 

Què són els “media queries”?

Els media queries són un tipus de construcció de llenguatge a CSS que permet definir estils condicionals que es poden aplicar només en certes situacions. La utilització més habitual d’aquestes consultes de mitjans és la adaptació de lestil dun lloc web depenent de lamplada de la pantalla de lusuari.

Se solen utilitzar per desenvolupar dissenys responsius, de manera que és una eina fonamental a lhora de dissenyar una pàgina web. En l’actualitat, totes les webs es dissenyen de manera que es adaptin a qualsevol dispositiu electrònic per facilitar la visualització i la satisfacció dels usuaris.

Per poder dur a terme una consulta de mitjans, heu de configurar una regla formada per tots els estils diferents que s’han d’aplicar en diverses situacions. Perquè puguis visualitzar un exemple, pots posar-ne una regla que defineixi l’estil per a pantalles més amples que 750px. i un altre per a pantalles més estretes que 750px. D’aquesta manera, esteu abastant tots els tipus de pantalles.

Un cop hagis establert la regla, has d’ especificar les condicions que cal donar perquè s’apliqui cada estil. Les condicions són com a paràmetres, per la qual cosa poden basar-se en l’amplada , l’alçada, la resolució, l’orientació o, fins i tot, en el tipus de dispositiu.

Quan tinguis les consultes de mitjans configurades, es començaran a aplicar de forma automàtica quan la pàgina estigui carregada al dispositiu corresponent. Si vols canviar els estils basant-te en la interacció de l’usuari, es recomana fer servir JavaScript perquè pugueu afegir o eliminar diferents classes que activin altres regles de consulta de mitjans.

Com podeu veure, el disseny Mobile First és una manera perfecta de generar dissenys responsius perquè els usuaris puguin gaudir d’una interfície còmoda a nivell visual .

En l’actualitat, seria molt estrany accedir amb el mòbil a una web que només estigui dissenyada per a ordinadors, ja que, fins i tot, alguns navegadors com Google comencen a penalitzar a les cerques l’absència d’un disseny responsiu.

Això té sentit perquè Google és una empresa a la qual us interessa que els usuaris estiguin a gust amb les vostres cerques. Si un usuari accedeix a una pàgina web que no s’adapta al dispositiu, se sentirà incòmode i deixarà de fer servir el cercador. Per això es pot dir que, al final, els dissenys responsius també tenen participació al SEO.

https://www.freepik.es/foto-gratis/manos-alto-angulo-sosteniendo-papel_34523257.htm#query=M%C3%B3vil%20dise%C3%B1o&position=13&from_view=search&track=ais

Referències

  • Mor-Samuels, E. (2022). Allò essencial del disseny Mobile-First per al 2022. AppsFlyer. https://www.appsflyer.com/es/blog/mobile-marketing/mobile-first-design/
  • Què és el Mobile First? la nova manera de veure el disseny web. (2022, 29 novembre). Liderleg Agència de Disseny i Màrqueting. https://www.liderlogo.es/diseno/que-es-mobile-first/