Responsive Web Design: qué es y cómo desarrollarlo

El responsive web design o diseño responsive se ha consolidado como la opción ideal y más utilizada para adaptar las webs a los distintos tamaños y dispositivos sin necesidad de crear páginas distintas con diferentes URL’s y dominios. Se trata sin duda de un método muy  práctico y eficaz, con la ventaja añadida que es perfecto para para el SEO, puesto que permite importar todos los enlaces y la audiencia que ya se tenían desde la web base u original. Además, es la mejor solución para optimizar las búsquedas, puesto que evita los duplicados de dirección y contenidos. Con estas credenciales, no es de extrañar que Google lo recomiende clara y rotundamente de manera oficial en su propia web.

Cómo funciona el diseño responsive

Se trata de en una técnica basada en el lenguaje de programación HTML y los códigos CSS (Cascading Style Sheets) y CSS3, cuyo funcionamiento básico es el siguiente:

  1. Se programa sobre  HTML o  HTML5, lo que permite añadir etiquetas del tipo  <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> y colocarlas sobre los encabezados y otros títulos. De esta forma, se logra que el aspecto se ajuste automáticamente al tamaño de las pantallas de cada dispositivo.
  2. Luego se aplican las modificaciones correspondientes en las hojas de estilo de CSS o CSS3 y, cuando un usuario navegue, por ejemplo, en su smartphone se cargarán automáticamente las reglas correspondientes al tamaño reducido de la pantalla, garantizando una óptima visualización y navegación.

Diseño responsive: de la teoría a la práctica

Pese a las incuestionables ventajas del diseño responsive, no debemos olvidar una notable diferencia: una cosa es implementar técnicamente este sistema y otra diseñar de forma correcta. La primera parte no requiere de grandes conocimientos técnicos, puesto que se basa en la introducción en el lugar correcto de unas cuantas metatags. Pero para diseñar en responsive se precisa formación específica, experiencia y aptitudes adecuadas. De lo contrario, los resultados no pasarán de mediocres o, en el mejor de los casos, claramente mejorables. En definitiva,  la puesta en práctica de un diseño responsive no está exenta de ciertos problemas de diseño, navegabilidad o grado de satisfacción del usuario que pueden y deben ser superados, cuando la pretensión es desarrollar páginas webs excelentes para todos los dispositivos.

Si estás interesado en este tema, también te recomendamos la descarga de forma gratuita de nuestra guía sobre diseño responsive. 

descarga la guia

Problemas y soluciones del diseño responsive

A continuación, señalamos los problemas más habituales de diseño, estructura y navegabilidad utilizando la técnica del responsive web design y sus posibles soluciones:

La cabecera

Utilizar la misma proporción de cabecera vertical en una gran pantalla de escritorio de 17 o 19 pulgadas que en las 4 ó 5  de la mayoría de móviles es un error, no solo de diseño sino también de usabilidad, ya que se obliga al usuario a tener que hacer un scroll para encontrar lo que busca, lo que resulta molesto y supone una pérdida de tiempo. En estos casos, sería conveniente modificar manualmente los tamaños sin conformarse con el mantenimiento de proporciones automáticas propio del diseño responsive.

Los menús

La mayoría de webs originales están conceptualizadas para su uso en ordenadores de sobremesa o portátiles. Por este motivo, en ocasiones no se adaptan bien a las pequeñas pantallas de los móviles, la ausencia de ratón o las dificultades para escribir. Para evitar estos problemas, es aconsejable:

  • Sustituir los largos menús de navegación verticales y horizontales por modelos menos aparatosos,  reescalando el tamaño de las fuentes o reduciendo el menú a un icono y mostrarlo a demanda.
  • Diseñar los vínculos lo suficientemente grandes para poder ser accionados con comodidad con el dedo. No hay nada más molesto y estresante que querer pulsar sobre un vínculo con el dedo y accionar el de al lado, por ejemplo.

El contenido

En un dispositivo móvil todo es inmediatez y rapidez, por ese motivo los textos deben ser más cortos y directos. Por otro lado, únicamente se debe optar por eliminar contenido en la versión móvil de las web para ganar en rapidez de carga o claridad en el caso de que no aporten ningún valor al usuario, es decir, que sólo tengan un función estética.

Diseñamos para personas, no para dispositivos 

Nunca debe olvidar que detrás de cada móvil inteligente y de cada tablet hay una persona que lo maneja, y que lo verdaderamente importante para el éxito de una web es que su experiencia de navegación sea verdaderamente satisfactoria. El diseño responsive, como cualquier otro método o estilo, debe estar enfocado en las personas y no en las máquinas, y esa máxima debe tenerse muy presente en todas las decisiones y soluciones que decidamos implantar.

El diseño responsive es una estupenda técnica, muy práctica y útil, que está permitiendo una adaptación de las webs a todos los dispositivos con una calidad más que aceptable y con el menor esfuerzo en costes y horas de trabajo.  Pero también es una técnica joven y, por lo tanto, con algunos defectos que, con toda seguridad, se irán puliendo con el esfuerzo de todos: diseñadores, webmasters, y las aportaciones de los propios usuarios.

Post relacionados:

diseño responsive las claves