Un sitio web adaptable a dispositivos móviles (sitio web responsive) se diseña para que cambie el tamaño de la pantalla. Además, esta se adapta dependiendo del dispositivo que utiliza su visitante. De hecho, este tipo de diseño se ha convertido en una buena práctica de la industria del diseño web. Es recomendada por Google, que se encuentra en millones de sitios en el mundo.
Sin embargo, hay una gran diferencia entre un sitio que simplemente se “ajusta” a diferentes tamaños de pantallas y un sitio web que realmente se adapta y responde dependiendo del tipo de dispositivo que lo consulta.
Principales características de un verdadero sitio web adaptable a diferentes dispositivos
En la actualidad es común encontrar empresas que invierten en un rediseño web. Además, hacen un gran despliegue publicitario resaltando las virtudes de su nuevo sitio amigable con dispositivos móviles. Y, sin embargo, al visitar algunos de esos sitios, hemos encontrado que aunque efectivamente sus pantallas se ajustan y escalan a diferentes tamaños, sus sitios no responden a las características de diferentes dispositivos móviles. Además, su concepto de adaptabilidad se limita al tamaño de su pantalla. Esto no es suficiente, un verdadero sitio web con diseño adaptable (responsive website, en inglés) va mucho más allá, a continuación les presentamos las cinco principales características de un sitio web adaptable a diferentes dispositivos:
1. Desempeño Optimizado – Page Speed
Es un hecho que a nadie le gusta esperar a que se cargue un sitio web, más aún, cuando se está consultando desde un dispositivo móvil con una conexión menor que la ideal, en este caso, la necesidad de que el sitio se cargue rápido es mayor.
Entonces ¿cómo se puede optimizar el desempeño del sitio? Si usted está empezando desde cero como parte de un rediseño, le sugerimos asignar una presupuesto para el desempeño del mismo dentro de su proyecto. Por el contrario, si usted está trabajando con un sitio web existente, el primer paso es medir el desempeño de su sitio para saber en qué punto se encuentra. Una vez cuente con esta información, puede comenzar a hacer los cambios necesarios para mejorar la velocidad de carga.
Un buen punto para arrancar es probablemente con las imágenes de su sitio. Las imágenes muy grandes son las principales culpables del cargue lento, por lo tanto, optimizar sus imágenes puede ayudar realmente a su sitio desde el punto de vista del rendimiento.
La realidad es que un sitio web optimizado y que se cargue rápidamente son beneficios que todo visitante va a valorar, es más, nadie se ha quejado de un sitio porque se carga muy rápido; por el contrario, si el sitio se demora mucho en cargar, definitivamente alejará a las personas así sus pantallas se ajusten al tamaño que sea.
Creamos sitios web 100% administrables, hechos a la medida, que no solo llaman la atención, sino que le ayudarán a su negocio a convertir a visitantes en clientes.
2. Jerarquía de contenidos inteligente
Cuando se cuenta con una pantalla grande, el contenido se puede distribuir de muchas formas y se pueden incluir mensajes e imágenes importantes, actualizaciones de noticias, información de eventos y todas las opciones de navegación en el sitio que se deseen, todo en una misma pantalla. Esto le facilita al visitante «escanear» el contenido de toda la página y encontrar lo que es relevante para él.
Lo anterior cambia drásticamente cuando ese mismo diseño debe adaptarse a un dispositivo pequeño como por ejemplo un celular. En este caso usted debe trabajar con una fracción de lo que tenía antes, esto significa que tendrá que decidir qué información aparece primero, cuál después y así sucesivamente.
En lugar de presentar todo de una sola vez, usted tendrá el espacio para mostrar uno o dos elementos al tiempo (y uno de ellos probablemente será la navegación). Por lo tanto, una de las decisiones que tendrá que tomar es la jerarquía de los contenidos. Desafortunadamente, lo que por lo general determina el orden de estos elementos es la forma en como la página misma está codificada. Es más fácil, cuando se diseña con el objetivo de tener un sitio web adaptable, que lo que prime ro está en el código se muestre primero en la pantalla, seguido de lo que está en el código en segundo lugar y así sucesivamente.
Desafortunadamente
Lo que puede ser más importante en un dispositivo, puede que no sea lo mismo en otro. Un sitio web verdaderamente adaptable entiende que la jerarquía de contenidos puede cambiar dependiendo de diferentes situaciones y debe ser ingenioso sobre lo que debe mostrar en cada parte.
Las mejoras en las técnicas de diseño de CSS (incluyendo CSS Grid Layout, Flexbox y otros), permiten a los diseñadores web y desarrolladores tener mayores opciones en lo que se refiere a diseño de contenido de forma inteligente, en lugar de complicarse con el orden exacto de las áreas de contenido en el código HTML.
Aprovechar estas nuevas técnicas de diseño resultará aún más importante a medida que las pantallas de los dispositivos y las necesidades de los usuarios sigan evolucionando.
3. Experiencias que tienen en cuenta las fortalezas y debilidades de los dispositivos
Desde el punto de vista de los dispositivos, cada uno tiene fortalezas y debilidades que son inherentes a su plataforma. Un sitio verdaderamente adaptable entiende dichas capacidades y limitaciones y las aprovecha para brindar experiencias personalizadas a los usuarios, las cuales se adaptan al dispositivo que esté utilizando al momento de visitar el sitio.
Por ejemplo, un celular tiene ciertas características que no tiene un computador personal tradicional como su GPS (si bien es cierto que en un PC se puede obtener la localización general, en un celular el GPS es mucho más exacto). Su sitio web podría aprovechar la información del GPS para enviar ofertas especiales a una persona, basado en donde se encuentre físicamente en el momento.
Los sitios web verdaderamente adaptables ofrecen toda una experiencia a sus usuarios y trabajan para mejorarla cada vez más, basándose no sólo en el tipo de dispositivo o el tamaño de su pantalla, sino también en otros aspectos importantes de su hardware.
4. Contenido con contexto
Continuando con el ejemplo del punto anterior, de considerar las fortalezas y debilidades de un dispositivo, usted también puede tener en cuenta otras variables importantes como la fecha y hora para realmente brindar una experiencia personalizada a su visitante.
Por ejemplo, imagine un sitio web para un gran evento de una feria internacional. Además de pensar en las escalas de los diferentes tamaños de pantallas, usted podría tener en cuenta la fecha y ubicación para determinar la información a suministrar. Si el sitio lo visitan antes del evento, usted puede presentar primero la información de las inscripciones y el registro, pero si lo consultan cuando el evento ya está ocurriendo, podría ser más relevante presentar los horarios y agendas disponibles. Incluso, adelantándose un paso más, usted podría aprovechar el GPS del dispositivo para determinar si el visitante está dentro de la feria y podría presentarle contenido interactivo basado en su localización y horario, mostrándole las sesiones y actividades que están a punto de comenzar.
5. Accesibilidad
Otro punto clave de un sitio verdaderamente adaptable, es que en realidad responda a las necesidades de sus usuarios en términos de accesibilidad. Los sitios web deben poder ser usados por la mayor cantidad de personas posible, incluyendo a aquellos con alguna discapacidad. Su sitio debe poder ser consultado por alguien que necesite un lector de pantalla o cualquier otro software o dispositivo asistido. De esta forma, su sitio responde a sus necesidades porque se ha asegurado de que la experiencia, aunque es diferente para los visitantes con discapacidad, aún sea adecuada.
En conclusión, entre mejor responda su sitio web a los aspectos aquí presentados (y no solo al tamaño de la pantalla), podrá ser mucho más que amigable a dispositivos móviles y podrá ofrecer una experiencia verdaderamente adaptable en todo el sentido de la palabra.
En PIXELPRO podemos ayudarle a crear y optimizar su sitio web para que sea verdaderamente y óptimamente adaptable a móviles. Consúltenos para enviarle una cotización sin ningún compromiso.
