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.

Más logos Transbank en vectores

Como el logo de webpay para algunos no es suficientemente confiable, resultó que me pidieron agregar el logo de transbank, que obviamente no exitía en vectores.

el nuevo y amigable logo de transbank

Pero oh! milargro de milagros, con fé partí googleando “transbank logo”  y resulta que encontré un PDF no sólo con el lgo de transbank si no que con otras variaciones del de webpay y algunas aplicaciones bien prácticas; todo en vectores bien limpiecitos. Así que aquí publico las aplicaciones en vectores.

Espero que esto ayude a más de alguno.

 

Descargar el zip con los vectores en .AI .EPS y .SVG aquí.

este sólo lo he visto en POP.

webpay plus, con el logo de transbank abajo, separado por una linea punteada rosada.

Tarjetas, todas en vectores, verticales. Me imagino que para una barra lateral.

Logo de Webpay Plus en vectores

Aburrido de siempre estar peleando con JPGs y GIFs en baja calidad, cada vez que tengo que maquetar un sitio, he armado el logo de webpay plus en vectores.

Logotipo Web pay plus de transbank, con tarjetas y redcompra.

Descargar ZIP con archivos EPS, SVG, y AI.

Está actualizado con las últimas tarjetas de crédito, VISA, MasterCard, MAGNA, American Express y Diners Club.

Buscando las tarjetas di con un buen reemplazo a la logoteca, que desde que cobran no sirve para nada… es Brands of the World, eran los únicos que tenían la tarjeta MAGNA en vectores.

La tipografía del logo es Avant Garde Demi y Avant Garde Medium, aunque en los archivos están trazadas, con interletrado -109 en Illustrator y con la letra “W” comprimida al 90% horizontal (a la mala).

Obviamente, transbank no tiene publicado este logo, no está, no tienen centro de medios ni documentación y la documentación que te mandan una vez contratado el sistema da pena, renovaron todo el sitio, hicieron un nuevo portal y hasta hicieron videos explicativos, pero sigue vendiendo solamente y no da información, digno de un monopolio.

Dejo aquí las tarjetas en EPS para descargar, aunque, en varios casos les recomiendo buscar en la página de las respectivas marcas, donde tienen los logos al día y en varios formatos.

logo tarjeta visa

VISA

Logo Tarjeta Master Card

MasterCard

Tarjeta Magna de Chile

MAGNA

Logo tarjeta American Express

American Express

Logo trajeta Diners Club

Diners Club

 

Espero que esto sirva a alguien además de nosotros.