13 rápidos consejos y trucos para un diseño web responsivo

Contar con un diseño web responsivo a día de hoy es obligatorio. Debido al incremento del número de gente que accede a internet desde sus dispositivos móviles para realizar búsquedas sobre productos y noticias, tu negocio no puede permitirse tener un diseño web que no sea responsivo.

Cuando a esto le añadimos el hecho de que Google favorece con su algoritmo a los sitios web responsivos, está claro que el diseño responsivo está aquí para quedarse. Si estás preparando el lanzamiento de tu sitio web, los consejos que destacamos en este artículo te ayudarán a diseñar un sitio atractivo y responsivo. Y si estás rediseñando tu sitio web actual, estos consejos te servirán igualmente.

Cómo implementar un diseño web responsivo

Los siguientes consejos para el diseño de una web responsiva y apta para dispositivos móviles te ayudará a asegurarte tanto de que tu web sea responsiva como «mobile-friendly». Aquí tienes algunos de los mejores consejos para el diseño web responsivo:

1. Descubre cómo usan el móvil tus usuarios

Debes comprender que la gente usa los sitios web de forma diferente desde un dispositivo móvil que desde un ordenador de sobremesa. Valora la posibilidad de encuestar a los visitantes de tu sitio web o usa las analíticas para descubrir porqué acceden con un dispositivo móvil y a qué páginas y qué elementos usan más. Esta información te ayudará a entender qué páginas y elementos de tu sitio web deben estar disponibles en las pantallas pequeñas.

Por ejemplo, si buscan tu sitio web para acceder a tu información de contacto, asegurarte de que tu página de contacto aparezca en el menú que se muestra en los dispositivos móviles será sin duda una decisión inteligente.

2. Primero planifica tu diseño

Antes de diseñar tu sitio web, es útil que planifiques primero la maquetación de las páginas. De hecho, la mayoría de los diseñadores web empiezan creando un boceto a groso modo, después pasan a la etapa de diseño y por último, lo crean mediante código. Esto no sólo te ayudará a crear el aspecto exacto que deseas, también facilitará, a tí o a tu diseñador, la personalización de la plantilla y a integrarla con tu imagen de marca sin esfuerzo.

Asegúrate de crear varios prototipos de tu sitio web y compruébalos en distintos tamaños de pantalla para asegurarte de que el diseño final sea responsivo. Aquí tienes algunas herramientas que puedes usar para crear prototipos responsivos.

• Adobe Edge Reflow. Esta herramienta de Adobe te posibilita diseñar de forma visual un sitio web responsivo convirtiendo los archivos Photoshop en HTML y CSS y permitiéndote ajustar el diseño mediante breakpoints para dispositivos móviles.
• In Vision. Gracias a InVision, podrás crear prototipos interactivos de tu sitio web. Los usuarios a los que envíes el enlace de acceso, podrán testear la navegación, los botones, el desplazamiento de página, y mucho más. Además podrán dejarte comentarios de ‘feedback’ para ver cómo funcionará tu sitio web en distintos contextos.

• Wirefy. Esta herramienta es muy útil si quieres basar tu diseño teniendo en cuenta en primer en el contenido. Te permitirá usar una retícula responsiva y crear un boceto de tu sitio web sin tener que calcular las anchuras y los porcentajes de las columnas.

3. Ten cuidado con la navegación

El sistema de navegación es la parte más importante de cualquier sitio web. Sirve de mapa para que tus usuarios accedan fácilmente a otras páginas de tu sitio. En la versión de sobremesa de tu sitio, tu navegación tendrá normalmente enlaces bien visibles hacia todas las páginas importantes. En dispositivos móviles, la práctica habitual consiste en usar un menú con un icono «hamburguesa» que oculta/muestra los enlaces al ser pulsado.

Sin embargo, este no siempre es el mejor enfoque ya que algunos usuarios podrían no darse cuenta de que tienen que hacer clic sobre el icono para revelar el menú y se sienten frustrados al no saber cómo visitar otras páginas. Un mejor enfoque sería dejar los elementos más importantes del menú bien visibles incluso en las pantallas pequeñas y usar la hamburguesa para el resto de los enlaces. También puedes incluir enlaces a otras páginas en el cuerpo del texto de tu página de inicio para facilitar la navegación.

Nota: Écha un vistazo a algunos útiles plugins para mejorar los menús en WordPress

4. Optimiza las imágenes

Las imágenes juegan un papel importante en el diseño web de tu sitio. Pueden ayudarte a crear una conexión emocional con los usuarios y permitirles visualizar el producto que les interesa comprar. Por tanto, es crucial que tus imágenes estén optimizadas para la web.

Esto significa que las imágenes deberían guardarse con el formato apropiado – JPG para las fotografías o imágenes de escenas y PNG-8 para iconos y logotipos que requieren un fondo transparente. Además de todo esto, deberías reducir el tamaño de las imágenes mediante una herramienta como TinyJPG y valora usar imágenes que estén optimizadas para distintos «breakpoints» móviles de manera que reduzcas los problemas de ancho de banda (capacidad de transmisión de datos entre el servidor y el dispositivo desde el cual el usuario visualiza tu sitio).

5. Valora hacer uso de un enfoque «Mobile First»

Otra forma de enfocar un diseño responsivo consiste en empezar diseñando primero la versión móvil del sitio web. Esto te permitirá comprobar cómo se verán las imágenes, los textos, los logos, y otros elementos en las pantallas pequeñas. Si se muestran sin problemas, entonces no deberías tener ningún problema para adaptar posteriormente este diseño a las pantallas de mayor tamaño.

6. Aprende cómo usar las media queries

Las media queries formaban parte de la propuesta inicial de CSS, pero no se convirtieron en realidad hasta que los navegadores no les ofrecieron oficialmente soporte en 2012. El papel principal de las media queries consiste en permitirte optimizar el diseño de tu sitio web para distintas anchuras de pantalla.

Cuando usas media queries, el contenido responderá a las distintas condiciones de dispositivos concretos. En pocas palabras, una media query comprobará la resolución, la anchura, y la orientación del dispositivo y mostrará el conjunto de reglas CSS adecuadas.

7. Agrega activadores de teclado para los formularios

No hace falta señalar que los formularios de tu sitio deberían adaptarse a la anchura y el tamaño de las distintas pantallas. Sin embargo, puedes ir un paso más allá y asegurarte de que los campos de entrada funcionan correctamente con cada tipo de teclado. Puedes hacerlo fácilmente añadiendo elementos input en tus campos de formulario.

Los campos de entrada de texto como aquellos para el nombre, el email, la dirección, etc., deberían activar un teclado de texto mientras que los campos de entrada que requieren cifras deberían activar de inmediato el teclado numérico. Esto mejorará la usabilidad móvil de tu sitio web así como experiencia de usuario.

8. Asegúrate de que los botones pueden ser clicados fácilmente en las pantallas pequeñas

No olvides prestar atención extra a los botones de tu sitio web. Como el espacio de pantalla disponible es tan preciado, es fácil caer el error de crear botones más pequeños de manera que quepan en la pantalla. Sin embargo, esto también hace que sea más complicado pulsarlos.

Asegúrate de que los botones son fácilmente reconocibles:

• Usa el color para resaltarlos del resto de la página.
• Usa un rectángulo o un círculo para representar el botón.

En lo que respecta al tamaño, usa la propiedad css «padding» para hacer que el área clicable de tu botón aumente. También podrías seguir la recomendación de Material Design para la accesibilidad de los botones y asegurarte de que tienen como mínimo 36dp de altura (1dp = 1px).

9. Optimiza la tipografía

En lo relativo al texto, asegúrate de que sea legible en las pantallas pequeñas. Un buen tamaño para el cuerpo del texto sería 16px o 1em y después ajusta en consecuencia el tamaño de los titulares. Al mismo tiempo, querrás ajustar la altura de línea de tu texto a 1.5em para asegurarte de que las líneas de los párrafos respiran lo suficiente.

Otro tip sobre el diseño web para dispositivos móviles es usar fuentes legibles. Evita usar fuentes decorativas o script para el cuerpo del texto o para los elementos de menú ya que son difíciles de leer, especialmente en pantallas pequeñas.

Consulta estos artículos para mejorar la tipografía de tu sitio:

• Fundamentos de diseño web: por qué es importante la tipografía
• Anatomía de la tipografía web

seguir leyendo en Tuts+