Notícies de disseny web

Actualitat en el món del disseny, programació web, i Màrqueting Online.

Què és Responsive Web Design?

Quan parlem sobre Responsive web design ens referim a un conjunt d'eines i tècniques de programació per fer la nostra web adaptable la pantalla del dispositiu amb el qual naveguem: ordinador, tablet o smartphone.

Què és Responsive Web Design?

1. Navegació

Un menú de navegació horitzontal en ordinador ocuparia massa espai en un mòbil, de manera que un pàgina web responsive, probablement tingui per exemple un botó de menú que, un cop premut desplega les diferents opcions mantindria una bona experiència d'usuari estalviant espai en la nostra petita pantalla.

2. Imátges

Servir imatges grans per ordinador i petites per a pantalles petites. Les imatges són un dels elements que més poden alentir la càrrega d'una pàgina web. Carregar una imatge gran en un ordinador de sobretaula, és una bona pràctica, però probablement sigui massa foto per una pantalla petita i alenteix la pàgina. Servir una imatge petita per a la versió mòbil del nostre web, manté la qualitat, però fa la navegació més ràpida i satisfactòria.

3. Lazy loading

Amb aquesta tècnica de programació podem limitar la càrrega de codi fins que no són requerits per l'usuari de la web. Per exemple: Un formulari, que no es carrega fins que l'usuari no comença a omplir els camps, o un carrusel d'imatges que no comencen a carregar fins que l'usuari no comença a visualitzar-les. Això redueix la càrrega inicial de la pàgina i augmenta la velocitat de navegació.

4. Responsive layout

En ordinadors de sobretaula, disposem de molt espai a la pantalla per disposar la informació. En mòbil, l'estructura d'una pàgina web responsive es reordena per ocupar l'espai vertical, ajustant-se a la mida de la pantalla i facilitant la lectura.

5. Objectiu del visitant

Els objectius d'un mateix visitant poden ser diferents quan entra des d'un ordinador o des del mòbil. Un visitant pot interessar-se per conèixer la filosofia d'una empresa quan navega des de casa, però quan està al carrer moltes vegades el que busca és una informació concreta, per exemple el número de telèfon per poder trucar.
Aquest escenari ha d'estar previst, així que hi ha informació pot interessar que estigui resumida o oculta a la versió mòbil, i altres informació han d'estar fàcilment accessibles.
La durada de la visita sol ser més reduïda quan entrem des d'un mòbil i això és una cosa que cal tenir en compte a l'hora d'estructurar la informació que apareix en una pàgina web.

6. Tipografia

La tipografia en una versió mòbil ha de tenir contrast de colors de suficient, ja que en ocasions intentem veure un web estant al carrer a plena llum del dia pel que és recomanable un major contrast i una mida de lletres equilibrat, fàcilment llegible però no massa gran com per sortir-se del marge d'una petita pantalla.

7. Velocitat de càrrega

Les connexions d'ADSL solen ser prou ràpides com per carregar de forma ràpida una pàgina web amb multitud de fotos grans, però una les connexions de xarxes mòbils com les 3G solen ser molt lentes, pel que és recomanable optimitzar la velocitat de càrrega en les versions mòbils de la nostra web per a una navegació més satisfactòria. Un temps d'espera massa llarg probablement provoqui que el visitant tanqui la web i passi a buscar una altra pel que perdem un client potencial.

8. Animacions

En general, és recomanable desactivar o fer les animacions més subtils en la versió "mòbil" de la nostra pàgina web, per 3 motius:

  1. Estalvi de bateria.
  2. Menor capacitat del processador de gamma mitjana o baixa, que desemboca en animacions menys suaus.
  3. Veure massa animacions en un dispositiu mòbil pot dificultar o entorpir la lectura.

Exemple: Un botó. En escriptori: Posem el ratolí sobre del botó i es produeix un canvi de color i una animació vistosa que no té sentit en un mòbil, ja que en mòbil no hi ha ratolí i ens limitem a prémer sense més pel que en mòbil és una animació que podem desactivar.

9. Suport tàctil

Es tracta d'aprofitar les pantalles tàctils com les tablets o smartphone. Es pot programar una pàgina web perquè reconegui un determinat gest que fem amb els dits a la pantalla la qual cosa ens proporciona una interactivitat afegida a la versió mòbil del nostre web. Un carrusel d'imatges que ens permet anar passant o arrossegant les imatges a mesura que passem el dit, o obrir un determinat menú.

Aquest web utilitza cookies pròpies i de tercers per millorar l'experiència de l'usuari i mesurar el trànsit de la nostra web. Si continues navegant entenem que estàs d'acord amb l'ús de les cookies. Més informació >