A día de hoy el acceso a las páginas web se realiza a través de una amplia variedad de dispositivos. A los ordenadores de sobremesa y portátiles se suman las tablets y los smartphones, lo que significa una cantidad de resoluciones cada vez mayor. Por esto, como desarrollador web es importante garantizar que tu contenido sea accesible y atractivo en todos estos dispositivos. Es aquí donde entra en juego el concepto de «responsive web design», que por estos lares hemos venido a llamar «diseño web adaptable» o «diseño responsivo».
¿Qué es el diseño web adaptable?
Se trata de una técnica de diseño y desarrollo web que busca crear sitios web que se adapten de forma inteligente a diferentes tamaños de pantalla y dispositivos. El diseño web adaptable utiliza una única estructura de código y hojas de estilo que responden a las dimensiones del dispositivo del usuario, en lugar de crear múltiples versiones de un sitio web para cada tipo de dispositivo. Y es que hay que tener en cuenta que hasta hace poco el método habitual de ofrecer compatibilidad con diferentes resoluciones era directamente crear versiones alternativas de la web, con todo el trabajo adicional que eso supone, y aun así estas versiones eran solo para una resolución o dispositivo determinado (por no hablar del problema de compatibilidad entre navegadores). Vamos, un auténtico dolor de cabeza que nos venía atormentando.
Si bien hacer una maqueta web responsive garantiza la compatibilidad del sitio con la mayor cantidad de dispositivos posible, es importante saber que también obtenemos una serie de beneficios secundarios que ayudarán a que un proyecto web mejore en diferentes sentidos y que veremos a continuación.
Ventajas
Un diseño web responsive garantiza una experiencia de usuario consistente y agradable, independientemente del dispositivo que se utilice para acceder al sitio, algo que ayuda a llegar a la mayor cantidad de usuarios posibles.
Por otro lado las visitas a los portales desde dispositivos móviles está aumentando cada vez más, por eso los motores de búsqueda como Google favorecen los sitios web que son amigables con estos dispositivos, lo que puede mejorar tu clasificación SEO en los resultados de búsqueda.
Por último, en lugar de mantener múltiples versiones de un sitio, el diseño web adaptable te permite mantener un único sitio web, lo que ahorra tiempo y recursos de desarrollo. Como maquetador web freelance que se ha tenido que lidia con estos inconveniente, puedo decir que esta ventaja no tiene precio ya que simplifica tanto la creación como el mantenimiento de las páginas que elaboramos.
Implementación
No existe un único modo concreto de desarrollar un portal responsive, pero sí que hay tres elementos imprescindibles que debemos tener en cuenta y cuya manera de trabajarlos dependerá de nuestros criterio profesional:
- Diseño fluido: Debemos utilizar un sistema de cajas fluido, es decir que se ajuste automáticamente al ancho de pantalla. Esto podemos hacerlo usando porcentajes en las capas o utilizando el nuevo sistema de flexbox de CSS, si bien recomiendo extrema precaución por la poca aceptación que este último sistema está teniendo en los navegadores.
- Media queries: Otro elemento a tener en cuenta son las consultas de medios CSS (media queries) que sirven para aplicar estilos específicos según el tamaño de pantalla. No obstante debemos tener en cuenta que en este momento no todos los navegadores son compatibles, de modo que debemos tener precaución en su uso.
- Medios flexibles: Hay que usar medios (imágenes, vídeos… ) flexibles y optimizados para cargas rápidas en dispositivos móviles. En la medida de lo posible tenemos que intentar proveer el mismo recurso con diferentes resoluciones, y por tanto peso, dependiendo del dispositivo en el que se vaya a cargar. Tengamos en cuenta que un smartphone cargará más lento y su pantalla es pequeña, por lo que cuanto más aliviemos el peso total de la web, mejor será la experiencia de usuario.
Referencias:
- Mobile Web Best Practices 1.0 (inglés) – W3C
- CSS Flexible Box Layout Module (inglés) – W3C
Deja una respuesta