×
×

Desarrollar una web adaptable a todos los dispositivos

A principios de este año se ha animado a desarrollar aplicaciones y webs “friendly” cuando Google anunció su cambio de algoritmo en el ranking de búsquedas. Si tu contenido está realizado de forma que se facilite la navegación por todos los dispositivos, Google lo posicionará en un mejor puesto en su lista de búsquedas.

Un estudio de Google determinó que más del 50% de las búsquedas web locales se realizan mediante dispositivos móviles. El uso de Smartphones se ha convertido en el principal punto de entrada a Internet, superando así número de usuarios de móvil que únicamente usan el móvil a los que solo usan ordenador en EEUU.

Centrarse en el contenido, y no en la forma

Tenemos que pensar y trabajar en términos perfectos para el dispositivo, no en pixel y diseños perfectos. Tratar de replicar la composición del diseño a cada dispositivo y tamaño de pantalla lleva demasiado tiempo. Es mejor centrarse en conseguir una aproximación al diseño,  realizando una revisión y optimización del contenido presentándolo de forma legible y funcional.

Piensa en tu diseño como en una colección de bloques y sistemas no como una página web.

Se busca que la web sea ágil y fácil de leer desde el móvil y prácticamente el 100% de las páginas web adaptadas al móvil recurren al formato tándem, es decir, todo en una sola columna vertical.

Nos debemos centrar en la experiencia del usuario, probando nuestro diseño en varias resoluciones y probando las distintas interacciones que tendrán los usuarios reales.

Un diseño responsive (o adaptable) permite escribir una vez y publicar en todas partes. Solo teniendo en cuenta las limitaciones del diseño.

Una parte importante del proceso de diseño es identificar el mensaje clave y la prioridad de contenido del cliente. Permitiendo que el contenido fluya de una manera lógica y coherente con el tamaño de la pantalla.

Testéalo en múltiples dispositivos

No hay que limitarse a cambiar el tamaño del navegador. Actualmente los navegadores tienen emuladores de dispositivos integrados en sus herramientas de diseño para ayudarte a ver como tu Interfaz de Usuario verá el diseño en los tamaños de pantalla de los distintos dispositivos.

Lo ideal sería trabajar con dispositivos reales, pero esto está lejos de ser factible.

Construye un laboratorio de dispositivos

Tener un par de cajones en el que estén por separado los dispositivos más comunes actualmente y algunos antiguos puede ser de gran ayuda.

Si es posible hazte con los smartphones y dispositivos más comunes actuales y también conserva antiguos. Lo ideal es que recojas todos los sistemas operativos que puedas, por ejemplo: Android de gama media, Android de gama alta, Blackberry, Windows phone, iPhone, iPad, y una tablet de Android. Esto no es completamente necesario, pero si aconsejable.

Para corregir errores, aconsejamos primero usar smartphones y resoluciones actuales, es decir, no debemos empezar a corregir cosas en resoluciones de 300px de ancho ya que la mayoría de la gente no tiene esta resolución en su smartphone.

Rendimiento es diseño

Más optimización significa menos trabajo. Los tiempos de rendimiento y carga de tu página son parte integral de la experiencia de usuario de tu web adaptable, tanto como la estética del interfaz de usuario. El diseño puede ser increíble, pero si no tienes en cuenta el peso y el tiempo de carga, no se quedaran muchos usuarios a ver la presentación final de la web.

Considera el uso de herramientas de cache para optimizar el rendimiento.

Prueba el rendimiento de descarga en situaciones reales, como en situaciones de baja conectividad o conexiones de red inestable.

A veces el rendimiento de una web echa a perder toda la experiencia de usuario. El bajo rendimiento dará lugar a una baja participación y alto abandono en el sitio web.

El grupo de trabajo

Los proyectos Responsive requieren un mayor nivel de colaboración y comunicación. Testear y repetir continuamente a través de los ciclos de diseño y desarrollo. Probar en dispositivos reales lo antes posible para buscar proactivamente los cuellos de botella.


Añadir nuevo comentario