Errores comunes del diseño responsive

Hasta la saciedad se ha repetido que el comportamiento en dispositivos móviles tiene que ser una de las prioridades a la hora de afrontar un desarrollo web con garantías de éxito. Por ejemplo, en estos post (este y este … y en algunos desde hace más de 4 años) venía poniendo el énfasis en el responsive design

Un éxito que no solo dependerá de este paso ya hay más elementos que conjugar dentro de la estrategia establecida (tener un producto atractivo, resolver necesidades de clientes, satisfacer las expectativas de los mismos por nuestro producto y/o servicio, ofrecer un servicio de calidad, acortar plazos de entrega, gestionar de forma correcta las devoluciones, et…)… pero al menos, que la plataforma online sobre la que se tiene que centrar el proyecto no sea el impedimento para que las conversiones acaben llegando.

Sin embargo, hay una serie de errores que se repiten durante la implementación de un desarrollo responsive

 

EMPEZAR EL DISEÑO CON LA VERSIÓN DE ESCRITORIO

Creo que es el error más común de todos: Comenzar a diseñar la web con su apariencia en versiones desktop en lugar de pensar en mobile first. El hecho de tener que “pensar” para ajustar toda la información que queremos mostrar en un espacio mucho menor al que nos encontramos en versiones de escritorio hace que el paso casi intuitivo sea diseñar para desktop y ajustar el resultado para mobile.

Con valores de tráfico mayoritario para dispositivos mobile  se antoja necesario un cambio de pensamiento, donde se ponga el foco en diseñar para pantallas más reducidas donde poner el énfasis en aquella información realmente relevante y en su forma de mostrarla para mejorar la experiencia de usuario.

 

MODIFICACIONES, AJUSTES Y PRUEBAS

Incorporar modificaciones en desarrollos en producción conlleva la necesidad de ver como afectan estas en todas las posibles dimensiones en las que puede mostrarse.

Doy por hecho que esta batería de pruebas se ha realizado de forma eficiente en un nuevo desarrollo donde el tiempo de implementación normalmente ofrece más opciones de realizar una bateria de pruebas importante, pero para nuevas incorporaciones que suponen variaciones sobre el desarrollo estudiado inicialmente, tenemos que probar suficientemente como afectan estas. Muchas veces lo que nos encontramos es que estos añadidos encajan perfectamente en las versiones desktop pero chirrían en mobile.

 

ESPACIADOS, FUENTES Y BOTONES… MINÚSCULOS

Las fuentes que utilicemos, los especiados en los contenidos y, sobre todo, las llamadas a la accion deben de estar compensadas con la superficie que tenemos disponibles en dispositivos móviles. Si el usuario tiene que ir haciendo zoom para poder leer un texto o pinchar de forma correcta un botón de radio, un checkbok o incluso un botón de CTA, algo más se está haciendo

 

COMPORTAMIENTO EXCLUSIVO MÓVIL

Hay determinadas acciones que sí que son muy válidas en versiones de escritorio pero que no son efectivas en versiones móviles: Por ejemplo, el efecto hover al pasar por encima en una foto que si que tenemos en versiones de escritorio pero que no es aplicable en móvil… Es por ello que hay que pensar SIEMPRE cual es el comportamiento más adecuado según el dispositivo.

Muchas veces no vale simplemente con ajustar la disposición de los elementos de desktop a mobile… hay que pensar en más detalles.

 

SUPRIMIR CONTENIDOS

Muchas veces, en ese proceso de diseño que sigue un camino inverso al ideal (Ideal: mobile –> desktop) se suprime información para los dispositivos móviles. Y esto que puede ser perfectamente entendible por el proceso de optimización de carga de las páginas en móviles, muchas veces lleva la contrapartida de suprimir contenidos que sí que aportan valor y son necesario para el usuario.

AJUSTE DE IMÁGENES

Usar la misma resolución de imágenes para todos los dispositivos es un error. Es un error porque normalmente se utiliza la versión más grande (la que utilizamos en versiones desktop) y se adapta mediante procesos de escalado para las distintas resoluciones, cuando lo ideal sería utilizar dimensiones de imagen según resoluciones, ya que se optimizaría la carga de la misma

 

CENTRAR EL RESPONSIVE SOLO EN LA WEB

¿Nos olvidamos del mail? Viendo que es uno de los canales que generan mejor comportamiento no debemos de obviar que el diseño del mail también tiene que ser responsive y como tal debemos de tratar su diseño y envío.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

5 × 5 =