El diseño web responsive no es sólo una cuestión de apretar y estirar. Se trata de ofrecer un sitio web de innumerables maneras, dependiendo del ancho de la pantalla. Lo que hay que añadir, lo que hay que eliminar, cómo dar prioridad a lo que es más importante, cuáles son las implicaciones para el ranking de búsqueda y cómo se hace todo eso con una sola base de código.
Es una gran tarea, si, por eso te dejamos esta lista de muy buenas prácticas que debes considerar para hacer de este trabajo lo más grato y exitoso posible.
1. Menú de navegación oculto.
Las pantallas más pequeñas que ocultan el menú de navegación principal es una buena manera de mantener los diseños simples. Un icono, texto o combinación de ambos indica al usuario dónde está el menú.
Tus opciones incluyen un simple menú desplegable, donde el menú se desliza hacia abajo y cubre el contenido principal o el método de superposición donde el menú se expande y cubre toda la pantalla.
2. Menú de desplazamiento horizontal.
Otra manera es dejar el menú visible en pantallas pequeñas pero dejar el contenido del menú fuera del borde de la pantalla donde se encuentra la información. Dejar parte del texto del menú cortado indica que se puede desplazar hacia un lado, así el ejemplo del menú de Google en pantallas móviles al buscar un tema es especifico.
3. Ubicar botones y links largos, áreas “clickeables”.
En lugar de hacer botones más pequeños en los móvil, hazlos más grandes, por lo que son más fáciles de aprovechar. De hecho, esto no sólo se aplica a las pequeñas pantallas, es bueno para cualquier medio donde se vean los sitios web.
Los botones grandes mejoran la usabilidad. A la vez que tienes botones más grandes, también debes tener enlaces de texto más grandes. Si, por ejemplo, tiene una rejilla de titulares de noticias, con un enlace de texto que dice "Leer más" dentro de cada uno de ellos; en lugar de hacer esto, puedes convertir en link todo el resumen del contenido, así todo pasa a ser clickeable.
4. Balance entre el peso de la fuente y el tamaño.
La relación entre el tamaño de los encabezados y el texto del párrafo debe estar bien equilibrados. Los encabezados grandes no se ven bien en el móvil, sobre todo si se extienden sobre unas pocas líneas. Todo debe cambiar de tamaño adecuadamente.
Los dispositivos móviles nuevos tienen pantallas de alta resolución, lo que hace que un texto sea más legible y más fácil de leer. Puedes permitirte el lujo de ir un poco más pequeño en las pantallas móviles y aumentar los tamaños de fuente cuando se llega a una pantalla más grande.
5. Anchuras de lectura óptima.
Al hacer un diseño más amplio en las pantallas más grandes, es importante tener en cuenta las longitudes de las líneas de tu contenido.
Si una línea de texto es demasiado larga, es más difícil de leer porque es difícil seguir la línea a línea. Del mismo modo, si se tienen líneas que son demasiado cortas rompe el ritmo de la lectura ya que los ojos tienen que moverse hacia atrás y hacia adelante con demasiada frecuencia.
La práctica común es mantener las longitudes de línea en alrededor de 60-75 caracteres. Esto se puede lograr mediante el establecimiento de sus áreas de texto para tener un máximo de anchura de aproximadamente 500/700 píxeles de ancho.
6. Poner la información importante en la parte superior.
Muestra números de teléfono, información de contacto, los CTAs, etc. en la parte superior en el móvil.
Los usuarios de móviles quieren la información de forma rápida, pero esto también funciona bien en cualquier dispositivo. Por ejemplo, en una página de detalles de productos de comercio electrónico es bueno tener el botón "Añadir a la cesta" visible para la mayoría de los usuarios, sin que tengan que desplazarse.
7. Cambiar el orden de los bloques de contenido cuando se colapsan en pantallas pequeñas.
Decide lo que es más importante para mostrar por primera vez en una pequeña pantalla, a continuación, cambia el orden de contenido.
Si en una pantalla de escritorio hay un bloque de contenidos de texto y un bloque de imagen situado uno junto al otro, decide lo que es más relevante y eso se mostrará a primera vista.
