Noticias de diseño web

Actualidad en el mundo del diseño, programación web, y Marketing Online.

¿Que es Responsive Web Design?

Cuando hablamos sobre Responsive web design nos referimos a un conjunto de herramientas y técnicas de programación para hacer nuestra web adaptable la pantalla del dispositivo con el cual navegamos: ordenador, tablet o smartphone.

¿Que es Responsive Web Design?

1. Navegación

Un menú de navegación horizontal en ordenador ocuparía demasiado espacio en un móvil, por lo que un página web responsive, probablemente tenga por ejemplo un botón de menú que, una vez pulsado despliega las diferentes opciones mantendría una buena experiencia de usuario ahorrando espacio en nuestra pequeña pantalla.

2. Imágenes

Servir imágenes grandes para ordenador y pequeñas para pantallas pequeñas. Las imágenes son uno de los elementos que más pueden ralentizar la carga de una página web. Cargar una imagen grande en un ordenador de sobremesa, es una buena práctica, pero probablemente sea demasiada foto para una pantalla pequeña y ralentiza la página. Servir una imagen pequeña para la versión móvil de nuestra web, mantiene la calidad, pero hace la navegación más rápida y satisfactoria.

3. Lazy loading

Con ésta técnica de programación podemos limitar la carga de codigo hasta que no son requeridos por el usuario de la web. Por ejemplo: Un formulario, que no se carga hasta que el usuario no empieza a rellenar los campos, o un carrusel de imágenes que no empiezan a cargarse hasta que el usuario no empieza a visualizarlas. Esto reduce la carga inicial de la página y aumenta la velocidad de navegación.

4. Responsive layout

En ordenadores de sobremesa, disponemos de mucho espacio en la pantalla para disponer la información. En móvil, la estructura de una página web responsive se reordena para ocupar el espacio vertical, ajustándose al tamaño de la pantalla y facilitando la lectura.

5. Objetivo del visitante

Los objetivos de un mismo visitante pueden ser diferentes cuando entra desde un ordenador o desde el móvil. Un visitante puede interesarse por conocer la filosofía de una empresa cuando navega desde casa, pero cuando está en la calle muchas veces lo que busca es una información concreta, por ejemplo el número de teléfono para poder llamar.

Este escenario tiene que estar previsto, así que hay información puede interesarnos que esté resumida o oculta en la versión móvil, y otras información tienen que estar fácilmente accesibles.

La duración de la visita suele ser más reducida cuando entramos desde un móvil y eso es algo que hay que tener en cuenta a la hora de estructurar la información que aparece en una página web.

6. Tipografía

La tipografía en una versión móvil tiene que tener contraste de colores de suficiente, ya que en ocasiones intentamos ver una web estando en la calle a plena luz del día por lo que es recomendable un mayor contraste y un tamaño de letras equilibrado, facilmente legible pero no demasiado grande como para salirse del margen de una pequeña pantalla.

7. Velocidad de carga

Las conexiones de ADSL suelen ser suficientemente rápidas como para cargar de forma rápida una página web con multitud de fotos grandes, pero una las conexiones de redes móviles como las 3G suelen ser bastante lentas, por lo que es recomendable optimizar la velocidad de carga en las versiones móviles de nuestra web para una navegación mas satisfactoria. Un tiempo de espera demasiado largo probablemente provoque que el visitante cierre la web y pase a buscar otra por lo que perdemos un cliente potencial.

8. Animaciones

En general, es recomendable deshabilitar o hacer las animaciones más sutiles en la versión “móvil” de nuestra página web, por 3 motivos:

  1. Ahorro de bateria
  2. Menor capacidad del procesador de gama media o baja, que desemboca en animaciones menos suaves
  3. Ver demasiadas animaciones en un dispositivo móvil puede dificultar o entorpecer la lectura.

Ejemplo: Un botón. En escritorio: Ponemos el ratón encima del botón y se produce un cambio de color y una animación vistosa que no tiene sentido en un móvil, ya que en móvil no hay ratón y nos limitamos a pulsar sin más por lo que en móvil es una animación que podemos deshabilitar.

9. Soporte Tactil

Se trata de aprovechar las pantallas táctiles como las tablets o smartphone. Se puede programar una página web para que reconozca un determinado gesto que hacemos con los dedos en la pantalla lo cual nos proporciona una interactividad añadida en la versión móvil de nuestra web. Un carrusel de imágenes que nos permite ir pasando o arrastrando las imágenes a medida que pasamos el dedo, o abrir un determinado menú.

Esta web utiliza cookies propias y de terceros para mejorar la experiencia del usuario y medir el tráfico de nuestra web. Si continúas navegando entendemos que estás de acuerdo con el uso de las cookies. Más información >