5 consejos sobre diseño web responsive

Carlos Ñíguez
De la mente de: Carlos Ñíguez 24-Jul-2018 Diseño
5 consejos sobre diseño web responsive 0 Comentarios
Basado en 1 votos

Con la web móvil creciendo a un ritmo constante y Google confirmando que clasifica las páginas en función de su capacidad de respuesta, es crucial que tu sitio web se puede adaptar a la mayoría de dispositivos y tamaños de pantalla.

 

Ahora bien, el diseño web responsive es mucho más que un mero estirar o comprimir el diseño para que se adapte al dispositivo.

Se trata de ofrecer un sitio web único de diferentes formas, al tiempo que se mantiene el contenido y la funcionalidad.

Con esto en mente, aquí te presento cinco consejos prácticos para el diseño web responsive.

1. Presta atención al contenido

No caigas en la trampa del enfoque "ajustar a caja", donde tu objetivo está en encajar todos los elementos en una vista sin tener en cuenta su contexto. Comienza por entender el contenido y las características del proyecto, así como determinar cuáles son las más importantes.

 A medida que subes en los diferentes tamaños de pantalla (si practicas mobile first), cuestiónate la colación de cada elemento en cada etapa. 

La gran variedad de tamaños de pantalla implica que el concepto tradicional de "que se vea todo en mi pantalla" está prácticamente muerto, aunque para ser honestos, aún existen clientes que así lo solicitan. 

El usuario medio está acostumbrado a desplazarse e ir encontrando los elementos de interacción a su paso, esto es, datos de contacto, CTA, y en sitios de comercio electrónico, el importante botón "Añadir a la cesta".
Prioriza los elementos basándote en la importancia para el usuario, por lo que piensa cuidadosamente cuál es la mejor fórmula para captar la atención de los usuarios en un dispositivo móvil.

2. Experimenta con la navegación escalable

La navegación es uno de los aspectos más desafiantes del diseño web responsive y a su vez, uno de los más importantes. Contrariamente a la mayoría de las reglas del diseño web, este es un lugar en el que no es necesario ser estricto: los menús grandes y complejos utilizados en las pantallas de gran formato no funcionan en los móviles, por lo que es perfectamente aceptable crear un tipo diferente de navegación para cada tipo de vista.

La barra de navegación oculta es quizá la más popular en los sitios móviles.

Con un simple icono como la "hamburguesa" indicamos de forma precisa la presencia del menú y así poder deslizar el menú hacia abajo, o hacer que se superponga en toda la pantalla. Otra opción es ejecutar un efecto plump para el desplazamiento horizontal, donde el contenido, obviamente, desaparece del lado de la pantalla.

Cualquiera que elijas es válida y no anula coherencia al sistema de navegación.

3. Todo sobre las imágenes

La calidad de las imágenes en los sitios web es fundamental, ya que son una de las partes más importantes en beneficio de una buena impresión del visitante. En este punto, conviene indicar las imágenes de gran tamaño tienen un efecto negativo sobre la velocidad de descarga de los dispositivos móviles, normalmente con menor ancho de banda. 

Cuestionaremos la inclusión de cada imagen para cada tamaño de pantalla e incluiremos sólo aquellas que son absolutamente necesarias.

Optimiza el resto de imágenes haciéndolas flexibles con tamaños adaptativos y guárdalas usando el formato apropiado. Recuerda que es poco probable que necesites la funcionalidad de "ampliar la imagen" en un móvil, ya que la imagen ser verá de forma completa en la pantalla.

Si necesitas incluir galerías de imágenes, opta por una navegación de desplazamiento vertical largo o en su defecto, el desplazamiento horizontal para moverte entre ellas.

4. Piensa en la tipografía

La tipografía que elijas para tu proyecto también requiere un tratamiento especial ya que muchos tipos de letra funcionan muy bien en una pantalla grande o mediana, pero se vuelven difíciles de leer cuando se reducen para los tamaños de pantalla más pequeños. 

En este punto, lo más conveniente será probar a fondo, tanto la tipografía como el contraste adecuado entre el color de fondo y la fuente.

A medida que subamos el tamaño de la pantalla, presta atención a la longitud de línea del contenido (si una línea es demasiado larga puede ser difícil de leer). Mantén longitudes de línea de aproximadamente 60 a 75 caracteres y en pantallas más anchas, rellena el espacio con una barra lateral o imágenes.

5. Optimiza para pantallas táctiles

El diseño web responsive no sólo tiene que tener en cuenta diferentes tamaños de pantallas, también se debe optimizar para diferentes formas de uso. En este campo, las pantallas táctiles pueden añadir un plus de complejidad por lo que es mejor ser generoso con el tamaño de los botones y enlaces, con el objetivo del área clicable (aproximadamente 44 puntos cuadrados). 

Además, la experiencia de usuario en estos dispositivos debe ser completa. 
Por ejemplo, los dispositivos táctiles carecen de efecto hover, por lo que es conveniente colocar la información en pantalla o al "tapear" el contenido. 

También podemos fortalecer su experiencia con ayudas a la navegación, gestos de deslizamiento, etc.

Las técnicas para el diseño web responsive crece y evoluciona constantemente y las mejores prácticas para este campo están cambiando con también con frecuencia.

Carlos Ñíguez
Carlos Ñíguez Senior Designer

Experto en UI/UX , diseñador senior y cursado arte-finalista. Exiliado de la construcción, por entrar en la cámara secreta de la W3C. Voluntarioso, humilde y con gran coraje. Carga una gran responsabilidad a sus espaldas, ¡y eso es mucho!

Ver perfil completo del autor
¿Qué te ha parecido este artículo?
Deja tu comentario
Acepto la Política de Privacidad (Leer)
Acepto recibir información comercial
¿Necesitas hablar? ¡Contacta con nosotros!