cafeina digital studio 0d9ec944ee28f04b064a723f355bbd427515962ffa99371e4530e9af2e17e287
Búscanos en Linkedin - Páginas web El Salvador Danos like en Facebook - Páginas web El Salvador Síguenos en Twitter - Páginas web El Salvador Síguenos en Google Plus - Páginas web El Salvador

7 Buenas prácticas para un Diseño Web Responsive

7 Buenas prácticas para un Diseño Web Responsive

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.