El diseño web responsive hace referencia al desarrollo de un sitio web de forma que su diseño se adapte a la resolución de pantalla del dispositivo que utilice el usuario para visualizar su contenido. Por ejemplo, una misma página podría mostrarse a 4 columnas en un ordenador de escritorio, a 2 columnas sobre una tablet y a 1 columna haciendo uso de un teléfono móvil.
En el diseño web responsive se utiliza un enfoque totalmente distinto al utilizado en el diseño web tradicional, para aplicarlo correctamente es muy importante conocer sus ventajas e inconvenientes.
En los últimos tiempos se hace impensable lanzar un sitio web sin tener en mente una versión móvil, antes de la llegada del web responsive la única opción era tener versiones separadas del sitio web, una para ordenadores personales, otra para smartphones, tablets, y así una cantidad ilimitada de versiones para distintos dispositivos. LLevado a la práctica, el mantenimiento de un gran número de versiones se convertía en una tarea prácticamente imposible de realizar. La solución que propone el web responsive se basa en el uso inteligente de las cuadriculas y en el uso de las llamadas media queries de CSS que son un tipo de consulta que permite aplicar distintos estilos en función del tipo de dispositivo, resolución de pantalla y/u orientación.
Mediante el uso de media queries y la combinación de atributos CSS podemos modificar la estructura y apariencia de nuestro sitio adaptándolo a cada dispositivo sin la necesidad de mantener varias versiones de este.
El tratamiento del tamaño de los textos es una aspecto fundamental para obtener una mejor experiencia de usuario, es completamente diferente la forma en que estos se muestran en un ordenador a como lo hacen en un televisor inteligente o en un smartphone, el diseño web responsive va a permitirnos mostrar el texto al tamaño que mejor se acomode a cada dispositivo teniendo en cuenta su resolución, orientación y densidad de pixels.
Uno de los grandes problemas en el diseño responsive es el trabajo con imágenes. Existen varios métodos para adaptar las imágenes según el tamaño de pantalla del dispositivo del que se esté haciendo uso. El más utilizado es establecer el atributo max-width de CSS al 100%, aunque cada vez está más extendido el uso del atributo html srcset que permite establecer una imagen distinta para cada tamaño de pantalla.
Sin duda la opción más potente es la personalización del tamaño de la cuadrícula para obtener una estructura diferente en cada tamaño de pantalla, lo que nos permite mostrar el contenido organizado de forma distinta dependiendo del dispositivo que estemos utilizando.
Otra opción es la de mostrar y ocultar contenido, de esta forma podemos por ejemplo usar diferentes versiones del menú u ocultar en la versión de escritorio aquellos enlaces que hagan llamadas a aplicaciones propias de dispositivos móviles.
Nos enfrentamos a un gran desafío, cada día aparecen nuevos inventos y dispositivos capaces de acceder nuestro sitio web, son demasiadas opciones para plantearnos el uso de soluciones personalizadas para cada uno de ellos.
El diseño web responsive no es una respuesta definitiva para un sector en constante movimiento, pero sí que es un acercamiento a una posible solución que nos va a permitir mejorar la experiencia de usuario en la mayoría de dispositivos.
Como diseñadores, tendremos que seguir trabajando en la búsqueda de soluciones que nos permitan adaptarnos a la tecnología a medida que esta siga evolucionando.
Bootstrap
Foundation ZURB
Less Framework
Skeleton
Mobile Boilerplate
La puesta en vigor del nuevo Reglamento General de Protección de Datos de la UE…
En 2013 el comercio electrónico en España supuso ya 14.610 millones de euros, un 18%…
El tamaño de los negocios determina la preocupación a la hora de adoptar una seguridad…
Aunque los usuarios están preocupados por la seguridad de la nube, desconocen los requisitos legales…
Bien sabemos que Amazon, el gigante de las ventas por internet, es uno de los…
Interxion Holding, proveedor europeo especializado en servicios de alojamiento en centros de datos independientes, asegura…