¿Qué es Responsive Web Design?


Esta técnica es una de las más utilizadas en la actualidad, permitiéndonos hacer que nuestros sitios web puedan adaptarse a cualquier dispositivo móvil o desktop.


Responsive Web Design o también conocido como Diseño Web Adaptable, es una técnica de diseño y desarrollo web que mediante el uso de estructuras flexibles (contenedores flexibles, imágenes y video flexibles) y junto con Media Queries especificados en CSS, logran adaptar un sitio web al entorno del dispositivo en el que se encuentre. Con ésta técnica se consigue que el contenido del diseño de tu sitio se vea bien y pueda ser bastante legible para los usuarios sobre el dispositivo con el que éste interactúe.


Hacer una web responsive está de moda. Y como todas las modas, la mayor parte de gente lo hace sin saber exactamente porqué.

Las opciones para ofrecer nuestra web a los usuarios que nos visitan desde dispositivos móviles son varias: web móvil, app nativa y web responsive. Cada una tiene sus pros y sus contras y a priori, la que más fuerza está cogiendo es la web responsive por un tema sencillo: es la más barata y rápida. Y no por ello la más sencilla, que podría parecer que sí.

Esta técnica ha modificado totalmente la forma en la que se diseña. Ha modificado el patrón. Ya no solo esta técnica sino que realmente el propio usuario y sus hábitos de navegación y consumo ha cambiado las reglas.


Algunos puntos que debes tener muy en cuenta antes de hacer tu web responsive.


Carga de página

Uno de los grandes problemas que nos encontramos cuando hacemos una auditoría es que en los diseños responsive no se diferencia a nivel de servidor la carga de elementos. Esto es un gran problema en la carga de página ya que al hacer la web responsive se cargan exactamente los mismos recursos que para tu web de escritorio.

Para solucionarlo, trata de utilizar librerías que te permitan hacer una carga de página condicional, evitando cargar recursos innecesarios cuando la gente te visita desde móvil.


Ojo con los tamaños de pantalla

Hay que tener mucho cuidado a la hora de diseñar. Se recomienda diseñar con el patrón mobile-first para evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles. La gran cantidad de dispositivos y pantallas que existen en el mercado hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.


Evita los efectos

Algunos de los efectos que usas en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no haces una comprobación multi dispositivo-plataforma puede que te encuentres que sorprendentemente el tiempo por visita desde móvil es extrañamente bajo. Esto pasa mucho, por ejemplo, cuando el «leer más» de una noticia aparece en el hover. El hover no existe en móvil por lo que el usuario no podrá continuar su visita.


Evita los efectos

Algunos de los efectos que usas en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no haces una comprobación multi dispositivo-plataforma puede que te encuentres que sorprendentemente el tiempo por visita desde móvil es extrañamente bajo. Esto pasa mucho, por ejemplo, cuando el «leer más» de una noticia aparece en el hover. El hover no existe en móvil por lo que el usuario no podrá continuar su visita.

No olvides medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil. Ten en cuenta todas estas cosas antes de lanzarte, así como el diseño responsive mejora la experiencia de usuario, como hemos visto, no siempre tiene que ser así.


8 vistas0 comentarios

Entradas Recientes

Ver todo