DE DE DADO

Características de un verdadero sitio web responsive

Un sitio web que se adapte de forma correcta a dispositivos móviles debe diseñarse para su tamaño y conviene que se adapte dependiendo del dispositivo a utilizarse.
Este tipo de diseño es catalogado como un excelente práctica de diseño web y es recomendada por Google y otros grandes profesionales.

Pero hay una gran diferencia entre un sitio que simplemente se “ajusta” a diferentes tamaños de pantallas y un sitio web que realmente responde y se adapta
dependiendo del tipo de dispositivo que se está utilizando para ver nuestro sitio web.

Estamos claros de que muchas empresas y personas invierten en un rediseño web y hacen un gran despliegue publicitario resaltando las virtudes de
su nuevo sitio que es amigable con dispositivos móviles, sin embargo, al visitar algunos de esos sitios hemos encontrado que aunque
efectivamente sus pantallas se ajustan y escalan a diferentes tamaños no responden a las características de diferentes dispositivos móviles y 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á.

Sin mucho más que decir te dejamos las cuatro Principales características de un verdadero sitio web responsive:

1. Desempeño Optimizado – Páginas rápidas

Es un hecho que a nadie le gusta durar una eternidad, 3 años y dos décadas esperando que se cargue un sitio web, y más 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 mucha.
Pues bien, ¿cómo se puede optimizar el desempeño del sitio? Si usted está en el punto cero como parte de un rediseño, le sugerimos asignar un presupuesto para el desempeño del mismo dentro de su proyecto. Por el contrario, si estás trabajando con un sitio web existente, el primer paso es medir el desempeño del sitio para saber en qué punto se encuentra. Una vez cuentes con esta información, puedes comenzar a hacer los cambios necesarios para mejorar la velocidad de carga.
Un buen punto para arrancar es probablemente con las imágenes del sitio. Las imágenes muy grandes son las principales culpables de que nuestro sitio dure un año para cargar, por lo tanto, optimizar tus imágenes sin duda alguna puede ayudar realmente a que tu sitio web, desde el punto de vista del rendimiento, sea mucho mejor.
Un sitio web optimizado y que cargue en lo que dicen “berenjena” son beneficios que todo amigo visitante va a valorar muchísimo, y es que nadie se ha quejado de un sitio porque se carga muy rápido; todo lo contrario, si el sitio va como suero de miel de abeja y se tarda mucho en cargar, definitivamente alejará y quitará interés en las personas, así sus pantallas se ajusten al tamaño que sea.

2. Jerarquía de contenidos inteligentes

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 cómo la página misma está codificada. Es más fácil, cuando se diseña con el objetivo de tener un sitio web adaptable.

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. 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.

4. 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.

En fin, 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 responsive en todo el sentido de la palabra.

En DE DE DADO podemos ayudarte a crear y optimizar tu sitio web para que sea verdaderamente y óptimamente adaptable a móviles. Consúltenos para enviarle una cotización sin ningún compromiso.

 

Reference to / pixelpro

Sin comentarios
Post a Comment

A %d blogueros les gusta esto: