Com saps, el disseny web responsiu és una de les claus en el posicionament de les pàgines i cada cop dóna més importància Google a aquest aspecte. Però saps quins són els nou conceptes bàsics que has de tenir en compte?
Si no saps del cert què és el disseny web responsiu i els conceptes més importants que té, et recomanem que segueixis llegint aquest article on t'assabentaràs de tot. Comencem?
Què és el disseny web responsiu
El disseny web responsiu, també conegut com a responsive, és una de les millors solucions per al disseny web. I és que, abans, quan es construïa una web, tenies el problema que es veia diferent segons el mòbil, una tauleta o fins i tot en diferents resolucions web. Amb aquesta opció, però, tens la possibilitat que sigui la web la que s'adapti al dispositiu. Aquí no parlem ja de pàgines fixes, de centímetres, mides, etc. sinó que es construeix sabent que després, en canviar els diferents dispositius, aquesta s'adaptarà (per descomptat, de vegades cal fer alguns canvis mínims).
Dit d'una altra manera, parlem d'un format de programació. Amb ell, podem fer que una web s'ajusti de manera automàtica, al dispositiu de l'usuari, ja sigui aquest al mòbil, tauleta o en un ordinador amb una resolució diferent de la que s'ha dissenyat.
D'aquesta manera, es permet que la web es vegi bé en tots els aspectes.
principis bàsics
Ara que t'ha quedat més clar què és el disseny web responsiu, és hora de parlar-te d'aquests principis bàsics que té aquest format i com ajuda que els webs es vegin millor. Aquests serien els següents:
Flux d'elements
Ens estem referint a el que passa quan la pantalla on es visualitzarà la pàgina web és cada vegada més petita. Per exemple, en el cas del mòbil. Quan més petita és la pantalla, el format tendeix a organitzar tota la informació que forma part de la plantilla.
I ho fa de manera vertical, no horitzontal. D'aquesta manera, no s'obliga a l'usuari que s'hagi de desplaçar a esquerra i dreta per veure tota la pàgina, a més de dalt i de baix, per a la web.
També evita que els continguts no se superposin, sinó que quedin organitzats sempre en format vertical.
I abans que ho preguntis, sí, moltes plantilles poden establir un ordre concret per a cada part de la plantilla, o fins i tot desaparèixer, quan la pantalla arribi a una determinada mida. Això es fa amb l'objectiu de prioritzar la informació i també d'alleugerir el disseny perquè no s'hagi de fer gaire scroll per informar-se del que digui.
Desktop vs mòbil
El disseny per a mobile està cobrant cada vegada més importància pel fet que està desbancant els ordinadors. Però a l'hora de fer un disseny web, en realitat no implica una diferència gran quant a dissenyar primer la web i després la versió ordinador, o al revés. En realitat, qualsevol disseny web responsiu a lordinador es plasma al mòbil i viceversa.
Ara bé, sí que és cert que hi haurà alguns detalls a tenir en compte en cadascun dels dissenys que faran que es personalitzi. De fet, algunes empreses opten per crear un disseny web únic per a ordinadors, i un altre especial per a mòbils, si bé això pot fer que es perdin funcions o que faci que els usuaris es perdin en navegar entre un i altre, sobretot si hi estan acostumats a un tipus.
Fonts tipogràfiques, web o del sistema?
Un aspecte important en el disseny web és la tipografia que sutilitzarà. És a dir, els tipus de fonts a utilitzar. I, com saps, hi ha milions que podries fer servir. Però sempre es recomana utilitzar les que siguin llegibles, fàcils de carregar i que siguin ràpides de carregar-se.
Heu de tenir en compte que les fonts poden reflectir un estil modern, o bé un estil simple. Les primeres poden fer que es trigui més a carregar-les; mentre que les segones, si bé són més clàssiques, permeten un funcionament millor del lloc web.
I quina seria millor? Doncs dependrà de les necessitats que tingui aquest projecte. Si a la teva pàgina ha de primar limpacte, encara que trigui més a carregar pot ser una millor elecció que aquells amb dissenys simples que no destaquen molt.
Això sí, has de tenir en compte que és millor fer servir fonts amb què t'asseguris que els usuaris les tindran instal·lades; altrament no aconseguiràs aquest efecte.
Unitats relatives
Un altre dels principis del disseny web responsiu és utilitzar allò que s'anomenen «unitats relatives». La millor és el percentatge.
I per què serveix això? Veuràs, imagina que tens un disseny web per a l'ordinador, una tauleta i un mòbil. En lloc de proporcionar unes mesures específiques per a cadascú, s'utilitzarà el percentatge perquè el format s'encarregue després de fer escales diferents a mesura que es redueixi la mida de les pantalles.
Si es fan servir mesures fixes això podria no quedar bé en disminuir aquestes pantalles.
Punts d'interrupció
Els punts d‟interrupció fan referència al‟espai que es té per treballar en un ordinador i en un mòbil. Mentre que al primer es poden tenir bàsicament tres columnes, en el cas del mòbil només se'n té una. Això fa que, quan el disseny canvia a pantalles més petites, es distribueixi de manera natural; mentre que, si no teniu els punts d'interrupció, el que farà és que quedi més petit tot el contingut mantenint el mateix disseny.
Valors
A l'hora de dissenyar un web responsiu, una de les claus bàsiques que cal tenir en compte són els valors mínims i màxims quant a l'amplada i l'alçada de la web i dels propis elements.
La gran diferència entre l'un i l'altre és que, si no hi ha un màxim d'amplada, el que fa és que el contingut s'estengui a l'amplada, cosa que pot fer que es vegi més deformada.
Objectes imbricats
Imagina que la teva web té moltíssims elements. I que en la versió mòbil has decidit que els posaràs més centrats. El fet de disposar d'objectes imbricats el que us permet és moure diversos objectes que formen part d'una unitat alhora, estalviant així força temps. A més, permet un disseny més net i endreçat.
No només això, sinó que, en fer que els elements vagin «tots a un», es poden adaptar més ràpidament a les pantalles petites.
Imatges vs vectors
En aquest cas ens centrem en les icones de la web. Aquests poden ser fets amb imatges de mapa de bits o bé amb vectors. I quin seria el millor? Vectors, sens dubte. Això és perquè en fer-los més grans o petits, no es veuran pixelats ni borrosos.
Disseny adaptatiu vs responsiu
Per finalitzar amb els principis del disseny web responsive, has de saber que molts confonen aquest amb el disseny adaptatiu, quan en realitat hi ha una gran diferència entre ells.
El disseny responsive el que fa és que l'estructura s'ajusti de manera fluida i natural al dispositiu que s'utilitzi. I què passa amb el disseny adaptable? En aquest cas, l'adaptació es produeix a salts i mostra una mica diferent segons el navegador i el dispositiu que s'utilitzi. Dit d'una altra manera, us mostrarà un disseny diferent per a cada dispositiu.
Coneixies aquests principis bàsics del disseny web responsiu?