Webapps. Mejorar el rendimiento mediante hojas de estilo

Cuando decidimos desarrollar una webapp por sus ventajas frente a una aplicación nativa (facilidad de mantenimiento, evitar en cierta medida el uso de stores, …) es importante que tengamos en cuenta una serie de medidas de rendimiento y velocidad para el éxito del proyecto.

Podemos pensar que una webapp es una aplicación que se usará, al igual que una web, una versión tipo escritorio (por ejemplo, en un iPad) o bien en pequeños dispositivos móviles. Por tanto, ya que nos enfretamos a los mismos problemas que tenemos cuando desarrollamos webs, podemos utilizar gran parte de las mismas soluciones que hemos utilizado hasta ahora.

Una de estas, se basa en el enfoque MobileFirst.

¿En qué consiste?

Cuando comenzamos a desarrollar versiones móviles, solíamos crear una hoja de estilos alternativa para la versión móvil. Es decir, mateníamos una versión móvil diferente de la de escritorio

Tras varios trabajos, cuando nos fijábamos en cómo eran las hojas de estilo de estas primeras webs multidispositivo, estas siempre seguían un patrón:

• Escritorio, hoja de estilos base complicada, con multitud de efectos y transiciones, complejos layouts, columnas, posicionamiento absoluto, fijo y relativo
• Móvil, hoja de estilos con muchísimas reglas que reseteaba todo lo anterior para dejarlo todo en un diseño que se adaptaba más a todo el ancho

Podemos decir que, para una web normal, teníamos que escribir casi el doble de reglas de estilo. Cada equivalente de lo que escribíamos para escritorio, tenía su correspondiente anulación para móvil y, peor aún, cómo la hoja de estilos de escritorio tenía la base: tipografías, colores, etc, nos era necesario incluir ambas hojas de estilo en el proyecto

Un mejor enfoque para esto, es invertir el orden, es decir, programar el layout más sencillo, y otra hoja de estilos para dispositivos que ofrezcan una mayor área de trabajo o bien otros beneficios de usabilidad para los clientes

Gracias a la etiqueta media cuando definimos nuestras hojas de estilo, podemos decir en qué momento queremos que se carguen las hojas de estilo

Esta última regla, la de desktop.css nos permitirá reducir el ancho de banda necesario cuando carguemos la aplicación desde un móvil, evaluará la etiqueta media y se dará cuenta que no es necesaria que sea cargada

MobileFirst e Internet Explorer 8

En el caso de que queramos de que nuestra webapp también sea accesible desde el navegador, tenemos que tener en cuenta de que la tecnología de las media queries sólo está disponible a partir de la versión 9 del navegador Internet Explorer. Ver disponibilidad

Esto quiere decir, que la versión de escritorio del ejemplo anterior no será cargada desde este navegador.

Aunque existen distintas soluciones para este problema, la que aquí proponemos por su sencillez, es ésta:

Usar el condicional de explorer

Referencias

• There Is No Mobile Web
• MDN. matchMedia
• A list apart. Planning for Performance
• Responsive Design: Why You’re Doing It Wrong
• Mobile Web Best Practices 1.0. One web