Blogs

Te has preguntado alguna vez ¿Qué es un diseño de sitio web responsivo?

Un diseño web responsivo (Responsive Web Design RWD) es un enfoque mediante el cual un diseñador crea una página web que "responde" o se redimensiona a sí misma según el tipo de dispositivo al que se lo esté viendo. Eso podría ser un monitor de computadora de escritorio de gran tamaño, una computadora portátil o dispositivos con pantallas pequeñas como teléfonos inteligentes y tabletas.

El diseño web responsivo se ha convertido en una herramienta esencial para cualquier persona con presencia digital. Con el crecimiento de los teléfonos inteligentes, tabletas y otros dispositivos de computación móvil, cada vez más personas usan pantallas más pequeñas para ver páginas web. Inclusive Google ha anunciado el pasado abril de 2018, su Índice Mobile-First el cual da mayor puntuación a sitios web con versiones móviles funcionales.

¿Qué es el diseño web responsivo?

El propósito del diseño responsivo es tener un sitio web con elementos que responden de manera diferente cuando se lo visualiza en dispositivos de diferentes tamaños.

Por ejemplo podemos tomar un sitio web tradicional "fijo". Cuando se ve en una computadora de escritorio, el sitio web puede mostrar tres columnas. Pero cuando ve ese mismo diseño en una tableta más pequeña, puede forzarlo a desplazarse horizontalmente, algo que a los usuarios no les gusta. O los elementos pueden estar ocultos a la vista o verse distorsionados. El impacto también se complica por el hecho de que muchas tabletas se pueden ver en orientación vertical o giradas hacia los lados para obtener una vista horizontal.

En una pequeña pantalla de teléfono inteligente, los sitios web pueden ser incluso más difíciles de ver. Las imágenes grandes pueden "romper" el diseño. Los sitios pueden tardar en cargarse en los teléfonos inteligentes si son gráficos pesados.

Sin embargo, si un sitio utiliza un diseño responsivo, la versión de la tableta podría ajustarse automáticamente para mostrar solo dos columnas. De esta forma, el contenido es legible y fácil de navegar. En un teléfono inteligente, el contenido puede aparecer como una sola columna, tal vez apilada verticalmente. O posiblemente el usuario tenga la capacidad de desplazarse para ver otras columnas. Las imágenes cambiarán el tamaño en lugar de distorsionar el diseño o cortarse.

El punto es: con un diseño responsivo, el sitio web se ajusta automáticamente en función del dispositivo en el que el espectador lo ve.

¿Cómo funciona el diseño web responsivo?

Los sitios receptivos usan grids fluidos. Todos los elementos de la página se clasifican por proporción, en lugar de píxeles. Entonces, si tiene tres columnas, no diría exactamente qué tan ancho debe ser cada una de ellas, sino qué ancho deben tener en relación con las otras columnas. La columna 1 debería ocupar la mitad de la página, la columna 2 debería ocupar el 30% y la columna 3 debería ocupar el 20%, por ejemplo.

Los medios como las imágenes también se redimensionan relativamente. De esta forma, una imagen puede permanecer dentro de su columna o elemento de diseño relativo.

Otros puntos importantes

Mouse vs Touch: Diseñar para dispositivos móviles también plantea el problema del mouse contra el tacto. En las computadoras de escritorio, el usuario normalmente tiene un mouse para navegar y seleccionar elementos. En un teléfono inteligente o tableta, el usuario utiliza principalmente los dedos y toca la pantalla. Lo que puede parecer fácil de seleccionar con un mouse, puede ser difícil de seleccionar con un dedo en un pequeño punto de la pantalla.

Gráficos y velocidad de descarga: Además, está el tema de los gráficos, los anuncios y la velocidad de descarga. En los dispositivos móviles, puede ser prudente mostrar menos gráficos que para las vistas de escritorio, de modo que un sitio no tarde en cargarse en un teléfono inteligente. Es posible que sea necesario intercambiar tamaños de anuncios más grandes para anuncios más pequeños.

Aplicaciones y "versiones móviles": Es posible que haya pensado en crear una aplicación para su sitio web, por ejemplo, una aplicación para iPad o una de Android. O tendrías una versión móvil específicamente para BlackBerry.

Pero con tantos dispositivos diferentes hoy en día, cada vez es más difícil crear aplicaciones y diferentes versiones para cada dispositivo y plataforma operativa.

Por qué las pequeñas empresas necesitan cambiar a un diseño web responsive

Más personas están usando dispositivos móviles. Un reciente estudio de Pew, el 77% de los estadounidenses ahora posee teléfonos inteligentes en 2018, lo que representa un aumento de solo el 35% en la primera encuesta de propiedad de teléfonos inteligentes realizada por Pew Research Center en 2011. Este número no esta muy lejos de la realidad en Panamá

Conclusión:

El diseño web responsivo nace de la necesidad de dar una mejor experiencia de usuario a la mayor cantidad de personas posible, si su sitio web brinda una excelente experiencia el usuario encontrará facilmente lo que esté buscando. Esto es una de las prioridades de motores de búsqueda como Google, y lo han dejado saber otorgando mayor puntuación y mejores rankings a las paginas que cumplan con esta característica.

Si tu sitio web no se ajusta a tablets, o celulares aun estas a tiempo de corregirlo, contacta a tu diseñador web de inmediato. Si necesitas apoyo tambien puedes contactarnos y co gusto le ayudaremos.