La necesidad del momento no es un diseño receptivo sino un rendimiento receptivo
El diseño receptivo ha exhibido varios problemas de rendimiento en los últimos tiempos. La ironía es que el diseño receptivo está funcionando bastante bien en la última gama de teléfonos inteligentes, pero nada más allá de lo mismo.
Puede estar confundido ya que la mayoría de los usuarios de la web tienen teléfonos inteligentes de alta gama. Sin embargo, una gran población todavía usa dispositivos móviles con un tamaño de pantalla pequeño que se ejecutan en una versión anterior de Android o iOS y tal vez solo un teléfono básico con poca funcionalidad. Como resultado, el diseño receptivo no está sirviendo a una audiencia más amplia como se supone que debe hacerlo.
La creencia arraigada de que el diseño receptivo es para dispositivos móviles de cualquier tamaño de pantalla tiene mucho que ver con este problema. A medida que el rendimiento disminuye y la insatisfacción aumenta, existe la necesidad de mirar más allá del diseño receptivo. En cambio, el enfoque debe estar en garantizar un rendimiento receptivo. Esta publicación es casi igual.
Entonces, la gran pregunta es ¿qué hacer?
Descartar el concepto de diseño de escritorio primero
Un contribuyente importante a este problema persistente es que aún se centra en un enfoque de diseño de escritorio primero. El énfasis está en diseñar un sitio web para una computadora de escritorio y luego diseñarlo para otros dispositivos como teléfonos inteligentes y tabletas. Para cualquier funcionalidad que falte, los desarrolladores usan generosamente calzas y rellenos poliméricos. Por supuesto, existen amplias bibliotecas para garantizar un rápido desarrollo. Sin embargo, esto no soluciona el problema de la incompatibilidad del navegador. ¿Está justificado involucrarse en un concepto de diseño que no está dando los resultados deseados?
No es muy difícil implementar un enfoque de diseño móvil primero en el que el objetivo sea ofrecer solo la información deseada al usuario móvil en su pantalla en lugar de todas las cosas que están dañando el dispositivo. Luke Wroblewski conceptualizó este enfoque de diseño por primera vez en 2011 y, desde entonces, muchos expertos de la industria han elogiado su innovador enfoque de diseño.
Más datos, incluso si tardan una fracción de segundo, pueden tener un impacto notable en el tiempo de carga general. Sin embargo, también es cierto que los sitios web se están volviendo más pesados con contenido rico en gráficos, y más personas usan sus dispositivos móviles para acceder a los mismos. Cuando un usuario escribe la URL de un sitio web en un móvil con una pantalla de baja resolución, su objetivo siempre es acceder al contenido del sitio web, pero lo que experimenta es una pesadilla. Esto se debe a la dificultad de navegar a través de los interminables anuncios innecesarios. Elimine dichos elementos de contenido evitables para permitir que su usuario acceda al contenido principal. Esto aumenta el tráfico del sitio, ya que además de los usuarios con teléfonos inteligentes de alta gama, muchos accederán a su sitio web a través de dispositivos móviles de baja resolución. Ofrecer una versión de solo texto tiene mucho sentido si el móvil tiene capacidades limitadas, pero, de nuevo, puede decir que la experiencia del usuario se ve comprometida. Bueno, lo es, pero aún así es mejor que no recibir ningún contenido. Al menos en tal caso, los usuarios accederán a la información básica sobre su sitio. ¿Tiene algún sentido diseñar un sitio web de tal manera que reduzca su alcance potencial?
Seguramente aceptará el hecho de que esperar interminablemente solo para consultar un sitio web no entusiasma a nadie. Según algunas encuestas realizadas por Akamai y Gomez.com, aproximadamente el 50 % de los usuarios web esperan que un sitio web se cargue en 2 segundos o incluso menos. ¡Hay más posibilidades de abandono del sitio si un sitio web no se carga en el navegador en solo 3 segundos! Además, la mayoría de los sitios web de comercio electrónico en la actualidad tienen una gran cantidad de botones para compartir en redes sociales como Facebook, Google Plus, Twitter, LinkedIn, etc. ¿Sabe que estos botones agregan más de 500 KB a su sitio receptivo y afectan su rendimiento? ¡Solo el botón Me gusta de Facebook exige un código comprimido de 270 KB! También requiere múltiples solicitudes HTTP. En cambio,
El rendimiento de un sitio web tiene un impacto directo en el rendimiento de una empresa y un sitio web que responde lentamente nunca hace nada bueno para una empresa. Lo crea o no, la mayoría de los usuarios de dispositivos móviles no están interesados en investigar o leer artículos extensos. La mayoría utiliza sus dispositivos móviles para acceder fácilmente a Facebook, WhatsApp, Twitter y disfrutar de la alegría de comprar en línea. Además, el móvil ya no es una tendencia, es el futuro.
Según las estadísticas del año pasado de Comscore, la cantidad de usuarios de Internet que solo usan dispositivos móviles en los EE. UU. aumentó considerablemente, mientras que los usuarios que solo usan computadoras de escritorio se redujeron al 10,6 por ciento.
¿Necesitas decir algo más para convencer?
Garantice una degradación elegante
En los últimos años, es posible que te hayas topado con la nueva palabra de moda en el mundo del diseño receptivo, y es "degradación elegante". Sí, la degradación elegante implica que incluso si una función no funciona correctamente, debe fallar de manera que facilite una usabilidad aceptable. Esto significa crear un diseño de sitio web para una computadora de escritorio y luego pasar gradualmente a tabletas, teléfonos inteligentes y teléfonos con funciones. El rendimiento de un diseño receptivo en el que el sitio web se degrada con gracia seguramente será alto, ya que la experiencia del usuario aquí siempre es de primera categoría. El sitio web seguirá siendo funcional a pesar de las deficiencias, y un visitante seguramente quedará impresionado con la calidad general.
Ahora, usted puede tener esta pregunta en su mente que es tan fascinante acerca de la degradación elegante. La respuesta es simple. Esto se debe a que hace que su contenido sea visible y legible independientemente del navegador, ¡lo cual es una hazaña notable! Afortunadamente, si está utilizando CSS3, la degradación elegante se convierte en un trabajo fácil, ya que la mayoría de las propiedades de CSS3 se degradan automáticamente, es decir, las esquinas redondeadas se vuelven cuadradas, el texto se ajusta en lugar de ejecutarse en una sola línea, los degradados se convierten en colores planos y mucho más.
Veamos un ejemplo de degradación agraciada. Supongamos que ha diseñado un sitio web receptivo con funciones de JavaScript y estas funciones no son compatibles con su navegador o pueden estar deshabilitadas por parte de su cliente. Entonces, ¿qué puedes hacer para obtener el contenido? Bueno, en tal caso, la degradación elegante le permite a su navegador mostrar el contenido dentro de la etiqueta "noscript".
Esto se puede entender mejor con la codificación que se proporciona a continuación:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Hay un ejemplo más de degradación elegante que me gustaría compartir, y es el uso de HTML5 por parte de YouTube para reproducir videos. Supongamos que su navegador no es compatible con HTML5, el video se mostrará usando Flash, y si incluso Flash no está instalado, recibirá un mensaje para instalarlo en su dispositivo móvil. En cualquier caso, podrá ver el video. Sin embargo, un inconveniente de esta elegante degradación es que, aunque el rendimiento es bueno, debe comprometerse con ciertos elementos de diseño si utiliza navegadores obsoletos. Supongo que determinar los elementos visuales esenciales de su sitio web de antemano puede ser el truco.
No es necesario mantener bibliotecas no utilizadas
Una mejor práctica puede ser no mantener bibliotecas que no estén en uso. Sí, es cierto que hacer un seguimiento de las bibliotecas utilizadas y las no utilizadas lleva mucho tiempo, pero realmente vale la pena. A veces, es posible que haya notado que está utilizando una sola funcionalidad después de la inclusión de una biblioteca. A veces pueden ser dos o tres incluso. La herramienta que uso con más frecuencia para crear un diseño receptivo es jQuery. De hecho, hay muchas bibliotecas jQuery que ayudan a los desarrolladores a crear sitios web receptivos. La inclusión de varias bibliotecas como las bibliotecas de JavaScript solo porque le han gustado algunos widgets aumentará el tiempo de carga de su página en gran medida. Sin embargo, será una buena práctica analizar qué bibliotecas están en uso y en qué medida.
Comprobar la disponibilidad de funciones
Puede verificar si su dispositivo es compatible con una determinada función o no antes de activarla. Por ejemplo, sucede que aunque haya instalado la última versión de Google Chrome en su teléfono Android obsoleto, todavía no muestra su sitio web. A veces, en un intento de cargar un sitio web de este tipo, el navegador se bloquea tan gravemente que hace que todo el dispositivo móvil deje de responder. Necesita reiniciar el dispositivo, y esto es lo último que ha deseado, ¿no es así? Muchos usuarios de ciertas aplicaciones web ya están sufriendo por este problema.
La falta de disponibilidad de funciones en los dispositivos y, sin embargo, el diseño de sitios web o aplicaciones ha dado lugar a algunos problemas notables, como el bloqueo instantáneo de las aplicaciones Google Hangout en dispositivos Android en todo el mundo, independientemente del tipo de navegador. Esto es a pesar del hecho de que la aplicación era una aplicación ligera. Puede argumentar que los usuarios estaban usando una versión anterior de los teléfonos inteligentes Android, pero también es cierto que dichos dispositivos todavía están disponibles como nuevos en cualquiera de las tiendas móviles. Muchos usuarios de dispositivos móviles también enfrentan el mismo problema de rendimiento con las aplicaciones de YouTube y Twitter. Incluso una actualización del servicio Android System Webview de Google a través de Google Play congela muchos teléfonos inteligentes para convertirse en una especie de pesadilla para los usuarios.
Optimizar imágenes
Incluir imágenes grandes visualmente atractivas siempre es tentador para los diseñadores. El problema surge cuando no comprimen estas imágenes antes de subirlas al CMS. Esto es especialmente cierto con múltiples sitios web de comercio electrónico en la web. Según una investigación reciente de Radware, las páginas son cada vez más grandes y aproximadamente el 45 por ciento de los 100 principales sitios minoristas no utilizan la compresión de imágenes. Esto hace que dichos sitios sean más voluminosos y, como resultado, aumenta el tiempo de carga, pero como diseñador, puede evitar el problema.
Haga las imágenes con un tamaño más pequeño utilizando una herramienta de optimización de imágenes adecuada. De hecho, no hay escasez de tales herramientas en la web. Algunos de los notables que puede utilizar son Dynamic Drive, Smush it y Riot. Si es un profesional en Photoshop, también puede optimizar el tamaño de la imagen usted mismo. Utilice una técnica de compresión inteligente y elimínela de cualquier metadato redundante. La conversión de gráficos a PNG, imágenes ricas en color a JPEG y animadas a GIF también funciona.
Preparado para casos extremos
Cuando empiezas a diseñar, te habrás dado cuenta de que tienes la tentación de diseñar las páginas que son más fáciles. Al menos, esto le permite mostrar algo a sus partes interesadas. Esto puede parecer agradable a primera vista, pero si enfocas tus esfuerzos hacia los escenarios más desafiantes, al principio obtendrás un buen resultado.
Por ejemplo, una página web con algunos artículos, blogs y comunicados de prensa. Debe tener un título también. Ahora, ¿qué sucederá si el espacio del título que ha pensado mostrar "Consejos de diseño web receptivo" tiene que mostrar un título "10 consejos y técnicas esenciales para un diseño web receptivo exitoso"? Ahora, este es un caso extremo.
Un esfuerzo como el anterior para optimizar el rendimiento de su sitio web receptivo parece invisible. Sin embargo, estos esfuerzos dan buenos resultados con usuarios felices y satisfechos. Puede recibir ayuda de varias herramientas como las herramientas Pingdom que pueden permitirle monitorear el tiempo de carga de su sitio web receptivo sin esfuerzo. No omita el aspecto vital de las pruebas para asegurarse de que su sitio web receptivo funcione según lo previsto. Pruébalo en tantos dispositivos reales como puedas.
También puede utilizar recursos como Screenfly que le permite probar su sitio web en múltiples resoluciones de pantalla. Puede argumentar que todas estas estrategias necesitan una cantidad significativa de tiempo, pero, de nuevo, uno debe sudar mucho para obtener los beneficios. Hoy en día, la creación de un sitio web receptivo con un rendimiento receptivo es esencial, más aún porque Google califica los sitios en función de su rendimiento. Si es diseñador o desarrollador, no se limite a ninguna de las mejores prácticas anteriores. Debe buscar más soluciones y puede esforzarse mucho para ofrecer un sitio web que muestre un rendimiento receptivo.