Es importante partir de lo que significa el concepto de diseño responsivo, el cuál se refiere a la capacidad que tiene una pagina web para adaptarse y visualizarse tomando en cuenta las características del espacio, ventana o pantalla donde se muestra, es decir, que los elementos de esa pagina web tienen que responder dependiendo si el sitio web se visualiza en la pantalla de una PC de escritorio o si se visualiza en un teléfono o tableta.
Para que todo lo anterior sea posible, el sitio web debe implementar una serie de reglas principalmente en la definición de su estilo (CSS ‘media queries’), dichas reglas son las encargadas de establecer el comportamiento que tendrá cada uno de los elementos del sitio web al enfrentarse al despliegue en cada uno de los diferentes formatos que sean especificados.
Entonces es importante que una pagina web implemente un buen diseño responsivo justamente para que pueda visualizarse adecuadamente sin importar el tamaño del escaparate o pantalla donde se despliegue. En el diseño responsivo existe el concepto de ‘breakpoint’ que se refiere a cada uno de los puntos donde nos interesa lograr justamente esa adaptación por parte de los elementos visuales del sitio web, por lo menos debemos considerar los siguientes:
- Pequeños dispositivos (576px y superior)
- Dispositivos medianos (tabletas, 768px y superior)
- Dispositivos grandes (PCs, 992px y superior)
- Dispositivos extra grandes (1200px y superior)
Ahora bien, el objetivo de este articulo es hablar sobre la importancia del diseño responsivo, mas no sobre su implementación, sin embargo en términos de las ‘media queries’ mencionadas anteriormente, los ‘breakpoints’ listados darían lugar a lo siguiente:
@media (min-width: 576px) { … }
@media (min-width: 768px) { … }
@media (min-width: 992px) { … }
@media (min-width: 1200px) { … }
Dependiendo del sitio web y de las necesidades del propio desarrollo, podrían existir definiciones mucho mas complejas en cuanto a los ‘breakponts’, por ejemplo, la definición de rangos que no solo implicarían un ancho mínimo ‘min-width’ sino también máximo ‘max-width’ para cada ‘media querie’.
El diseño responsivo no puede ser aplicado como una receta general para todos los desarrollos, a pesar de existir numerosos proyectos y librerías tales como ‘Bootstrap’, ‘Semantic grid’, etc. Para lograr un buen desempeño y aprovechamiento del espacio disponible se hace necesario considerar las reglas que se están aplicando y en el mejor de los casos realizar al menos el ajuste fino para garantizar que los usuarios gocen de una agradable experiencia al visualizar la pagina web en su dispositivo favorito.