¿Tiene un "sitio web sensible"? Este es un sitio con un diseño que cambia según el dispositivo de un visitante y el tamaño de la pantalla. El diseño web sensible ahora es una de las mejores prácticas de la industria. Es recomendado por Google y se encuentra en millones de sitios en la Web. Sin embargo, existe una gran diferencia entre tener un sitio web que simplemente se "ajusta" a diferentes tamaños de pantalla y tener un sitio que sea verdaderamente sensible.
Rutinariamente veo a las empresas rediseñar su sitio web y publicar un comunicado de prensa que exalta las virtudes de su nuevo diseño compatible con dispositivos móviles. Cuando visito esos sitios, lo que a menudo encuentro es un diseño que, de hecho, se puede escalar y cambiar para que quepa en diferentes pantallas, pero eso es todo lo que se refiere a la capacidad de respuesta. Esto no es suficiente. Un sitio web verdaderamente sensible hace más que escalar para adaptarse a una pantalla más pequeña o más grande. En estos sitios, también encontrará los siguientes rasgos importantes.
1. Rendimiento optimizado
A nadie le gusta esperar a que se cargue un sitio web, y cuando alguien está usando un dispositivo móvil con una conexión que puede ser menos que ideal, la necesidad de que un sitio se cargue rápidamente es aún más importante.
Entonces, ¿cómo optimizar el rendimiento de su sitio? Si está comenzando con un nuevo sitio como parte de un rediseño, entonces debe hacer un punto para crear un presupuesto de rendimiento como parte de ese proyecto. Si está trabajando con un sitio existente y no está empezando desde cero, el primer paso es probar el rendimiento de su sitio para ver cuál es su situación actual.
Una vez que tenga una referencia de dónde se encuentra su sitio en cuanto al rendimiento, puede comenzar a realizar las mejoras necesarias para aumentar la velocidad de descarga. Un buen lugar para comenzar es probablemente con las imágenes de su sitio. Las imágenes demasiado grandes son el culpable número 1 cuando se trata de sitios de carga lenta, por lo que la optimización de sus imágenes para la entrega web puede ayudar realmente a su sitio desde un punto de vista de rendimiento.
La realidad es que el rendimiento mejorado del sitio web y las altas velocidades de descarga son un beneficio que todos los visitantes apreciarán. Después de todo, nadie se ha quejado de que un sitio se haya cargado "demasiado rápido", pero si un sitio tarda demasiado en cargarse, rechazará a las personas sin importar si "encaja" responsablemente en su pantalla o no.
2. Jerarquía de contenido inteligente
Cuando se muestra un sitio web en una pantalla grande, puede distribuir el contenido de diversas maneras debido a la gran cantidad de espacio disponible en la pantalla. Con frecuencia, puede incluir mensajes e imágenes importantes, actualizaciones de noticias, información de eventos y navegación del sitio, todo en la pantalla al mismo tiempo. Esto permite al visitante escanear fácil y rápidamente el contenido de toda la página y decidir qué es importante para ellos.
Este escenario cambia bastante dramáticamente cuando toma el diseño del sitio y lo transforma para dispositivos de pantalla pequeña, como un teléfono celular. De repente, estás trabajando con una fracción de los bienes raíces de la pantalla que tenías antes. Esto significa que debe decidir qué aparecerá primero en el sitio, qué lo seguirá, etc. En lugar de ver todo a la vez, es probable que solo tenga espacio para mostrar una o dos cosas (una de las cuales es la navegación). Esto significa que deben tomarse decisiones de jerarquía. Desafortunadamente, lo que a menudo determina lo que aparece primero en la pantalla y luego el segundo, etc., es la forma en que se codifica la página. Es más fácil, cuando se construye un sitio de respuesta, mostrar lo primero que se encuentra en el código primero en la pantalla, seguido del segundo elemento en el código y así sucesivamente. Desafortunadamente, lo que puede ser más importante en un dispositivo puede no ser tan crítico en otro. Un sitio verdaderamente receptivo entiende que la jerarquía del contenido debe cambiar según las diferentes situaciones y debe ser inteligente sobre lo que muestra dónde.
Las mejoras en las técnicas de diseño de CSS, incluido el diseño de cuadrícula de CSS, Flexbox y más, permiten a los diseñadores web y desarrolladores más opciones cuando se trata de diseñar contenido de manera inteligente, en lugar de estar paralizados por el orden exacto de las áreas de contenido en el código HTML. Aprovechar estas nuevas técnicas de diseño será aún más importante a medida que el entorno del dispositivo, y las necesidades de los usuarios de nuestro sitio, continúen evolucionando.
3. Experiencias que toman en cuenta las fortalezas y debilidades de un dispositivo
Mantenerse en el tema de los dispositivos: cada dispositivo que alguien puede usar para visitar su sitio tiene fortalezas y debilidades que son inherentes a esa plataforma. Un excelente sitio de respuesta comprende las capacidades y limitaciones de los diferentes dispositivos y los utiliza para crear experiencias personalizadas que se adaptan mejor a cualquier dispositivo que el visitante esté usando en ese momento.
Por ejemplo, un teléfono celular incluye una serie de características que no encontrará en una computadora de escritorio tradicional. El GPS es un ejemplo de una función centrada en el móvil (sí, también puede obtener información general sobre la ubicación de los escritorios, pero el GPS del dispositivo es mucho más preciso). Su sitio puede usar información de GPS para enviar inteligentemente a una persona información detallada detallada y específica paso a paso u ofertas especiales basadas exactamente en dónde se encuentran en ese momento.
Otro ejemplo de este principio en la práctica sería un sitio que comprenda qué tipo de pantalla está utilizando y envía las imágenes que mejor se adaptan a esa pantalla. Si tiene una pantalla con una alta densidad de píxeles, puede decidir enviar imágenes de mayor calidad a esa pantalla. Sin embargo, estas mismas imágenes serían inútiles en una pantalla con menos capacidad, y la calidad adicional se perdería, mientras que el tamaño extra del archivo se descargaría sin ninguna razón real.
Los sitios de gran capacidad de respuesta consideran toda la experiencia del usuario y trabajan para personalizar esa experiencia basada no solo en el tipo de dispositivo o el tamaño de su pantalla, sino también en otros aspectos importantes del hardware.
4. Contenido con contexto
Inicialmente, el diseño web sensible recibió su nombre debido a la idea de que el diseño de un sitio responde a diferentes tamaños de pantalla, pero puede responder a mucho más que solo el tamaño de la pantalla. Sobre la base del ejemplo anterior de uso de las fortalezas y debilidades de un dispositivo, puede usarlas, así como otros datos como la fecha y la hora, para personalizar realmente la experiencia de un sitio web.
Imagina un sitio web para un gran evento de feria. Si bien un sitio web sensible cambiará el diseño de las páginas del sitio para escalarlas con diferentes pantallas, también puede usar la fecha para determinar qué contenido es más importante mostrar. Si es el período de tiempo antes del evento, es probable que desee mostrar de manera destacada la información de registro. Sin embargo, si el evento está sucediendo en ese momento, el registro puede no ser el contenido más importante. En su lugar, puede decidir que el calendario de eventos del día es más crítico, ya que es más relevante para las necesidades inmediatas de ese usuario.
Yendo un paso más allá, podría aprovechar el GPS de un dispositivo para determinar dónde se encuentran en la feria. Puede darles contenido interactivo según su ubicación, mostrándoles puestos o sesiones cercanas a punto de comenzar.
5. accesibilidad
El último ejemplo que veremos para saber cómo un sitio puede responder verdaderamente a las necesidades de un visitante es pensar en la accesibilidad del sitio. Los sitios web deben poder ser utilizados por la mayor cantidad de personas posible, incluidas las personas con discapacidad. Su sitio web debe poder ser utilizado por alguien que necesite un lector de pantalla u otro software asistido para acceder a su contenido. De esta manera, su sitio está respondiendo a sus necesidades porque usted se aseguró de que la experiencia, aunque diferente para los visitantes discapacitados, aún sea apropiada.
Al responder a tantos puntos de datos como sea posible, y no solo al tamaño de la pantalla, un sitio web puede ser mucho más que simplemente "compatible con dispositivos móviles". Puede convertirse en una experiencia verdaderamente receptiva en todos los sentidos de la frase.
