No sorprende 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 dentro de los próximos 9 meses. La 'revolución de los teléfonos inteligentes' definitivamente está 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 lidiar con el diseño de sitios móviles, si quieren competir y tener un futuro seguro para su negocio. Teniendo esto en cuenta, he llegado a algunos consejos importantes para dar a los desarrolladores un punto de partida, con algunas cosas que deben tenerse en cuenta antes de continuar.

Considera la tecnología de movimiento rápido

Una mirada rápida a lo que han avanzado los dispositivos móviles desde la introducción del iPad confirmará que la tecnología móvil es una industria cambiante y cambiante, y por esta razón, es conveniente considerar cómo puede diseñar para el futuro.

Esto significa que mantenerse al día con las últimas tendencias es vital si quiere asegurarse de que el sitio será viable dentro de unos años. El diseño receptivo es, por supuesto, furor en este momento y es probable que esto sea parte de su plan.

Si bien es seguro suponer que la mayoría de sus visitantes tendrán teléfonos inteligentes, vale la pena considerar que no todos lo harán, por lo que es posible que deba incluir esto en el diseño. Vale la pena investigar al público objetivo en las etapas de planificación, para que pueda familiarizarse con los dispositivos comunes utilizados, así como con el comportamiento del usuario.

Hablando de 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 automóvil o incluso en el sofá de casa.

Esto significa que desmontar el diseño para que sea demasiado simplista podría ser contraproducente. Si tiene un sitio escueto sin demasiado contenido, podría ser desalentador para el público 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.

Hoy en día, los dispositivos móviles se utilizan tanto o más que el escritorio para navegar por Internet, así que tenlo en cuenta durante el proceso de diseño y asegúrate de que tu sitio sea fácil de usar, pero rico en contenido.

Optimizando su sitio móvil

La optimización de 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 el motor de búsqueda, para ofrecer una experiencia de navegación simple, texto claro, formularios sencillos con un clic y metainformación relevante y etiquetas alt.

Los tamaños de archivo deben considerarse en términos de peso y debe incluirse un fuerte llamado a la acción en las páginas de destino. Si tiene que usar formularios, manténgalos lo más simple posible, con el menor número posible de campos de entrada para que el usuario no se frustre y se vaya.

Lo mismo ocurre con las acciones; manténgalas simples y solo úselas cuando sea necesario. Aunque podría ser bueno tener un sistema de navegación elegante, si es inutilizable, se espera un alto índice de rebote.

Cuando se tengan que usar botones, asegúrese de que pasen la 'prueba del pulgar', lo que significa que debe poder presionar un botón con su pulgar, sin tocar otro contenido que pueda llevarlo a una página no deseada.

La optimización es algo que debe tenerse en cuenta al construir un sitio web receptivo también. 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 estar comprimidos y hay un montón de software de código abierto disponible para ayudar con esto. Por ejemplo, UglifyJS se puede usar con JavaScript para comprimir código y Brújula se puede utilizar para crear marcas de marcado más limpias, así como sprites y extensiones, sin demasiados problemas y trabajo duro.

Cuadrícula y puntos de interrupción

Cuando se utiliza un diseño receptivo, una de las cosas clave para definir al comienzo es la cuadrícula y sus puntos de corte. Nuevamente, hay numerosos herramientas en línea que puede ayudarte a definir columnas y su ancho y canales.

A algunos desarrolladores les gusta establecer puntos de inflexión basados ​​en la resolución, pero esta no es realmente la mejor solución ya que hay tantos dispositivos móviles en el mercado y las resoluciones cambian con el tiempo.

Esto significa que los puntos de corte deben basarse en el diseño y el contenido, en lugar de la resolución. Para probar los puntos de interrupción y las cuadrículas, la ventana del navegador se puede usar durante el proyecto de diseño para ver cómo se comporta el contenido al cambiar el tamaño.

Idealmente, debe fluir naturalmente y puede usar tantos puntos de interrupción como necesite para lograr esto.

UI, compatibilidad y directrices

No todos los sistemas operativos móviles se crean de la misma manera que usted sabrá, por lo que vale la pena mirar las pautas a la hora 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 analizar los análisis del sitio principal, si corresponde, ya que podrá ver a qué dispositivos está accediendo su audiencia al sitio.

Por supuesto, observar los análisis después de la finalización del sitio también lo ayudará a realizar los cambios necesarios y a aprender para el futuro.

Contenido, contenido, contenido

Como todos sabemos hasta ahora, el contenido es el rey de la web nuevamente, por lo que es importante planificar los módulos de contenido. El comportamiento de los módulos de contenido deberá definirse para garantizar que se muestren como deberían, a medida que el usuario navega y toma medidas.

Esto significa que debe observar y definir cómo se muestra el contenido al pasar de una pantalla de escritorio a una de un dispositivo móvil para determinar cómo los módulos se apilarán y se reordenarán.

En este sentido, a menudo es más fácil realmente fijar esto en la etapa de planificación. Haz un boceto sobre cómo visualizas la visualización del contenido y luego repasa cómo se puede lograr.

Sin embargo, trate de no preocuparse demasiado por definir todo. Si bien sus páginas principales necesitarán wireframes, no necesariamente implica que todas y cada una de las páginas sí lo harán. Crear un conjunto maestro para los tamaños de pantalla y la orientación debería ser suficiente.

Primero crea un prototipo y prueba a fondo, asegurándote de que todos los aspectos funcionen a medida que avanzas. También es aconsejable tener en mente al usuario al realizar las pruebas, asegurándose de que la navegación sea simple y preferiblemente un máximo de tres capas. Intente encontrar a alguien que no tenga una mente tecnológica, pero use diferentes dispositivos para probar el sitio.

Conclusión

El diseño web móvil es un desafío necesario para tener en cuenta como diseñador, con el fin de 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 tenga una idea clara de cómo avanzar.

Una planificación eficaz y mantener al usuario en mente le ayudará a superar la mayoría de los obstáculos que probablemente encuentre, y las pruebas exhaustivas recogerán el resto. Piensa de forma ágil, rápida y sencilla, con excelente contenido útil y no puedes equivocarte demasiado.

Imagen / miniatura destacada, imagen web móvil a través de Shutterstock.