Dins del mòdul de disseny i desenvolupament web a 1r d’SMX, aconseguir que la web sigui totalment responsive (adaptable) és un dels requisits clau de qualsevol encàrrec o repte. Com que estàs utilitzant Elementor, tens eines integrades molt potents per assegurar-te que el lloc web es vegi perfectament a ordinadors, tauletes i mòbils.
Aquí tens la guia de com estructurar i justificar aquesta tasca per a la documentació del teu projecte:
Tasca: Optimització del Disseny Responsive (Adaptable)
L’objectiu d’aquesta configuració és garantir que tots els continguts de la web (textos, imatges, menús i botons) es reestructuren automàticament segons la mida de la pantalla del dispositiu de l’usuari.
Pas 1: Activar el Mode Responsive a Elementor
- Obre la pàgina que vulguis revisar amb l’editor d’Elementor.
- A la barra inferior de l’esquerra, clica sobre l’icona del monitor i el mòbil (Modo Responsive / Mode Adaptable).
- A la part superior de la pantalla apareixerà una barra grisa on podràs commutar entre tres vistes: Escriptori, Tauleta i Mòbil.
Pas 2: Ajustos específics per a dispositius mòbils
Quan estàs en la vista de mòbil o tauleta, qualsevol canvi que facis als selectors que tenen una petita icona de mòbil al costat (com la mida de la lletra, els marges o l’alineació) només s’aplicarà a pantalles petites, sense trencar el disseny d’ordinador:
- Mida del text (Tipografia): Redueix els títols grans ($H_1$, $H_2$) perquè no ocupin tota la pantalla del mòbil.
- Marges i Farcits (Paddings): Revisa que els espais en blanc no siguin excessius de manera lateral, ja que en mòbils podrien deixar el contingut massa estret.
- Ample de les columnes: Si a l’ordinador tens 3 columnes en una fila, configura-les al mòbil al 100% d’amplada perquè s’apilin l’una sota de l’altra verticalment, facilitant la lectura.
Pas 3: Ocultar o mostrar elements (Visibilitat)
De vegades, una imatge molt gran o un element de disseny complex no funciona bé en un telèfon mòbil:
- Selecciona la secció, columna o giny (widget) que vols amagar.
- Ves a la pestanya Avançat > Avançat / Respostes / Responsive.
- Activa l’opció Ocultar en mòbil o Ocultar en tauleta. D’aquesta manera, l’element desapareixerà només en aquests dispositius, fent la navegació més ràpida i neta.
Justificació del projecte
Per què és important? Més del 60% del trànsit web actual es realitza des de dispositius mòbils. Assegurar un disseny responsive millora radicalment l’experiència d’usuari (UX), redueix la taxa de rebot i és un factor crític que els motors de cerca (com Google) tenen en compte per avaluar i posicionar una pàgina web.