Después de largas horas de maquetacion, programación javascript , backend y múltiples reparaciones de bugs, finalmente haz terminado tu apreciada aplicación web. Ahora redimensionas el navegador y una sonrisa aparece en tu rostro, estas feliz... Tu piensas que ahora tu sitio web is "mobile-friendly", que has logrado todos lo objetivos con tu sitio web.
Déjame decirte una cosa ante de seguir con este articulo:
"Estas perdiendo usuarios y probablemente dinero, si responsive design es tu única meta y solución para el mundo móvil."
Responsive design es solo la punta del iceberg para afrontar el mundo de dispositivos móviles.
Necesitamos entender mas allá de cualquier otro objetivo, que una experiencia para móviles debe de ser increíblemente rápida.
Por lo que entregar a nuestros usuarios el contenido lo mas rápido posible junto a una buena experiencia de usuario y que sea compatible con todos los dispositivos móviles, siempre ha sido un reto y no es diferente cuando estas implementando responsive design.
El primer problema que nos encontramos es la de probar apropiadamente nuestra web en los todos los navegadores posibles. Por ejemplo 3 versiones de IE, FireFox, Safari,Opera, chrome, etc. Y después de esto tenemos el gran numero de navegares móviles en nuestras manos.
- iOS
- Android
- Blackberry Webkit
- IE Mobile
- Opera
- Firefox OS
- amazon phone
- Y mas
Al mirar esta lista te das cuenta de que estamos en un mundo de sufrimiento, si tratas de soportar todos los dispositivos móviles en el mercado. Para una mejor idea de este mundo puedes leer este articulo anterior.
Una solución para estos casos es usar Google Analytics en tu sitio web y analizar que dispositivos usan tus usuarios y ajustar tu web acorde a ellos, aquí un articulo anterior sobre el tema. En general te entenderas que la mayoría del trafico proviene de dispositivos IOS y Android. Normalmente haremos todo lo que este a nuestro alcance para hacer que nuestro sitio luzca y funcione igual en ambos dispositivos, horas y horas de ajustes y muchas veces terminaremos con algo así : "Excelente en IOS y ok en Android".
Pero tu no tienes que tratar estos dispositivos como iguales y tampoco hacer lo imposible para que tu sitio luzca excelente en ambos. Lo que realmente importa es ser mas considerado con nuestros usuarios y darles a estas personas que quieren interactuar con tu sitio web, una experiencia funcional, hay una diferencia entre "soportado y optimizado".
Por razones de tiempo y presupuesto no es posible optimizar la experiencia de nuestra web para cada uno de los dispositivos conectado a internet, pero tenemos la responsabilidad de garantizar una experiencia decente para aquellos que desean interactuar con nuestros productos y servicios.
De acuerdo con Guy Podjarny’s research el 72% de los sitios web responsive entregan el mismo numero de bytes sin importar el tamaño de la pantalla, incluso en conexiones móviles. No todos los usuarios van a esperar a que tu sitio cargue y una única url no significa que deberías de entregar siempre el mismo documento ó que cada dispositivo debería descargar los mismos recursos.
Responsive design nunca tuvo la intención de resolver los problemas de rendimiento, por lo cual no podemos culpar a la técnica en si. Lo que si es un problema es creer que iba a resolver todos nuestros problemas, como muchos lo han pensado.
Pensar solo en tamaños de pantalla es sobrestimar los dispositivos móviles. Mientras la linea entre escritorio y móvil esta volviéndose cada vez mas difusa, aun tenemos diferentes posibilidades abiertas a nosotros basados en el tipo del dispositivos que visitan nuestro sitio web. en lugar de basarnos en media queries. La funcionalidad de un sitio web no puede depender solamente de media queries, algunos han empezado a llamar esto: "Responsible responsive design" mientras otros los consideran como responsive design con una vision moderna.
Mientras no exista una mágica solución y no todas las técnicas puedan aplicarse a cada tipo de documento, podemos usar un par de trucos para mejorar nuestros proyectos existentes y maximizar el rendimiento.
- Entregar cada documento a todos los dispositivos con la misma url y el mismo contenido, pero no necesariamente tiene que tener la misma estructura html.
- Siempre al inicio de cada proyecto comienza por "mobile first".
- Probar tus sitios en dispositivos fisicos, analizar que pasa cuando carga y cuando "display:none" es usado. Nunca confies solamente redimensionar el navegador.
- Usa tecnicas responsive images via javascript mientras esperamos una mejor solucion de parte de los navegadores.
Conditional Loading
Reemplaza las media queries con matchMedia de javascript en dispositivos de los cuales sabes que su contexto no cambiara, por ejemplo: Sabemos que un iphone no puede convertirse en el tamaño de un ipad dinamicamente, entonces solo necesitamos cargar el css para ese dispositivo. También podemos usar Modernizr para tomar decisiones inteligentes acerca de la interfaz y funcionalidad no solo basados en el tamaño de la pantalla.
Un típico sitio responsive entrega un único html para todos los dispositivos: escritorio, tablets, teléfonos, etc. Esto suena genial pero vivimos en un mundo con problemas de conexión y otros factores. Tu diseño responsive puede verse correctamente en dispositivos móviles pero no es tan rápido como debiera de ser y eso esta afectando tu conversiones.
Esto no es una regla de oro pero si un simple "display:none" aparece en cualquiera de tus estilos css, entonces tu sitio no es tan rápido como debiera, debido a que ocultas contenido que no se necesitas en otras resoluciones, por ejemplo : 10 scripts externos, jquery plugins y bonitas librerías que solo son usadas para grandes resoluciones.
Media queries
- Un único archivo css con múltiples declaraciones @media
- Múltiples archivos css linkeados en la pagina principal via atributos : <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
En el segundo caso puedes pensar que tener múltiples archivos es mejor, por que el navegador cargaría solo los estilos basados en los breakpoints, esto es lo que nos enseñan en tutoriales, blogs, libros y cursos. Pero eso no es correcto, todos los navegadores descargaran todos los archivos css externos sin importar el atributo usado.
¿ Por que lo navegadores hacen esto ?
Supongamos que tenemos un archivo css para portrait y otro para landscape. Si los navegadores cargaran los css solo cuando se necesitan, en el momento que pasas de portrait a landscape tendrás unos milisegundos congelado el navegador mientras se descarga y parsea el css ó tu pagina no tendrá estilo en esos instantes. Por eso eso los navegadores precargan todos los estilos desde el inicio.
¿ Pueden las dimensiones de los navegadores móviles cambiar ?
Comúnmente no, pero los navegadores móviles se están preparando para ser redimensionados como en escritorio en un futuro cercado, por esa razón los navegadores precargan todos los estilos sin importar las condiciones lógicas en media queries. Lo cual nos deja el problema actual: Estamos entregando mas recursos de los que realmente se necesitan, por lo tanto haciendo sufrir a los usuarios móviles sin ninguna razón.
Responsive basado en grupos
Podemos entregar un gran menú flotante para pantallas de 6 pulgadas a mas, y un menú pequeño para pantallas mas pequeñas de 6 pulgadas. Dentro de cada grupo nosotros podemos usar técnicas responsive para adaptar los menús en diferentes escenarios, como por ejemplo landscape y portrait. También cambiándolos un poco según el dispositivo (iphones 320px, android 360px, phanblets 400px)
Capas del lado del servidor
Desafortunadamente esta técnica no ha tenido mucha popularidad en la comunidad en algunos años y la única razón para esto es: "Somos programadores front-end, cualquier cosa que involucre al servidor luce como un problema para nosotros y no queremos eso".
Por que en algunos casos el diseñador front-end estará en control de un script en el servidor y en otros casos sera un equipo de desarrollo remotamente y el diseñador no querrá tener que tratar con el equipo cada vez que tenga que hacer un pequeño cambio en la UI.
Responsive design, rendimiento y datos técnicos
Usualmente pensamos en redes móviles en términos de ancho de banda. Con 3G obtenemos 5 mbps; con 4G 50 mbps. Pero eso no es generalmente el factor mas importante en una experiencia móvil. Mientas que mas ancho de banda es útil para transferir grandes archivos como vídeos de youtube, esto no agrega mucho valor cuando estas descargando muchos archivos pequeños, y la latencia es alta y fija. Latencia es el tiempo de viaje de ida y vuelta que el primer byte de cada paquete le toma para alcanzar el dispositivo después de una petición.
Las redes móviles tienen mas latencia que las demás conexiones, por ejemplo: La latencia en una conexión DSL domiciliar en EEUU es entre 20 y 45 milisegundos, en 3G puede ser de 150 y 450 milisegundos, y en 4G es entre 100 a 180. En otras palabras la latencia es de 5 a 10 veces mas alta en un conexión móvil que en una domiciliar.
Navegadores en la nube
El principal objetivo de cualquier sitio web debería de ser usuarios felices, el cual te creara mas conversiones. El rendimiento de un sitio web tiene un gran impacto en las conversiones y particularmente en móviles que ha sido comprobado muchas veces.
"A tus visitantes no les un importa si tu sitio web es responsive, no les importa si la versión móvil esta separado del resto, y tampoco si solo es texto. Lo que a ellos les importa es que no puedan hacer lo que necesitan hacer, lo que a ellos les interesa es que tu sitio tome 20 segundos en cargar, a ellos les interesa si las interacciones sean incomodas y no funcionen." - Brad Frost
Los usuarios quieren algo rápido y fácil de usar, ellos usualmente no redimensionan el navegador y ellos no entienden lo que significa "responsive". Para abordar toda la diversidad de dispositivos existentes en internet, tenemos que tomar el asunto en nuestros manos y hacer todo lo que podamos para hacer la experiencia mas flexible. Los días de "desktop-only" han terminado y esto no solo involucra estructuras html adaptables, tambien un sinnúmero de otras cosas a tener en cuenta.
Hay un articulo interesante de como se ha incrementado el tamaño de las paginas con los años: http://www.sitepoint.com/average-page-weight-increases-15-2014/
| technology | end 2013 | end 2014 | increase |
|---|---|---|---|
| HTML | 57Kb | 59Kb | +4% |
| CSS | 46Kb | 57Kb | +24% |
| JavaScript | 276Kb | 295Kb | +7% |
| Images | 1,030Kb | 1,243Kb | +21% |
| Flash | 87Kb | 76Kb | -13% |
| Other | 205Kb | 223Kb | +9% |
| Total | 1,701Kb | 1,953Kb | +15% |
Responsive web design es una metodología siempre cambiante que ayuda a manejar lo desconocido, nuestro trabajo nunca termina , creamos , adaptamos, aprendemos y creamos de nuevo.
links:
- http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
- http://bradfrost.com/blog/mobile/support-vs-optimization/
- http://www.smashingmagazine.com/2013/03/11/responsible-web-design/
- https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques
- http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
- http://www.sitepoint.com/average-page-weight-increases-15-2014/
No hay comentarios:
Publicar un comentario