El treball dels desenvolupadors webs arriba cada vegada a més persones, ja que internet pot visitar-se des de múltiples dispositius. Realitzar un disseny web responsive amb HTML5 i CSS3 és el que permetrà que un projecte siga molt més funcional i adaptable, perquè podrà veure’s sense dificultat en telèfons mòbils, tauletes o qualsevol altre lloc.

Aquest disseny responsive implica que els elements que apareixen en la pantalla s’adapten a la navegació i a l’ús de qualsevol resolució. En haver-hi telèfons i altres dispositius amb grandàries diferents, resolucions diferents i fins i tot navegadors i sistemes operatius propis; és important donar-li cabuda al nombre més gran d’ells.

Consells per a aconseguir una web responsive

Abans de ficar-nos de ple a veure com fer una pàgina web responsive amb HTML i CSS, et donarem alguns consells que has de tindre sempre present.

Usabilitat: La teua pàgina web ha d’estar disponible per a utilitzar-se des de qualsevol dispositiu, i això implica terminals molt xicotets. Sé concís i elimina allò que no aporte.
Màxima adaptabilitat: Com pots imaginar, preparar tot un disseny de layouts per a un ordinador és molt diferent de fer-ho per a mòbils, on et trobaràs amb una columna o, com a màxim, tres.
Elements audiovisuals essencials: Tant les imatges com els vídeos han d’adaptar-se a la grandària de la pantalla, encara que recomanem eliminar totes aquelles que no siguen essencials. Ocupen molt espai i temps de càrrega.
Pensa en digital: I no ens referim al món en línia, sinó al fet que el maneig de mòbils i tauletes es fa amb els dits. La grandària d’un cursor és significativament més xicotet que la gemma dels dits, així que hauràs d’adaptar els botons.
Evita el scroll horitzontal: No són còmodes d’usar en les versions mòbils, mentre que el scroll vertical és el que més utilitzem.

Tècniques per a un disseny responsive

Viewport en l’etiqueta metatag

La major part dels navegadors en dispositius mòbils empren l’escalat HTML segons un ample fix que s’ajusta a les pantalles. Si fem ús del metatag viewport podem indicar al navegador que ample ha de respectar, deshabilitant l’escalat per defecte. Aquest codi ha d’aparéixer dins de l’etiqueta head.

Media Queries

Els media queries són propietats de CSS3 que, a grans trets, ens permeten incloure condicions a una fulla d’estil. D’aquesta manera, tindrem la possibilitat de mostrar el mateix contingut de diferents maneres, usant una varietat de dissenys que s’adaptaran al dispositiu en el qual es mostra.

Max-Width i Min-Width

Aquestes dues propietats CSS juguen un paper molt important en el disseny multiplataforma, ja que gràcies a elles podem preparar diferents estructures. Aquestes propietats ens permeten establir l’ample mínim i màxim que pot rebre un element, la qual cosa és rellevant quan s’utilitzen percentatges com a valor de les propietats CSS, i que ens ajuda a establir un límit d’escala.

Mesures relatives

L’ús de mesures relatives permetrà que el disseny responsive s’adapte adequadament a la finestra en la qual es mostra. Emprar aquests percentatges és molt útil per a marges, grandàries de font o el padding. Amb això aconseguirem un disseny molt més uniforme, amb els elements més balancejats i una millor experiència d’usuari.

Adaptar la grandària de font al disseny

Píxels (px): Establir la grandària d’una font en píxels és quasi com triar la seua grandària fixa, encara que en realitat pren com a mesura relativa la resolució del dispositiu. D’aquesta manera podrem definir amb exactitud la grandària que volem per a la lletra, però també que no s’adapte amb precisió a l’espai visual disponible.
Punts (pt): Encara que és una mesura que sol utilitzar-se en documents per a impressió, també la veiem present en CSS. És una grandària basada en polzades (una polzada són 72 punts), i varia molt en funció del navegador i la pantalla. No és recomanable usar-la si vols fer un disseny responsive, igual que altres unitats de mesures com a centímetres, mil·límetres o les mateixes polzades.
Ems (em): És una de les mesures que millor funcionen quan necessitem adaptabilitat, ja que es tracta d’un format escalable. Presa com a referència l’element contenidor del text, encara que pot donar-nos algun problema si tenim un codi molt complex, perquè respecta l’ordre jeràrquic dels elements.
Percentatges (%): De manera similar als ems, amb els percentatges és molt fàcil escalar la grandària d’una font. 1 em seria equivalent a una grandària de font del 100%, per si necessites canviar els teus valors de format.

Realitzar proves amb emuladors

Finalment, el millor per a aconseguir un disseny adaptable que funcione en la majoria dels dispositius és testar-lo per tu mateix. Existeixen nombrosos emuladors que recreen de manera fidedigna l’experiència dels usuaris de dispositius mòbils, i ací podràs trobar les possibles fallades del teu web.

Ara ja coneixes alguns dels trucs i tècniques que permeten el correcte disseny web responsive amb HTML5 i CSS3. Desenvolupar una web adaptable no és senzill, perquè implica un major nombre d’hores en el projecte, però la percepció de l’usuari serà molt millor. En Doowebs, som especialistes en disseny i desenvolupament web a València. Contacta’ns per a portar el teu projecte al següent nivell!