Principios básicos en el diseño web para móviles

Valora este artículo

En la actualidad el móvil ya supera al PC como dispositivo de acceso a internet (Diario Expansión – 10/03/2017) por ello es impensable no tener en cuenta las particularidades de los dispositivos móviles a la hora de diseñar una página web.

En este pequeño artículo vamos a exponer los principios básicos que hay que considerar en el momento de diseñar una página web optimizada para dispositivos móviles.

Tecnologías para el desarrollo de webs para móviles

Una web para móviles no es más que una web donde se han tenido en cuenta las características de los dispositivos móviles en el momento de su diseño. Básicamente utiliza la misma arquitectura y muchas de las tecnologías que se usan en el desarrollo de webs para escritorio. No obstante, existen diferencias como el tamaño de la pantalla, el ancho de banda y las formas de interacción con el usuario.

El diseño puede ser totalmente independiente de la web diseñada para escritorio o se puede optar por hacer un diseño único que se adapte automáticamente a la resolución del dispositivo donde se está visualizando la web (web responsive).

Cómo se interactúa con el móvil

Aunque parezca una obviedad hay recordar que los usuarios interaccionan con el dispositivo por medio de sus dedos y que el móvil puede estar orientado vertical u horizontalmente.

Los usuarios suelen sostener el móvil con una sola mano, de esta manera el dedo pulgar es el que asume la responsabilidad de realizar las interacciones. Teniendo esto en cuenta, los elementos que más se utilizan deberán colocarse en la parte de la pantalla que es más accesible por el pulgar.

 

Figura 1: Facilidad de acceso con el pulgar. Verde (fácil), naranja (bien) y rojo (difícil).

Principios de usabilidad

La usabilidad es la facilidad que se tiene al usar una página web (carga rápida, lectura de textos, navegación sencilla, …). En el caso particular de las webs diseñadas para móviles, se deben tener en cuenta las siguientes reglas de usabilidad:

  • Reducir la cantidad de contenido. Sólo se debe mostar el contenido principal, faclitando su lectura y navegación.
  • Usar una sola columna que utilice todo el ancho de la pantalla.
  • Ocultar los menús de navegación para disponer de más espacio para el contenido.
  • Minimizar las llamadas al servidor.
  • Aprovechar las funcionalidades que ofrecen los dispositivos móviles. Por ejemplo, llamar directamente al presionar sobre un número de teléfono.

Mobile first

Es un patrón de diseño donde se comienza a diseñar teniendo en cuenta en primer lugar al móvil. Se diseña para pantallas reducidas, con resoluciones mínimas, para a continuación ir escalando el diseño a resoluciones más grandes.

Una de las tareas que tiene en cuenta este tipo de diseño es la definición de contenidos. Se comienza definiendo el contenido indispensable que se debe mostrar en la web móvil, y se va añadiendo más contenido cuando aumenta la resolución del diseño.

Conclusión

Hoy en día es impensable desarrollar una página web sin tener en cuenta a los dispositivos móviles, debemos de ser capaces de diseñar webs plenamente operativas, usables y adaptadas a todos los dispositivos.

2 Replies to “Principios básicos en el diseño web para móviles”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *