Mobile first: 10 trucos de diseño web responsive

La irrupción de smartphones y tablets hizo que el diseño web para móviles se convirtiese en una prioridad. Las empresas demandan para sus páginas un diseño web responsive que ofrezca una buena experiencia de navegación a los usuarios que se conectan a través de dispositivos móviles.

Responsive y adaptive son dos términos habituales para referirse a dos formas de abordar el diseño web móvil, ambas basadas en la programación de webs HTML5, CSS3 y JavaScript.

Adaptive es el diseño que varía la visualización y el contenido dependiendo del dispositivo, lo que implica un diseño específico para cada tipo de dispositivo.

Responsive es un diseño que va de menos capacidades a más. De esta forma el navegador automáticamente sabrá qué hacer con cada dispositivo. Es lo que se conoce como mobile first.

LAS VENTAJAS DE DISEÑO DE WEBS BAJO LA TÉCNICA MOBILE FIRST

Con el mobile first tenemos una visión de conjunto desde el primer momento, creando jerarquías de contenido por niveles de importancia y decidiendo qué contenido es importante para la web móvil y cuál no.

Una web responsive tiene mejor rendimiento en resoluciones inferiores si se planifican las clases CSS desde el principio en vez de sobreescribir las reglas para los dispositivos móviles, puesto que con esto último se emplean más reglas de las imprescindibles y se descargan elementos no necesarios.

El mobile first sirve para diseñar una web eficiente partiendo de lo esencial a lo de mayor resolución. De esta forma, los dispositivos de escritorio cargan más reglas CSS y más imágenes puesto que se presupone que tienen mejor conexión a Internet y procesadores más potentes.

Al diseñar basándose en el contenido es más fácil crear una buena experiencia de usuario sea cual sea la resolución que pueda necesitar una web en un futuro. El IoT avanza a pasos agigantados. Un diseño adaptable garantiza que una web funcione correctamente en un reloj, un frigorífico o en cualquier dispositivo futuro.

TRUCOS DE DISEÑO WEB RESPONSIVE

1. Tener en cuenta la resolución de pantalla de los diferentes dispositivos y sistemas operativos (Android, Apple OS, Windows OS…).
2. Usar navegación vertical, scrolling de una sola dirección y títulos cortos.
3. Evitar tablas y frames que puedan complicar la navegabilidad.
4. Emplear pocas imágenes (de 72 dpi y 640 px) y vídeos cortos para agilizar la descarga.
5. Utilizar colores con contraste, ya que el móvil se puede usar en condiciones de mucha luminosidad, lo que dificulta la visualización.
6. Evitar las ventanas emergentes, puesto que los navegadores móviles no las soportan.
7. Emplear una tipografía grande (14 puntos) con un ancho de renglón de 80 caracteres como máximo.
8. Separar los enlaces del resto del texto para que se puedan seleccionar con el dedo.
9. Recordar que algunos dispositivos no aceptan cookies ni JavaScripts.
10. Utilizar porcentajes en vez de tamaños absolutos para la estructura de la web.

¿Tu web ya está diseñado según la técnica Mobile First? Si la respuesta es no, contacta con Global CC hoy y ¡Hazla Mobile First, YA!