responsivo_mobile

Hace un tiempo ya se ha dado a conocer el concepto de diseño responsivo (responsive web design) que definido de manera sencilla es un diseño que se adapta a diferentes dispositivos para dar una experiencia personalizada en cada uno.

Pero el diseño responsivo en la práctica si no se entiende bien puede tener grandes problemas de usabilidad, por lo menos en lo que respecta a las experiencias que he tenido con empresas que están incursionando en el tema en Colombia.

Por lo general muchas agencias o empresas que desarrollan sitios web se han encontrado con nuevos requerimientos y uno es que el diseño sea responsivo, pero dado que es un tema muy nuevo en el cual no tienen experiencia alguna, la primera opción y más fácil es hacer 3 sitios diferentes para cada resolución y de cierta forma simular que es responsive.

Esto supone un gran problema puesto que si se implementa una solución de este tipo en un sitio con mucha información o secciones y tenemos que hacer cambios, nos tocará hacerlo en 3 sitios diferentes, adicionalmente responsive no es ocultar cosas por css en el layout, también es no cargarlas y optimizar el contenido para cada dispositivo.

Usabilidad y diseño responsivo

Uno de los problemas de usabilidad más grande que puede tener el diseño responsivo es el de la velocidad de carga, puesto que para la experiencia del usuario el tener que lidiar con páginas que no respondan rápidamente o en las cuales la lentitud interfiere con sus objetivos es tedioso y un motivo para abandonarlas y no volver.

Qué es un Breakpoint

Un Breakpoint es el tamaño al que debe adaptarse el sitio responsivo, tamaño de un rango de dispositivos, cuando el sitio responsivo tiene o alcanza un determinado ancho y llama una hoja de estilos.
responsive_breakpoints

La metáfora del montañista y el responsive

Este concepto de diseño responsivo y el tiempo de carga puede ser difícil de entender para personas que no están familiarizadas con temas de diseño o tecnología, por eso me puse en la tarea de a partir de una metáfora explicarlo un poco.

Caminando y con la carpa visible (breakpoint para PC y Laptop)

responsive_mostrar

Supongamos que el montañista (usuario) lleva un morral (200 kbs: peso del sitio para celulares) y en la parte de abajo lleva la carpa amarrada por fuera del morral (100 kbs: peso de contenido adicional, se muestra por .css = .carpa{display:block})

En este escenario el caminante llega a la cima y al final tuvo que cargar 300kbs . Como va caminando el esfuerzo no es tanto y además este personaje si va a usar la carpa porque se va a quedar a dormir (Este usuario va a valorar e interactuar con el contenido adicional que le demos)

Escalando y con la carpa dentro del morral (breakpoint para celulares)

Responsive hide

En este escenario al personaje le va a tocar hacer más esfuerzo por eso no lo ponemos a caminar sino a escalar, porque la velocidad de conexión en celulares en Colombia por lo general es más lenta que en PC.

A este personaje le vamos a decir que suba la montaña escalando con una cuerda y con los mismos (300kbs: carpa + morral ), pero en este caso no va a tener la carpa por fuera, sino la mete en el morral, es decir por .css ocultamos el contenido adicional = .carpa{diplay:none} pero igual la tenemos que cargar.

Adicionalmente este personaje no se va a poder quedar a acampar le toca bajar de la montaña el mismo día, es decir que la carpa no le va servir para nada (100kbs de contenido adicional)

Fuera de que este pobre montañista tiene que escalar tiene que cargar un peso que no le sirve para nada y no está viendo.

En conclusión si no va a usar ciertos elementos en los breakpoints no los cargue, acuérdese del pobre montañista.

Javascript para no cargar elementos

Se pueden usar condicionales de javascript para no cargar elementos si no son necesarios.

<script>
if (document.documentElement.clientWidth > 640) {
mostrarcarpa();
}
</script>

via: 24ways

Consejos para una mayor velocidad de carga en un diseño responsivo

1. Diseña primero para la versión más simple (móvil)
2. Empieza con sólo los estilos (.css) que necesites en esa primera versión y crea una hoja con ellos lo ideal es casi que esta primera versión funcionara con la menor cantidad de estilos
3. Para un breakpoint más grande se deben añadir los estilos que permiten que se agrande o se añadan contenidos
responsive_css
4. Los breakpoints estándar son tabletas, celulares y las orientaciones verticales y horizontales de los mismos
5. Deben crearse por lo menos imágenes optimizadas en tamaño y peso para cada uno de los breakpoints y se deben llamar dependiendo del tamaño de pantalla que tenga el dispositivo
6. Se debe contar con consistencia visual y claridad en el mensaje que se quiera comunicar en cada contexto
responsive_context