3 puntos a tener en cuenta a la hora de hacer tu web responsive
Un diseño responsive adapta la presentación de una web al espacio disponible. Puedes reorganizar columnas, navegación e imágenes sin crear una URL distinta para móvil. Google recomienda esta configuración por su facilidad de mantenimiento, pero hay que comprobar cómo funciona con el contenido real. Estos tres puntos suelen dar problemas.
Carga de página
Ocultar un elemento con CSS no evita necesariamente su descarga. Revisa qué imágenes, vídeos y scripts carga la página en móvil. Utiliza imágenes adaptables con srcset y sizes, y evita descargar recursos que no se van a usar. MDN explica cómo reducir el peso de las imágenes.
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.
Recomendado: Guía para el desarrollo web móvil (inglés)
Evita los efectos
No hagas depender una acción del hover. En una pantalla táctil, un enlace que solo aparece al pasar el ratón puede quedar inaccesible. Deja los controles visibles o proporciona otra forma de activarlos y comprueba también la navegación con teclado. Prueba la web en pantallas y dispositivos distintos antes de darla por terminada.
