Tema 6.1 - Diseño y pruebas responsive

Un diseño responsive de un sitio web es una técnica de diseño que busca la correcta visualización de una misma página en distintos dispositivos, desde computadores de escritorio o portátiles a tablets y móviles, le brinda flexibilidad de mostrar contenido de manera atractiva e independiente del tamaño del dispositivo, sin necesidad de sacrificar la calidad o la facilidad de navegación de los sitios web.

Los puntos a tener en cuenta para realizar estas pruebas son:

• Probar el sitio en distintos browsers: Safari y Chrome son los principales, pero no se deben olvidar Firefox e Internet Explorer.

• Validar que el sitio se vea igual en diversos dispositivos con distintas versiones de sistema operativo y distintos tamaños.

• Usar emuladores y agentes para probar la aplicación antes de testearla en los dispositivos.

• Contar con una estructura de páginas realizadas con la finalidad de facilitar al usuario la navegación por cada una de las páginas, de modo que en todo momento sepa dónde se encuentra y cómo puede acceder a más información.

• Facilidad de navegación: contar con un menú adecuado que se mantenga en todas las páginas.

• Limpieza y sencillez del mismo. Debe haber armonía entre los textos e imágenes.

• Home: corroborar que la página principal móvil debe centrarse en la conexión de los usuarios con el contenido que están buscando.

• Contar con Búsquedas: las búsquedas son de vital para ayudar a los usuarios móviles. Las búsquedas del sitio deben ser visibles, no deben estar ocultas detrás de un menú o sean difíciles de encontrar. Debe asegurarse que los resultados de la búsqueda web son relevantes.

• Que todos los menús respondan de la misma manera en todos los sistemas operativos y dispositivo.

Existen varias páginas las cuales ayudan a realizar estas pruebas, una de ellas es la página de google: https://search.google.com/test/mobile-friendly?hl=es que realiza de forma automática la prueba y devuelve si el sitio web ingresado es responsive o en caso contrario muestra mensajes indicando algunos de los errores en la visualización que tiene el sitio en los dispositivos móviles.

La página funciona ingresando la URL del sitio web, luego de ingresada el botón de PROBAR URL se activa, se presiona en ese botón y la página comienza el análisis para determinar si el sitio esta optimizado para diferentes dispositivos y resoluciones.

Ejemplo:

Se va a probar si la página http://courses.qvision.us:8082/ es responsive.

Para este ejemplo el resultado es que el sitio web es responsive, es decir, para los dispositivos móviles conserva la navegación de forma cómoda.

Ejemplo:

Se probará si el siguiente sitio web: https://js.devexpress.com/Demos/DXHotels/#home es responsive:

Para este caso la página da como resultado que el sitio web ingresado no es responsive y especifica las razones que indican la razón:

Para conocer más herramientas para hacer pruebas responsive ingresar al siguiente link:

En caso de que no se quiera usar de páginas externas se puede hacer uso de la herramienta para desarrolladores de Chrome que permite cambiar la vista de la página para visualizar como queda en los diferentes dispositivos que maneja el navegador, para realizar la prueba se hace de la siguiente manera:

Ejemplo:

Para el ejemplo se tiene la página: https://js.devexpress.com/Demos/DXHotels/#home

Se ingresa a la página anteriormente mencionada y se abre la herramienta para desarrolladores:

Luego de hacer esto se presiona en el botón que está marcado en la imagen anterior.

Al dar clic en ese botón se pasa a la vista responsive que es la siguiente:

En la parte superior en el menú, el que se encuentra encerrado por el cuadro rojo muestra las propiedades que tiene Chrome.

Responsive: En esta opción se selecciona el tipo de dispositivo con el que se quiere cargar la página, los dispositivos que tiene Chrome son los siguientes:

Los campos que están a continuación que son:

Corresponden al tamaño que se le quiere dar a la pantalla.

Luego se hace clic en la opción de responsive y luego se selecciona el dispositivo con el que se quiere visualizar la página, en este ejemplo se va a usar la vista de Pixel 2 XL.

Cuando se da clic en la opción del dispositivo de interés, el sitio web comienza automáticamente a cargar el contenido de la página de tal forma como se vería en el dispositivo seleccionado.

Con las diferentes vistas ofrecidas por Chrome se comienza a probar que el sitio web sea responsive, cumpliendo con los puntos que se mencionan anteriormente.

BreakPoint

Un BreakPoint se denomina al punto en donde el sitio web debe realizar un salto en el diseño, es decir, que al ampliar o disminuir el tamaño de la página, el contenido se muestra de forma poco practica para el usuario, entonces, en ese punto se debe poner un salto en el contenido de la página, esto se realiza debido a las diferentes resoluciones de pantalla que se encuentran en los dispositivos móviles.

Ejemplo:

Se ingresa a la página http://desarrolloweb.com, cuando el sitio recién se carga y no tiene modificaciones en el tamaño se observa de la siguiente manera:

Para observar lo que es un BreakPoint se comienza a expandir la página aumentándole el zoom en un 175% con este cambio el sitio se observa de esta manera:

Para este zoom se observa que el cambio de la página estéticamente es poco, se centra en las líneas de texto que lo ajusta de tal forma que el diseño sea cómodo a la vista de la nueva resolución de pantalla y el contenido no toca arrastrar a los laterales la página, estos son los breakpoint pequeños.

Ahora siguiendo con la misma página se le hace un zoom del 200% se observa de la siguiente manera:

Para este caso se ve que el diseño de la página cambia drásticamente en comparación con el ejemplo anterior, ya que el menú que manejaba al lado izquierdo no se encuentra en el mismo lugar, es un cambio en el layout (Diseño de la página), con este zoom se observa un punto de salto que es el breakpoint, pero en este caso es grande ya que modifico el layout.

Look & feel

El look & feel es el aspecto del sitio para el usuario y lo siente cuando se está interactuando con ella:

El look se define por los siguientes componentes del sitio web:

• Colores (Que en caso de ser una página para una empresa que el sitio maneje los colores corporativos correspondientes)

• Imágenes.

• Diseño.

• Opciones de la fuente.

• Estilo general.

El feel es determinado por estas características:

• El movimiento y la respuesta de los componentes dinámicos como menús desplegables, botones, formas y galerías.

• Efectos de sonido.

• La rapidez con la que las páginas y las imágenes se cargan.