Tendencias web, diseño para sitios web aptos para móvil.
Cada vez que creamos una pagina web, la pregunta típica es si está disponible la versión mobile. En efecto, los usuarios cada vez hacen un mayor número de consultas a través de este tipo de dispositivos, siendo este uno de los grandes factores que harán que tu web triunfe por sobre las demás.
Es sabido: Un buen diseño, pensado en web para móviles es clave para cualquier empresa que quiera obtener suficiente visibilidad y correcta usabilidad.
Consejos para crear una buena versión móvil de tu web
Antes del diseño responsive era habitual definir la anchura de los bloques de información de una página web en píxeles. El inconveniente: Usando píxeles descuadraras el diseño de tu web en pantallas de menor tamaño. Por ejemplo, si tienes un bloque de información que mide 750 pixeles y un sidebar de 350 pixeles de ancho, en la pantalla de una tablet de 980 pixeles de ancho, tu diseño quedará mal. Si usas porcentajes, en cambio, como un 70% de ancho para el bloque de información y un 30% para el sidebar, el diseño se adaptará mucho mejor a pantallas menores. Este ejemplo se puede aplicar de forma similar al tamaño de las tipografías de tu web.
El estándar es usar al menos tres tamaños además de los diseños para tu web en versión de escritorio:
- 1024 pixeles de ancho: Para tablets en horizontal y algunas pantallas de portátiles.
- 768 pixeles: Para diseños de tablets en vertical y móviles en horizontal.
- 490 pixeles: Para pantallas móviles en vertical.
Diseño flexible que se fije a diferentes dimensiones: Piensa primero en la versión móvil de tu web.
Podemos comenzar por dedicar un tiempo a revisar diversos sitios que son una obra de arte, primer ejercicio que recomiendo para hacerse de ideas.
El primer objetivo es aprovechar al máximo el espacio en la pantalla, creando un ambiente fluido y de fácil navegación.
Muy importante en este sentido es considerar los DPI (dots per inches o cantidad de pixeles dentro de una pulgada), para asegurarte que la aplicación se vea bien desde cualquier dispositivo. La idea es agregar un mayor número de pixeles a nuestra imagen para mejorar su resolución. Así, a la hora de incrementar o disminuir su tamaño, no se verá distorsionada.
Todo esto nos deja con la gran interrogante, un dolor de cabeza para muchos: Si existe tal variedad de dispositivos ¿cómo trabajar el diseño?. Piensa primero en la versión móvil de tu web, ya que es habitual realizar diseños complejos que quedan muy bien en tu ordenador – o incluso Tablet – pero que no están pensados para el móvil, y adaptarlos traen muchas horas de desarrollo.
También debes considerar cambiar el típico menú por uno más cómodo y desplegable, usar una tipografía clara y un diseño ordenado y comprensible. Respecto a la iconografía, debemos asegurarnos de crear una imagen simple, fácil de distinguir.
Y en relación a los botones, la base de la interacción con nuestros dispositivos, la recomendación es diseñarlos con diversas iluminaciones que se activen al tacto, que indiquen al usuario cuando una opción ha sido escogida con la respuesta que esperan.