Diseño responsivo, optimización para móviles: ¿Qué incluye?

Un potencial cliente, hablando de diagramación responsive, me preguntó qué hacíamos para los móviles además de que se ajuste según la ventana. Me vi en aprietos, pues demasiadas cosas se me vinieron a la cabeza y me temo que mi respuesta fue un poco incoherente. Justo hoy me encuentro con un artículo de Paul Boag, que trata este tema, así que aquí escribo lo que nosotros queremos decir por optimización móvil.

Lo básico

El sitio responsive más básico se ajusta al tamaño de la ventana del navegador para facilitar su lectura o navegación. Son los mismos elementos que se re-diagraman según el tamaño de la ventana.

Esto es lo que normalmente incluye un theme o una plantilla responsiva común, esto tiene como consecuencia que el sitio sea más pesado para un móvil que si no se ajustara.

Lo importante

Para los smartphones y tabletas modernos el tamaño en pixeles del sitio no es lo más complicado, uno puede hacer zoom y resuelve muchos problemas si está relativamente bien diseñado.

El verdadero desafío para un smartphone es la velocidad y latencia de la conexión. Aún con 3G lo que más afecta la experiencia de un sitio es el tiempo de carga.

Entonces…

Optimización para móviles incluye:

  • Ajuste de la diagramación según las dimensiones de la ventana (media queries)
  • Otimización de las imágenes para los diferentes tamaños de dispositivos.
  • Logos y gráficos vectoriales para mejor resolución en pantallas de alta definición (retina).
  • Cambiar cómo se presenta la navegación según el espacio disponible.
  • Ajuste a links y botones para ser más amigable con los dispositivos touch.
  • Asegurarse que elementos como videos y tablas se ajusten adecuadamente en vez de ocultarlos.
  • Ajutar el cuerpo de los textos según el tamaño de la pantalla.
  • Extra Concatenación y compresión de imágenes, hojas de estilo (CSS) y javascript.
  • Evitar la carga innecesaria de archivos que no se van a usar.

Existen otras técnicas que no incluimos a menos que se soliciten específicamente, como entregar imágenes de alta definición para pantallas retina, puesto que pesan 4 veces más que las normales y no hay un modo fiable de saber con qué velocidad de conexión cuenta el dispositivo.

Esta lista no es exhaustiva de las técnicas responsive y de velocidad, pero sirve para acotar la definición y lo que generalmente incluye.

¿Me faltó poner algo? ¿Algo sobra, o está poco claro? Coméntanos.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>