CSS para mejorar web móvil

Cada vez es más común el uso de dispositivos móviles para la navegación en Internet y esto conlleva un mayor uso de aplicaciones con HML5 para reducir costos de desarrollo. Así podemos desarrollar una sola aplicación que funcione en equipos de escritorio y móviles.

Una de las tantas ventajas que nos entrega CSS es la versatilidad de elementos que nos permiten tener un mejor control de la visualización de nuestra app en dispositivos móviles sin comprometer la versión de escritorio; dentro de estas ventajas, encontramos las animaciones de CSS, las cuales están soportadas por todos los navegadores modernos. Es importante tener en cuenta que el abuso de estas animaciones pueden comprometer el rendimiento del equipo en donde se ve el sitio.

Al momento de enfrentarnos con un desarrollo que necesite de animaciones, es fácil tomar recursos de amplio uso como el DOM o jQuery, sin embargo, debemos tener en cuenta que las animaciones CSS son más prácticas y rápidas que usar el DOM de HTML. Como ejemplo tenemos el elemento transform. Al contrario de elementos como width, height, margin, display, position, visibility, background… que usan amplios recursos del navegador y por ende RAM, las animaciones CSS usan pocos recursos del dispositivo y cumplen el mismo fin.

Para que quede un poco más claro, podemos ver un ejemplo de un menú lateral típico. La clase .menu es la contenedora. Al hacer clic en un botón, añade la clase .active (esto lo deberíamos hacer mediante JS) y hace que aparezca desde la derecha de la pantalla sobre los contenidos.

Con este CSS estamos creando un contenedor para nuestro menú, con 320px de ancho y el 100% del alto del navegador. Como lo hemos añadido la propiedad transform: translateX(320px), se crea 320px a la derecha en vez del lugar donde debería aparecer. Como tiene un right: 0, está a la derecha del todo, así que se va fuera de la pantalla. Además, le estamos diciendo que si tiene cualquier tipo de transición, esta dure 0.4 segundos y tenga un movimiento de tipo ease, es decir, que comienza con un movimiento rápido y vaya decelerando poco a poco, simulando un efecto más natural. Realmente no haría falta añadir la propiedad ease porque es la que tenemos por defecto, pero así veremos mas claro el ejemplo.

¿Que pasaría al hacer clic en el botón que abre el menú y añade la clase .active?

El menú, que antes estaba oculto derecho en la parte derecha de la pantalla, aparece desplazándose durante 0.4 segundos con un efecto bastante natural, como el que estamos acostumbrado a ver en la mayoría de aplicaciones nativas, y apenas sin gastar recursos de nuestro dispositivo.

Es importante usar la propiedad transform cada vez que podamos para mover elementos en pantalla y así mejorar el rendimiento de nuestro sitio en todos los dispositivos.