Tecnología y Coaching para Emprendedores

Primero el diseño web móvil

clientes-online

Muchos son los diseñadores web que todavía hoy diseñan primero la web para desktop y después la adaptan a la versión móvil. Pero esto es un error, ya que cada vez son más los usuarios que navegan desde un dispositivo móvil. Si bien las estadísticas a nivel mundial apuntan a todavía un mayor uso del desktop sobre el móvil, hay países como India en que el uso móvil empieza a superar el del desktop y a nivel global se estima que en cinco años el uso de internet móvil superará al de los ordenadores de sobremesa. Puedes ver aquí las estadísticas.

Lo primero que debemos hacer antes de nada es cambiar el chip y empezar con el diseño web móvil. Y a partir de aquí lo vamos haciendo grande y adaptando a diferentes resoluciones de pantalla.

Mobile first es una filosofía desarrollada por Luke Wroblewski que señala la necesidad de priorizar el entorno móvil a la hora de desarrollar experiencias de usuario. Las razones principales para empezar con el diseño web móvil son las siguientes:

  • Permite llegar a más gente. A nivel mundial el 77% de la población utiliza un móvil, con un 85% de usuarios móviles que tienen navegador en su dispositivo. Asimismo, te permite orientarte a un mercado creciente de usuarios navegando principalmente desde un dispositivo móvil.
  • Obliga al diseñador a centrarse en los contenidos y funcionalidades principales. ¿Qué haces cuando pierdes un 80% de la pantalla?
  • Permite al diseñador web sacar provecho de las tecnologías móviles, como geolocalización, touch events, etc.

Es un hecho que antes o después vamos a tener que diseñar pensando primero en los dispositivos móviles, así que ¿para qué esperar? Aquellos diseñadores web que decidan empezar ya pensando primero en el diseño web móvil son los que van a estar preparados para ofrecer el mejor servicio a sus clientes.

Y si no me crees, aquí te dejo las palabras de Kate Aronowitz, directora de diseño de Facebook: “Justo estamos empezando con el diseño web móvil primero y el diseño para desktop después para muchos de nuestros productos”. Lo puedes escuchar tú mismo en este vídeo de Youtube:

Así, diseñar primero para internet móvil no sólo te prepara para las enormes oportunidades que ofrece este mercado, sino que también te ayuda a estar al día en las constantes innovaciones que se van dando en el mundo del diseño web.

En esta tabla puedes comprobar cómo ha despegado la compra de smartphones y tabletas frente a PCs (fuente: IDC):

stats

¿Qué podemos concluir de esta gráfica? Pues que cada vez serán más los usuarios navegando desde un dispositivo móvil. Así que cuando antes nos preparemos para este cambio de tendencia mejor.

Funcionalidad del diseño web móvil

Cada vez son más las páginas web que se apuntan al diseño web móvil Sin embargo, muchas de ellas ofrecen sólo una parte de los contenidos disponibles para desktop, lo cual empieza a ser algo frustrante para el usuario que si quiere ver determinados contenidos ha de cambiar a la versión desktop de la web.

Uno de los puntos clave cuando diseñamos nuestra web para dispositivos móviles es pensar en la funcionalidad primero. ¿Qué buscan los usuarios que vienen a nuestra web? ¿Qué necesitan? Pensar en diseño web móvil primero lleva a un cambio de paradigma, pues requiere adaptar nuestros contenidos a una pantalla pequeña, lo que no siempre es fácil.

Así, hemos de tener en cuenta que disponemos de mucho menos espacio que en una pantalla de ordenador, por lo que no vamos a poder mostrar todos los contenidos de la manera en que lo hacíamos cuando diseñábamos para el PC. Sin embargo, existen muchas soluciones, como la que aplica Quartz en su página web.

qz

Fíjate en cómo cambia el menú lateral, se concentra en un icono superior que al hacer clic despliega un menú vertical con diferentes opciones.

Con este ejemplo vemos que no hemos de eliminar contenidos para dispositivos móviles, sino que hemos de reestructurarlos para mostrarlos de un modo eficiente. Se debería evitar en la medida de lo posible el uso de display:none en el CSS, ya que si bien no se va a mostrar en pantalla, el usuario lo va a descargar, con lo que estamos usando parte de su ancho de banda para algo que no va a poder ver.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • Cloud TIC Diseño Web

    Buenas tardes,

    Yo soy de los que prefiero primero realizar el diseño Desktop y luego ya lanzarme con el diseño móvil, ya que de esta forma tienen muy claro la funcionalidad que tiene que tener la web y que puntos son los más importantes y por lo tanto los que hay que destacar en la versión móvil.

    Pero bueno, ante gustos colores.

    Un Saludo Sandra

    • Sandra

      Hola, y has probado alguna vez de hacerlo al revés? Porque cambia mucho la percepción del diseño y a mí al menos me es mucho más fácil centrarme en la funcionalidad si primero diseño para móviles. Pero como dices, a gustos los colores :-)