El diseño web adaptable ya es la palabra de moda de la década, y es ideal para el mundo conectado en múltiples pantallas en el que vivimos. Sin embargo, la compensación para esto está en el rendimiento debido a los tamaños de archivo más grandes.
Esto ha llevado a algunos expertos a decir que, al igual que en los primeros días de Flash, el diseño receptivo es algo que todos podemos estar entusiasmados sin una buena razón. Sin embargo, aunque en este momento hay problemas de rendimiento, estos se pueden superar en cierta medida con algunos pequeños ajustes, compresión y cambio de tamaño de la imagen.
El diseño receptivo carga todos los mismos elementos HTML para cada dispositivo, incluidos los destinados a la entrega de tabletas y computadoras de escritorio. Esto significa que a menudo se entrega todo el contenido, incluidas las imágenes y los scripts, sin importar en qué dispositivo se esté visualizando.
Un estudio llevado a cabo el año pasado mostró que el 86% de los sitios receptivos actualmente en línea entregan una página de escritorio completa a los dispositivos móviles. Esta es claramente una tendencia a la técnica de diseño que debe abordarse, si queremos detener el avance de las páginas web infladas en sus pistas.
Por el momento, el diseño receptivo está haciendo subir el tamaño de las páginas y esta es la tendencia que debe abordarse, especialmente cuando se considera que el 57% de los usuarios móviles se irán si el sitio no se carga dentro de 3 segundos.
Para aquellos que ya tienen un diseño en su lugar y desean optimizar ahora, Mobitest se puede usar para medir el rendimiento para continuar y abordarlo. Por supuesto, al planificar un diseño, la optimización será más fácil de llevar a cabo en esta etapa y el rendimiento siempre debe considerarse una parte esencial del diseño, en lugar de una idea de último momento.
Para mejorar el rendimiento, es necesario reducir el tamaño de las páginas y los recursos cargados. Esto se puede llevar a cabo usando varias técnicas, sin alterar seriamente la apariencia del sitio.
Lo primero que debe considerar es cómo asegurarse de que solo se envíen los recursos necesarios al dispositivo de destino. Esto se puede hacer minimizando el número de solicitudes HTTP, de modo que el usuario pase menos tiempo esperando que se cargue DOM. Esto a su vez puede hacerse al comprimir recursos CSS y Javascript, para lo cual herramientas como Brújula - un marco de autoría de código abierto CSS - puede ser utilizado. Esto permite a los desarrolladores crear marcas más limpias y crear sprites y extensiones con un mínimo esfuerzo.
Con respecto a JavaScript, herramientas como UglifyJS puede ser utilizado, que comprime el código.
Esto se puede considerar una técnica importante cuando se trata de diseño receptivo, ya que se puede usar para garantizar que los usuarios de teléfonos móviles y de teléfonos inteligentes no descarguen los aspectos del sitio que lo desaceleran o que no usarán.
La carga condicional se puede usar para evitar la carga de todo tipo de contenido, incluidos widgets sociales, imágenes, mapas y mucho más. Es importante tener en cuenta en este punto que el sitio debe ser probado minuciosamente en cada etapa de optimización para que sea fácil ver lo que ha marcado la diferencia a medida que avanza.
Todos sabemos que las imágenes suelen ser responsables de ocupar la mayor cantidad de kilobytes en una página web. También es seguro decir que las imágenes que están diseñadas para un navegador de escritorio van a tener un rendimiento inferior cuando se entregan a un dispositivo móvil.
Si un sitio también tiene mucho contenido heredado, esto afectará aún más el rendimiento y es necesario implementar alguna forma de evitar que este contenido se cargue. Si bien esto se puede hacer alterando el marcado cambiando los elementos src o img, la solución PHP Imágenes adaptativas es probablemente más fácil. El software detecta el tamaño de la pantalla y automáticamente crea, almacena en caché y entrega las imágenes HTML incrustadas a escala, sin la necesidad de cambiar el marcado. Para ser utilizado en conjunto con las técnicas de Fluid Image, es una solución práctica y que ahorrará mucho tiempo. Adaptive Images utiliza un archivo htaccess, un archivo php y una sola línea de Javascript para determinar el tamaño de la pantalla de los visitantes del sitio.
También vale la pena pensar en el texto, ya que se ajustará naturalmente cuando el dispositivo se reduzca y podría causar problemas de visualización. FitText es una herramienta que puede ayudar a solucionar este problema, un complemento de jQuery que actualiza automáticamente el tamaño de letra, con opciones para los tamaños mínimo y máximo que se permitirán.
Esto es ideal para titulares que pueden mostrarse mal en un dispositivo móvil y permite ignorar el tamaño de fuente especificado de CSS3. Sin embargo, FitText solo está destinado a los titulares y no debe usarse en el texto de los párrafos.
Si bien el diseño receptivo tiene sus problemas, al igual que cualquier tecnología o técnica relativamente nueva, vale la pena elegir construir un sitio de esta manera. Nadie quiere ir hacia atrás y aunque puede ser más fácil crear un sitio web móvil, es mucho mejor ser lo más innovador posible.
Google acepta, su consejo es utilizar un diseño receptivo como la mejor forma de diseñar para dispositivos móviles. Por supuesto, para los gigantes de búsqueda, esto significa que solo tienen una URL para rastrear, en lugar de numerosas URL para lo que es esencialmente el mismo sitio, por lo que realmente les interesa.
Sin embargo, en este momento de manía de intercambio social también tiene sentido, ya que los usuarios de dispositivos móviles pueden compartir una página con alguien que usa una computadora de escritorio. Para crear una experiencia uniforme, esto debería ofrecer el mismo contenido.
Además de eso, tener un sitio receptivo mejora la productividad en la fuerza de trabajo, ya que básicamente hay mucho menos que hacer. Esto se aplica al contenido, las actualizaciones y el SEO, ya que esto deberá llevarse a cabo por separado si se crean diferentes sitios.
Los dispositivos móviles y las tabletas se están convirtiendo en la norma para conectarse a Internet y navegar en esta, casi, era post-PC. Las ventas de tabletas en todo el mundo se han disparado en solo un año, más del doble en ese momento y con muchos consumidores que ahora eligen diferentes dispositivos con Android, así como iOS.
Hay pocas dudas de que hasta ahora el diseño receptivo está teniendo un impacto positivo, a pesar de las preocupaciones de rendimiento. Según un informe , que preguntó a algunas de las principales marcas del mundo cómo el hecho de tener un sitio receptivo había afectado el tráfico, las visitas en todos los dispositivos aumentaron considerablemente.
Esto incluyó un aumento promedio del 23% de los visitantes móviles, así como un porcentaje de rebote reducido del 26%, con los visitantes gastando alrededor del 7,5% más de tiempo en los sitios de lo que se vio anteriormente.
O'Neill, el minorista de moda de ropa de surf, informa una tasa de conversión que es 65.7% más alta en iPad y iPhone como resultado del desarrollo de un sitio receptivo. Esto representó un crecimiento de ingresos del 101.2% solo en estos dispositivos.
Con respecto a los dispositivos con Android, la tasa de conversión fue incluso mejor, con un impresionante 407.3%, lo que representa un enorme crecimiento en los ingresos del 591.4%. Se observó una tasa de conversión más pequeña en dispositivos no móviles, aunque aún se observó crecimiento.
Esta es solo una de las marcas que publica sus cifras y es bastante difícil obtener los datos de otros en este momento, tal como lo fue con el impacto de las redes sociales hace un par de años. Sin embargo, de alguna manera demuestra que los beneficios generados por el diseño de un sitio web receptivo pueden ser sustanciales.
Teniendo esto en cuenta, ¿qué otra razón necesita un diseñador para comenzar a diseñar de manera receptiva para sus clientes y tratar de garantizar que se desempeñen lo mejor posible? No hay ninguno, y aquellos diseñadores que no quieren tomarse la molestia de aprender cómo diseñar, construir y optimizar un sitio utilizando técnicas receptivas pueden quedar abandonados en el polvo.
El 67% de los usuarios afirma haber comprado a través de un sitio móvil y se cree que el uso de Internet móvil superará al de las computadoras de escritorio para el próximo año. Teniendo en cuenta todo esto, es fácil ver por qué las empresas se interesarán cada vez más en las mejores soluciones web móviles que puedan ofrecer.
El diseño receptivo aún puede estar en su infancia en este momento, pero parece claro que la demanda del mercado lo hará crecer rápidamente, por lo que vale la pena aprender tantos aspectos de la disciplina como sea posible ahora.
¿Qué técnicas ha utilizado para optimizar los sitios receptivos? ¿La entrega de contenido alternativo niega los beneficios del diseño receptivo? Háganos saber en los comentarios.