Diseño Responsive - Consideraciones

Diseño responsive 2018
Diseño Responsive, consideraciones y buenas practicas.

Logo de toptal azul con fondo blanco
Esta es una colaboración de Toptal y su escritor Daniel Schwarz.

 Los sitios web responsive son aquellos que se adaptan a todos los tamaños de pantalla, no solo de escritorio sino también a los dispositivos móviles y Smart TVs.

Según Statista, el trafico móvil fue responsable del 52.64% de todo el trafico global del años 2017, esto significa que un sitio web no optimizado para dispositivos moviles posiblemente esta perdiendo la mitad de su trafico. Para finales de 2018 se dicha cifra ascienda al 79%.

Aquellos negocios que no tienen un sitio web optimizado para móviles se están quedando atras a un paso alarmante debido que 8 de cada 10 usuarios dejara de interactuar con un sitio web que no se visualzia bien en su dispositivo. Es demasiado fácil para los usuarios usar el botón atrás y probar el sitio de algún negocio rival, y como si esto no fuera suficiente, Google da prioridad a los sitios web responsive, es decir, aquellos que no lo son terminan marginados en los SERPs.

Puedes correr la prueba de optimización para móviles de Google para saber como se comporta tu sitio y adicionalmente el PageSpeed, también de Google, para saber cuanto demora en cargar.

Esto no quiere decir que el sector móvil sea mas importante que el de escritorio, pues 83 de los usuarios móviles dicen que deberían poder continuar su experiencia en la plataforma de escritorio si así lo quisieran, por tanto, ignorar el sector movil en pleno 2018 es un error garrafal.

Echale un vistazo a la version optimizada para moviles de Ebay vs. como se veria el sitio si no fuera responsive. ¿Siquiera considerarías usar la versión no optimizada para móviles?

ebay: a responsive web design example
Ebay no responsive vs. Ebay responsive.

Para poder diseñar sitios web que sean competentes con la web de hoy dia, los diseñadores web deben ser expertos en el diseño web responsive  o RWD por sus siglas en ingles.



Diseño responsive con prioridad en la plataforma móvil

Esto quiere decir, diseñar primero el sitio web responsive optimizado para moviles y luego trabajar hacia la version de escritorio. Hay varias razones por las que este enfoque funciona:

- Los sitios web moviles tienen la usabilidad como prioridad, debido a la falta de espacio en la pantalla, es mas practico y efficiente.

- Es mas facilescalar la version movil a la de escritorio que viceversa, de nuevo, dbido al poco espacio disponible en la pantalla.

- El diseño móvil ayuda a re-evaluar lo que es visual y funcionalmente necesario.

responsive web design from mobile to tablet to laptop to desktop
Escalando sitio móvil a desktop.

Cuales son las resoluciones de pantalla relevantes para el diseño web responsive.

Estos son las resoluciones de pantalla mas comunes en los usuarios de las plataformas movil, tablet y escritorio. Como podemos observar, hay una amplia variedad de resoluciones, esto nos dice que los diseñadores deben considerarlas todas cuando trabajen en el diseño de un sitio web responsive.
  •     360x640 (small mobile): 22.64%
  •     1366x768 (average laptop): 11.98%
  •     1920x1080 (large desktop): 7.35%
  •     375x667 (average mobile): 5%
  •     1440x900 (average desktop): 3.17%
  •     720x1280 (large mobile): 2.74%
statistical breakdown of screen resolutions in 2017 for rwd

Cuales navegadores web son populares actualmente

El diseño responsive debe ofrecer una experiencia suave en cualquier dispositivo, y partiendo de que los diferentes navegadores web renderizan las paginas de maneras diferentes, los sitios web deben probarse para asegurar son compatibles con la amplia variedad de navegadores web móviles y de escritorio.

Aun cuando hacer que un sitio web escale es responsabilidad del desarrollador web, es el diseñador quien decide exactamente como un sitio web responsive se adaptara a varios tamaños de pantalla para poder crear una experiencia de usuario optima.

Asi se reparten el mercado los navegadores web para movil y escritorio a nivel mundial:
  •     Chrome: 55.04%
  •     Safari: 14.86%
  •     UC Browser: 8.69%
  •     Firefox: 5.72%
  •     Opera: 4.03%
  •     Internet Explorer: 3.35%
 statistical breakdown of web browser usage in 2017 for responsive web design

Las mejores practicas para el diseño responsive

Eliminar la fricción

Como ya se dijo comenzar por el diseño web para móviles ayudara a re-evaluar lo que es realmente importante para que el usuario alcance el objetivo deseado.

Mientras trabajamos en la versión de tablets y luego en la de escritorio, podemos comenzar a pensar en microinteraciones, flujo de usuario y llamadas de accion pára hacer esos objetivos principales alcanzables. Y lo que es mas importante, enfocarnos en dichos objetivos del usuario y eliminar cualquier friccion que no ayude a alcanzar ni los objetivos primarios ni secundarios.

Un objetivo principal podría ser comprar un producto, mientras uno secundario podría ser una subscripción al mailing list, lo cual luego podria llevar a una compra.

Diseñar para los pulgares
El diseño responsive es complicado en el sentido de que el usuario interactua mediante clicks en la versión de escritorio, pero en la versión móvil utilizara los dedos. Estas diferencias físicas cambian la forma en la que los diseñadores de UI hacen el arreglo de los elementos con los que el usuario interactuará.

an illustration depicting accessible thumb regions on mobile screens
Los pulgares alcanzan mejor el centro del dispositivo que las esquinas.

Aprovechar el hardware nativo de los dispositivos móviles

Recordemos que el diseño responsive no es solo "hacer que todo entre en la pantalla" sino también adaptarse a las posibilidades que ofrece el hardware del dispositivo. Si se implementa correctamente esto facilita algunas microinteracciones, como la introducción de datos.

Veamos algunos ejemplos:

- Escaneo de tarjetas te credito. Llenar formularios puede ser difícil en móviles.

- Autentificación en 2 pasos. Ya estas utilizando tu teléfono móvil registrado.

- Realizar búsquedas con voz. Es mas fácil que escribir.


Otras consideraciones y buenas practicas sobre el responsive design

A tener en cuenta:

- Imágenes responsive.

- Landing condicionado.

- Descarga retardada de elementos no vitales.

- Tipografía responsive.

- Modo panorama (landscape). 



Conoce las Herramientas de Diseño, recuerda que las herramientas de diseño modernas como Adobe XD, Marvel e InVision permiten al equipo de diseño probar los prototipos en dispositivos reales, discutiendo y colaborando como equipo hasta lograr que la plantilla funcione en todos los escenarios.


Comentarios