Consejos de diseño esenciales para la Web móvil
No es de extrañar que un informe reciente de la agencia de la ONU, el Unión Internacional de Telecomunicaciones, predijo que habrá más suscripciones móviles en el planeta que personas en los próximos 9 meses. La ‘revolución de los teléfonos inteligentes’ está definitivamente sobre nosotros y, como tal, el diseño web móvil se ha disparado en los últimos años.
Esto ha significado que los desarrolladores web han tenido que familiarizarse con el diseño de sitios móviles, si quieren competir y preparar su negocio para el futuro. Teniendo esto en cuenta, he dado algunos consejos importantes para darles a los desarrolladores un punto de partida, con algunas cosas que deben tenerse en cuenta antes de continuar.
Considere la tecnología de rápido movimiento
Un vistazo rápido a lo lejos que han llegado los dispositivos móviles desde la introducción del iPad confirmará que la tecnología móvil es una industria en constante cambio y en rápido movimiento y, por esta razón, es aconsejable considerar cómo se puede diseñar un diseño a prueba de futuro.
Esto significa que mantenerse al día con las últimas tendencias es vital si quiere asegurarse de alguna manera que el sitio sea viable dentro de unos años. El diseño receptivo está, por supuesto, de moda en este momento y es probable que esto sea parte de su plan.
Si bien es seguro asumir que la mayoría de sus visitantes tendrán teléfonos inteligentes, vale la pena considerar que no todos los tendrán, por lo que es posible que deba incorporar esto en el diseño. Vale la pena investigar el público objetivo en las etapas de planificación, para que pueda familiarizarse con los dispositivos comunes utilizados, así como el comportamiento del usuario.
Hablando del comportamiento del usuario…
Los visitantes de la web móvil no necesariamente acceden a sitios web sobre la marcha y esto es algo a tener en cuenta. A menudo, la navegación móvil se realiza mientras se espera; en el tren, en el coche o incluso en el sofá de casa.
Esto significa que reducir el diseño para que sea demasiado simplista podría ser contraproducente. Si tiene un sitio básico sin mucho contenido, esto podría ser desagradable para la audiencia, ya que su sitio no proporciona mucho uso real y podría considerarse nada más que un anuncio de banner de gran tamaño.
En la actualidad, los dispositivos móviles se utilizan tanto o más que el escritorio para navegar por Internet, así que téngalo en cuenta durante el proceso de diseño y asegúrese de que su sitio sea fácil de usar, pero rico en contenido.
Optimización de su sitio móvil
La optimización de los sitios web móviles también es vital, especialmente para las páginas de destino, ya que son el punto de entrada al sitio web. Esto significa que un sitio web móvil debe optimizarse teniendo en cuenta al usuario, así como al motor de búsqueda, para brindar una experiencia de navegación simple, texto claro, formularios fáciles de un clic y metainformación relevante y etiquetas alt.
Los tamaños de los archivos se deben considerar en términos de peso y se debe incluir una fuerte llamada a la acción en las páginas de destino. Si tiene que usar formularios, manténgalos lo más simples posible, con la menor cantidad de campos de entrada posible para que el usuario no se sienta frustrado y se vaya.
Lo mismo ocurre con las acciones; manténgalos simples y utilícelos solo cuando sea necesario. Si bien podría ser bueno tener un sistema de navegación elegante, si no se puede usar, espere una alta tasa de rebote.
Cuando sea necesario utilizar botones, asegúrese de que pasen la ‘prueba del pulgar’, lo que significa que debe poder presionar cómodamente un botón con el pulgar, sin tocar otro contenido que pueda llevarlo a una página no deseada.
La optimización es algo que también debe tenerse en cuenta al crear un sitio web receptivo. Recientemente se ha debatido mucho sobre cómo el diseño receptivo está ralentizando la web y si esencialmente significará la desaparición de los sitios receptivos. Sin embargo, existen técnicas de carga condicional que pueden ayudar a acelerar un sitio para garantizar que los dispositivos no descarguen automáticamente la versión de escritorio completa del sitio cada vez.
Los recursos CSS y JavaScript deben comprimirse y hay una gran cantidad de software de código abierto disponible para ayudar con esto. Por ejemplo, UglifyJS se puede utilizar con JavaScript para comprimir código y Brújula se puede usar para crear marcas más limpias, así como sprites y extensiones, sin demasiado alboroto y trabajo duro.
Cuadrícula y puntos de interrupción
Cuando se usa el diseño receptivo, una de las cosas clave para definir al principio son la cuadrícula y sus puntos de interrupción. Una vez más, hay numerosos herramientas en línea que puede ayudarlo a definir columnas y su ancho y canaletas.
A algunos desarrolladores les gusta establecer puntos de interrupción basados en la resolución, pero esta no es realmente la mejor solución ya que hay muchos dispositivos móviles en el mercado y las resoluciones cambian con el tiempo.
Esto significa que los puntos de interrupción deben basarse en el diseño y el contenido, más que en la resolución. Para probar puntos de interrupción y cuadrículas, la ventana del navegador se puede utilizar durante el proyecto de diseño para ver cómo se comporta el contenido cuando se cambia de tamaño.
Idealmente, debería fluir de forma natural y puede utilizar tantos puntos de interrupción como necesite para lograrlo.
UI, compatibilidad y pautas
No todos los sistemas operativos móviles se crean de la misma manera, como sabrá, por lo que vale la pena consultar las pautas cuando se trata de compilar para Android e iOS, por ejemplo, y los navegadores que se pueden usar en ellos.
Tenga en cuenta que los usuarios navegarán en una variedad de sistemas operativos y algunos serán versiones anteriores, por lo que es útil asegurarse de que el sitio web móvil sea compatible con versiones anteriores. Aquí es útil mirar los análisis del sitio principal, si corresponde, ya que podrá ver en qué dispositivos está accediendo su audiencia al sitio.
Por supuesto, observar los análisis después de completar el sitio también lo ayudará a realizar los cambios necesarios y a aprender para el futuro.
Contenido, contenido, contenido
Como todos sabemos a estas alturas, el contenido vuelve a ser el rey de la web, por lo que planificar los módulos de contenido es importante. Deberá definirse el comportamiento de los módulos de contenido para garantizar que se muestren como deberían a medida que el usuario navega y actúa.
Esto significa que debe observar y definir cómo se muestra el contenido al cambiar entre una pantalla de escritorio y una pantalla móvil para determinar cómo se apilarán y reordenarán los módulos.
En este sentido, a menudo es más fácil concretar esto en la etapa de planificación. Haga un bosquejo de cómo prevé la visualización del contenido y luego analice cómo se puede lograr.
Sin embargo, trate de no obsesionarse demasiado con la definición de todo. Si bien sus páginas principales necesitarán wireframes, no se sigue necesariamente que todas las páginas lo hagan. Crear un conjunto maestro para el tamaño y la orientación de la pantalla debería ser suficiente.
Primero construya un prototipo y pruébelo a fondo, asegurándose de que todos los aspectos funcionen a medida que avanza. También es aconsejable tener en cuenta al usuario al realizar la prueba, asegurándose de que la navegación sea simple y preferiblemente de un máximo de tres capas. Trate de encontrar a alguien que no tenga una mentalidad tecnológica, pero que use diferentes dispositivos, para probar el sitio.
Conclusión
El diseño web móvil es un desafío necesario para familiarizarse como diseñador, para poder ofrecer un servicio completo al cliente. Como muchas cosas en la vida, uno de los aspectos más importantes es la planificación para que tengas una idea clara de cómo seguir adelante.
Una planificación eficaz y tener en cuenta al usuario ayudarán a superar la mayoría de los obstáculos con los que probablemente se encontrará, y las pruebas exhaustivas resolverán el resto. Piense de manera receptiva, rápida y simple, con excelente contenido útil y no se equivocará demasiado.
Imagen destacada / miniatura, imagen web móvil a través de Shutterstock.
