Consejos de diseño web para móviles
La web móvil requiere saber condensar la información en espacios pequeños, primar la usabilidad y saber comprender qué es lo verdaderamente importante en una web.
Hay una gran diferencia entre diseñar una página web que será visible en un ordenador y diseñar una que será visible en un dispositivo móvil.
Esta diferencia es cuantiosa ya que no se puede establecer un formato específico para móvil, debido a la gran cantidad de modelos, tamaños y grandes diferencias de resolución en los diferentes tipos de dispositivos móviles.
Ante esta situación, la mejor opción es que tomemos como referencia a la hora de diseñar nuestro sitio web para móviles, la mayor cantidad posible de dispositivos móviles, de tal manera que nuestro diseño pueda ser visto desde casi cualquiera de estos dispositivos.
Para ello debemos asegurarnos principalmente de hacer un diseño adaptable, que pueda adaptarse a diferentes anchuras sin romperse o desaprovechar espacio.
No ha pasado mucho tiempo desde que para promocionarte o promocionar tu negocio y estar al día, solamente necesitabas tener una buena página web.
Ahora, con lo rápido que ha avanzado la tecnología, hace falta mucho más que eso, hace falta tener actividad en las principales redes sociales y, sobretodo, contar con un sitio web compatible con dispositivos móviles.
Actualmente un alto porcentaje de las búsquedas en motores tales como Google y Yahoo, se hacen desde dispositivos móviles como iPads y smartphones, pero es muy bajo el porcentaje de los sitios web del mundo pueden ser visualizados en un dispositivo móvil sin ningún problema.
Lo cierto es que la navegación web móvil no es una moda pasajera, se ha convertido en una necesidad casi absoluta para muchas compañías que intentan mantenerse en contacto directo con sus consumidores, llegando incluso a se ha llegado a considerar como el nuevo estándar de Internet, por lo que su desarrollo más allá de ser una consideración alternativa es una necesidad.
En este artículo, vamos a centrarnos en cómo se puede crear una versión móvil de un sitio, a través de diversas opciones y técnicas básicas que nos llevarán a trazar un procedimiento especial.
Consejos para hacer mejores diseño web para móviles
En el futuro cercano, se espera que la navegación web en teléfonos móviles se convierta en la plataforma más importante de acceso a internet, en algunos casos de hecho, el móvil ha superado al ordenador en tráfico.
Si tu aún no has creado tu propio sitio móvil, entonces hoy es el tiempo adecuado para empezar.
La manera más fácil de construir un sitio móvil, es modificar un sitio web existente para que éste sea compatible y pueda ser visualizado adecuadamente en dispositivos móviles. Para lograr esto es necesario realizar varios cambios en términos de diseño, estructura y construcción.
Por lo que recomiendo tener en cuenta algunos consejos que harán nuestro trabajo más simple, fácil y atractivo para los usuarios.
Tamaños de pantalla
Como hemos indicado, la resolución de pantalla cambia según el dispositivo móvil en el que vayamos a visualizar una web, por lo tanto necesitamos adecuarnos a un estándar de resolución para que la web móvil se adapte a la mayoría de pantallas.
Es conveniente no poner mucha información en una pantalla. Se recomienda dividir el contenido de la página en pequeñas porciones fáciles de entender, resumir textos y hacer bien visibles las llamadas a la acción, tales como botones y enlaces.
Reducir los tamaños de los textos y el tamaño de las imágenes para que tu sitio web móvil tenga un correcto funcionamiento y sea rápido al cargar no es lo único que necesitas. También es importante que utilices imágenes de menor resolución, videos más cortos y elementos visuales mucho más sencillos.
Siempre utiliza una misma dirección para el scrolling, pues si ya es bastante incómodo manejar un scroll en doble dirección en una página web estándar, lo será mucho más en un sitio web móvil. Utiliza navegación vertical.
Ser lo más claro posible en la navegación del usuario. Esto es muy importante. El usuario debe encontrar las mayores facilidades tanto en la navegación web como en el sentido de esta.
Para ello, debemos tener muy clara la distribución del contenido en el desarrollo de la web, logrando el correcto equilibrio entre la estética y la funcionalidad.
Desarrollar un diseño sencillo para facilitar el uso. Es muy importante que la visualización de la web en un dispositivo móvil sea simple y claro, pues esto significará que el usuario vea atractivo y fácil navegar por la web.
Para hacer más ágil la navegación web en un dispositivo móvil, es conveniente que el usuario no se vea obligado a escribir texto.
Trata de proporcionar los enlaces necesarios para evitar este tipo de situaciones, asegúrate de que todas las páginas están vinculadas a otras páginas, y si en realidad es un sitio para verse en un teléfono, haz que los enlaces a números realmente realicen una llamada.
Lo recomendable es utilizar opciones de menú desplegable que muestren las diferentes alternativas de acceso a los diferentes niveles del navegación web.
Diseño sencillo
Evita la sobrecarga de imágenes. Si utilizas menor cantidad de imágenes será mejor para tu sitio web móvil, ya que esto no solamente facilitará la rapidez de las descargas, sino también hará que las imágenes que si sean necesarias sean mucho más fáciles de ver. ¿Quieres un dato técnico? Mantén tus imágenes aproximadas a los 72 dpi, 640px en 960 de altura.
Darle al usuario la opción de poder volver a la página inicial de la web, haciendo clic en un botón que aparecer en cada página a la que acceda. Esto hará que el usuario retome rápidamente el rumbo de la navegación en caso de haberlo perdido.
Además que el usuario pueda siempre diferenciar, por ejemplo mediante un color diferente, los enlaces que ya haya visitado de lo que no, para que la navegación sea más clara y dinámica.
Decide correctamente los colores que usarás. En una web estándar los colores son de importancia para resaltar el contenido de tu información, pero recuerda que la pantalla de algunos dispositivos móviles puede ser de bajo contraste y eso hará que los colores y, por consiguiente, tu sitio web no se visualice tal como lo esperabas.
Asegurate de que los textos y colores que utilizas son los adecuados y tengan un buen contraste.
Layout
El navegar por un sitio mediante un teléfono móvil puede requerir y consumir mucho tiempo, la pantalla es mucho más pequeña que en otros dispositivos, por lo que el usuario se puede desesperar si no llega fácilmente a la parte que él busca.
Para evitar esta frustración, recuerda siempre poner toda la información más importante para los usuarios móviles, en la parte superior de la página.
No te olvides de incluir el logotipo de tu empresa, o de tu cliente, adaptado para un sitio móvil.
Asegúrate de minimizar la navegación horizontal, ya que ésta es difícil de realizar en un teléfono, en lugar de esto, trata de organizar el contenido en una sola columna.
También debes evitar el uso de tablas, pero si necesitas incorporarlas, no uses más de 2 columnas y evita las fusiones entre columnas y filas.
Tecnología universalmente compatible
Asegurarnos que el desarrollo del contenido sea el adecuado.
Debemos utilizar lenguajes de programación comunes y formatos de documentos conocidos por los usuarios, asegurarnos de la correcta codificación de los caracteres y utilizar hojas de estilo.
No utilizar páginas emergentes (pop-us). Los navegadores móviles no soportan las ventanas emergentes y si así fuera, el espacio para mostrarlo sería muy reducido. Se recomienda no utilizarlos para la comodidad del usuario y para una mejor estética del diseño web móvil.
Olvida el auto-play y la auto-descarga. Los dispositivos móviles tienen menos capacidades técnicas que los ordenadores y no pueden manejar el mismo flujo de datos. La regla de oro es hacerlo simple.
Hay que primar la usabilidad y accesibilidad más si cabe que en un ordenador.
Codificación
No existe realmente algún tipo de codificación especial necesaria para elaborar un sitio móvil, sin embargo es mucho más fácil si su sitio móvil se codifica utilizando HTML5 o en su defecto XHTML.
También puedes construir tu sitio con elementos básicos de HTML y con la codificación de CSS más sencilla posible.
No todos los dispositivos móviles son compatibles con Flash, así que la recomendación es que toda tu información se encuentre en HTML / CSS para lograr la mejor funcionalidad de tu sitio web en los dispositivos móviles.
AMP (accelerated mobile pages)
Google está poniendo mucha importancia en que las páginas que se ven en los móviles carguen lo más rápido posible, casi instantáneamente.
Llevan un tiempo dando mucha publicidad a un proyecto llamado AMP, que pretende precisamente hacer que sea rápido navega por la web desde un móvil sobre todo en condiciones de baja conectividad.
En la web del proyecto explican cómo implementarlo, pero si usas WordPress no te preocupes, hay dos plugins muy buenos que lo hacen por ti: AMP y AMP for WP.
Imágenes
La mayoría de los teléfonos móviles podrían tardar una eternidad en cargar imágenes pesadas.
Es recomendable utilizar imágenes optimizadas para web, y trata de utilizar imágenes en formato jpeg, gif o png ya que estos archivos son los más ligeros.
Asegúrate de comprimir tus imágenes para evitar el zoom, y haz uso del atributo alt para proporcionar un texto alternativo, el cual será de ayuda en caso de que el usuario tenga desactivado el despliegue de imágenes.
Estrategias fundamentales para hacer un diseño móvil
Implementa un diseño web responsive
El diseño web adaptativo ha recibido muchísima publicidad en los últimos años debido a sus grandes bondades.
Este tema ha tomado tanta relevancia en los nuevos patrones de estructuración, que su aplicación se ha convertido en sinónimo de buena práctica.
Es importante tomar el tiempo y crear un diseño que funcione bien con todos los dispositivos, así como rediseñar las imágenes para que se ajusten a una pantalla más pequeña.
Si quieres profundizar en el tema, te recomiendo nuestra guía sobre como hacer una web responsive.
Utiliza prototipos
Antes de lanzarte al ruedo y empezar a hacer un diseño desde cero, es bueno prever, planear y organizar tu estructura a través de prototipos.
Un prototipo te permitirá identificar las fortalezas y debilidades de tu diseño original, permitiendo hacer modificaciones de manera más sencilla.
Es en este punto donde podemos hacer uso de herramientas de prototipado, las cuales te permite crear prototipos de sitios web rápidamente para que de esa manera puedas incluso proporcionar una previsualización a tu cliente o jefe en cuestión de minutos.
Puedes echar un vistazo a Invision, de las más usadas del mercado. proto.io, la cual encuetro muy fácil de manejar, pero quizá le faltan algunas opciones. O marvel, una herramienta muy completa y recomendable.
Este tipo de programas te permite experimentar con el diseño, y cuando este está completo te da la facilidad de ir copiando los elementos y adaptarlos al código del diseño actual.
Personaliza tus proyectos
Aunque es muy tentador usar plantillas para todos los proyectos en los que trabajamos, este tipo de prácticas ocasionalmente pueden llevar a que los clientes no queden totalmente conformes con el tipo de diseño que les ofrecemos.
Para estos casos, es mejor optar por la creación de una apariencia única, que genere una sensación de importancia y que permita ayudar con el desarrollo de la marca y su comercialización.
Gracias a la personalización que proporcionemos al proyecto, la empresa podrá contar con un sitio que propicie la construcción de vínculos emocionales entre los consumidores.
Busca inspiración
No siempre es necesario empezar a diseñar desde cero, la mayor parte del tiempo esto complica el proceso y hace que el diseñar demande más tiempo.
Para evitar empezar con una mente en blanco, puedes buscar sitios web relacionados con la temática que intentas manejar, y de esa manera tomarlos como inspiración para tu proyecto.
Al momento de encontrar un sitio que te agrade, puedes estudiarlo para ver cómo funciona.
Puedes utilizar los resultados que obtengas con este estudio, para ayudarte a construir el tuyo.
Debes tener en mente que la inspiración no siempre llega a través de otros sitios web, puedes buscar inspiración fuera del Internet, ya sea en revistas o libros. El objetivo es buscar ideas de diseño que te ayuden a despertar tu creatividad.
Prueba y valida
Recuerda siempre validar tu código y probar el diseño que elaboraste en todos los diferentes navegadores y dispositivos a los que deseas dar soporte. En un dispositivo móvil, eso también significa girar el dispositivo hacia los lados y ver qué pasa con el diseño.
Conclusiones
Diseñar sitios web para dispositivos móviles exige un gran desafío y requiere un enfoque estratégico del diseñador web y el desarrollador.
La mayor ventaja del internet móvil es que puedes acceder a él desde cualquier lugar que te encuentres: desde el coche, el autobús, el supermercado, el campo de fútbol o los lugares menos pensados.
Por esta razón estamos seguros que, en poco tiempo, el porcentaje de sitios web totalmente visibles en dispositivos móviles crecerá de tal manera, que llegará el momento en que la gran mayoría de accesos a internet será mediante estos dispositivos. Y este futuro no es lejano.
Fuente: https://www.lawebera.es/
