4 consejos básicos para el diseño de una página web móvil

Este artículo es una contribución de Luiggi Santa María CEO de Staff Creativa - Agencia Digital en Lima, Perú. Tienes más de 10 años de experiencia desarrollando soluciones web y móviles para empresas de diferentes rubros. Consulta sus servicios en el sitio web de Staff Creativa o síguelos en Facebook, Twitter, Google+, Canal Youtube.

Si eres nuevo en el mundo del desarrollo de páginas web, es mejor que empieces directamente con las páginas web móviles. Esto porque la mayoría de la navegación web ahora se realiza desde dispositivos móviles.

Aunque la tecnología web ha avanzado un grado más alto en la actualidad, es más difícil crear una gran página web para el usuario promedio.

En los viejos días de las computadoras de escritorio, los desarrolladores solo tenían que preocuparse por algunos navegadores y sistemas operativos diferentes y algunos cuantos tipos de resoluciones.

Sin embargo, en la actualidad, tienes que preocuparte por los dispositivos móviles que tienen más de resoluciones diferentes y que tiene más de navegadores. Puede ser una pesadilla asegurar que una cierta página funcione de manera uniforme en todos estos escenarios. 

Pese a ello, los desarrolladores que navegadores móviles que recién están dando sus primeros pasos en este mundo usando sencillas técnicas y creado páginas funcionales y bonitas para sus clientes.

Presentamos a continuación 4 consejos básicos para el diseño de una página web móvil:

1.- Opta por el diseño web responsive

La mejor forma de asegurar que tu página web funcione en todos los tipos de pantallas es que uses técnicas de diseño web responsive, o adaptativo. Esta es una buena idea por muchas razones, como:

• Tienes una sola página que gestionar en lugar de una página web para escritorio y para móviles.

• Los cambios que realices se aplicas a tu toda página.

• Te es más fácil administrar tu tiempo a largo plazo.

El diseño web responsive usa consultas multimedia CSS para obtener el ancho de la pantalla y presentar el contenido de la forma apropiada. 

Usando esta técnica, podrás, por ejemplo, reducir el contenido que tienes que mostrar en dispositivos móviles, pero expandirlo cuando la pantalla es más grande, como en un monitor de escritorio.

2.- Navegación

Uno de los primeros obstáculos que enfrentan quienes empiezan en el desarrollo de páginas web móviles es diseñar un sistema de navegación que se pueda usar. Para una página web de escritorio, puedes usar árboles de menú que no tienen fin, pero el limitado tamaño de una pantalla móvil hace que reconsideres la forma de diseñar la navegación. 

Aquí te dejamos tres formas de asegurar que tu página web móvil tenga una navegación fácil:

• Simplifica la arquitectura de de tu página web para que tengas menos enlaces de navegación.

• Coloca las barras de navegación en las partes superior e inferior de tus páginas web, así los usuarios no tendrán que desplazarse mucho.

• Si tu página web necesita enlaces de navegación, considera usar una cuadrícula de enlaces para guiar a los usuarios a la sección que deseen.

3.- Diseño de enlaces

El diseño de páginas web móviles es otro reto para las páginas web tradicionales. Con una página de escritorio, tendrías diferentes diseños para colocar el pulso sobre los íconos, dar clic, etcétera. Sin embargo, los dispositivos móviles no tienen una característica para colocar el cursor sobre distintos íconos o dar clic. 

Por ende, mientras crees los enlaces:

• Usa tanto textos como puedas en lugar de botones grandes. Ahorra espacio.

• Trata de no usar demasiados efectos para cuando se da clic en un enlace porque el texto alrededor del mismo puede verse extraño.

• Asegúrate de que los enlaces que deseas resaltar se diferencia de los demás usando sutiles variaciones de colores.

4.- Evita las ventanas emergentes

A los usuarios no les gusta, pero ya se han acostumbrado a verlas en todas las ventanas que visitan. Parte del porqué aún existen es el hecho que pueden cerrarse fácilmente con el mouse, pero con un dispositivo móvil o una tablet, esta ventana puede ocupar todo el espacio de la pantalla y los usuarios pueden no saber dónde tocar para cerrarla.

En primer lugar, evita las ventanas emergente, pero si las tienes que usar:

• Haz que sean pequeñas y que sus mensajes sean sencillos.

• Asegúrate de que los botones para cerrarlas sean lo suficientemente grandes para tocarlos.

Si deseas ser dominar el desarrollo web móvil, empieza con un solo dispositivo y luego escala a otros de mayor dificultad.

Autor

Artículo cortesía de Luiggi Santa María CEO de Staff Creativa - Agencia Digital en Lima, Perú

Luiggi tiene más de 10 años de experiencia desarrollando soluciones web y móviles para empresas de diferentes rubros. Consulta sus servicios en el sitio web de Staff Creativa o síguelos en Facebook, Twitter, Google+, Canal Youtube.

¿Y qué opinas tú?

¿Estas desarrollando actualmente páginas web móviles?, ¿Estás usando diseño Responsive?, ¿Cuales han sido los retos y como los has enfrentado? . Te invitamos a dejarnos comentarios en este post (puedes firmar tu comentario con la dirección de tu web si así lo deseas).

<< Artículo anterior: Por qué tu aplicación para móviles necesita una página web

¿Te ha gustado este artículo?, entonces suscríbete a nuestra lista de correos?

Suscríbete a la lista de correo electrónico:


Vía FeedBurner, se abrirá una nueva ventana

También puedes seguirnos vía Twitter, Facebook o Linkedin:

  

Otros artículos

> Por qué tu aplicación para móviles necesita una página web
> Desarrollo de aplicaciones para smartphone
> Desarrollo de software para móviles en 5 fases
> 9 Habilidades que Necesitan Aprender los Desarrolladores para Móviles
> Programar para Teléfonos Móviles: Retos y Ventajas