Worköholics, comunicación y proyectos digitales.

Mobile first. Más allá del diseño responsive

Diseño de interacción/ UI/ UX

El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado. Los dispositivos táctiles modifican nuestra forma de comunicarnos e interactuar con la web y las aplicaciones móviles.

Según el Instituto Nacional de Estadística en 2014 un total de 21,44 millones de españoles accedieron a internet en movilidad, es decir, el 77,1% de los internautas accedieron a Internet mediante el teléfono móvil. Y por primera vez en España hay más usuarios de Internet (76,2%) que de ordenador (73,3%).

Ya lo anunciaba Google el pasado 21 de abril, los sites que no estén optimizados para móviles, perderán posicionamiento con respecto a otros sitios que si lo estén. Por lo tanto tenemos dos alternativas a la hora de desarrollar una web o aplicación:

  • Desarrollar la aplicación en un entorno desktop y luego llevar las funcionalidades a un entorno móvil. Responsive design.
  • Desarrollar la aplicación en un entorno móvil y luego llevar las funcionalidades a un entorno desktop. Mobile first design.

Utilizando cualquiera de las dos alternativas acabaremos con una web/aplicación que puede utilizarse tanto en entorno móvil como en entorno desktop. Pero entonces, ¿cuál es la diferencia?

Multiplataforma. Multiresolución. Multipantalla. Multiorientación. Multiinteracción.

El diseño web responsive es una técnica de diseño y desarrollo web que permite crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivos reorganizando la distribución de todos sus elementos. Esto se consigue con HTML5, CSS3 (media queries) y JavaScript.

Un paso más allá del concepto responsive, del diseño de espacios web que fluyen según se visualicen desde un dispositivo u otro, surge el segundo reto: diseñar y programar, para un usuario que se relaciona directamente con el contenido, sin el click de su ratón, sólo con sus gestos.

Éste es el cambio sustancial que afecta a la manera en que el usuario interactúa con el dispositivo y el contenido, y por extensión a la manera en la que nosotros tenemos que pensar y diseñar esa interacción y esos contenidos.

En un móvil donde la pantalla es de dimensiones reducidas no es posible albergar una cantidad enorme de información. Es importante seleccionar solo aquello que sea relevante para el usuario que navega desde el móvil, es decir, pensar en el contexto de uso, un paso más allá del usuario, para facilitar la experiencia de usuario (UX).

Mobile first, o porqué diseñar primero para móviles.

El Mobile first obliga a centrarnos en los elementos y las acciones más importantes de un sitio web, creando una experiencia y una buena usabilidad para el usuario.

Es el diseño de las pantallas lo que la mayoría de gente entiende por Mobile first design: ¿cómo se verá la web en la pantalla de un dispositivo móvil? o lo que es más importante ¿cuánta información puedo introducir y cómo la maquetamos para que no sature al usuario?.

Pero cuando hablamos de Mobile first no hablamos sólo de diseño, Mobile first hace referencia tanto a la organización de la información como a la carga de contenidos y abarca desde la estrategia, la jerarquia de contenidos, la navegación, el wireframeado, el diseño y el marcado o maquetación, hasta la velocidad o el ancho de banda disponible y el posicionamiento.

Mobile first es una filosofia de trabajo, un concepto que prioriza el diseño y desarrollo en los dispositivos móviles. Se trata de pensar el contexto en el que nuestros contenidos van a ser consumidos para mejorar la usabilidad y la experiencia de usuario.

En este proceso de diseño no es lo mismo UX para móviles, UX para tablets y UX para desktops.

UX smartphone, UX tablet, UX desktop

Por tanto no es sólo diseñar para móviles o para tablets u ordenadores de sobremesa, se trata de diseñar en conjunto. Utilizando como punto de partida el móvil.

Responsive web design

Conoce más sobre el desarrollo de interfaz de usuario en un contexto mobile.

Pero no debemos obcecarnos, aunque el proceso de diseño y desarrollo comience en Mobile first, es importante no perder la perspectiva a la hora de hacer el marcado o maquetación, y visualizar el proyecto en su conjunto, teniendo en cuenta las características y la distribución de espacios en cada dispositivo. Esto ayudará a no tener que reescribir el HTML tropecientas veces.

/* Artículos en versión movil, con un padding superior moderado */


article 
{
   padding-top: 30px;
}


/* Los mismos artículos en una versión móvil o tablet, con un padding superior amplio */


@media (min-width: 600px) {
   article 
   {
      padding-top: 50px;
   }
}


/* Los mismos artículos en una versión escritorio, con un padding superior muy generoso */


@media (min-width: 1200px) {
   article 
   {
      padding-top: 90px;
   }
}

El diseño sensible o responsive design tiene en cuenta las características de cada dispositivo.

Responsive design media queries break points

Uno de los problemas con los que nos encontramos a la hora de diseñar en responsive es que las media queries no funcionan en las versiones antiguas de IE (grrrrr). Pero existen soluciones, la primera opción es cargar una hoja complementaria, a través de un condicional, para las versiones inferiores a IE9. Pero cada vez que realices un cambio en tu CSS origen tendrás que llevarlo a este ie.css. La opción recomendada es cargar un script que interpreta estas clases dentro del media queries haciéndolas entendibles para IE en sus versiones antiguas. La librería respond.js.

Una filosofía de trabajo

Resumiendo, cuando hablamos de Mobile first design no sólo nos referimos al aspecto visual. Mobile first design es una filosofía de trabajo en la que el usuario móvil está en el centro y todos los conceptos que influyen en el desarrollo de una web/aplicación se deben diseñar e implementar teniéndolo en cuenta a él y a su contexto de uso.

CUÁNDO

Viernes 21 de Agosto de 2015

QUIÉN

Nagore Frias

Front-end Developer y Marketing Digital

DÓNDE

COMPARTE


Nagore Frias

Front-end Developer y Marketing Digital

  • CUÁNDO:

    Viernes 21 de Agosto de 2015

  • DÓNDE:

  • QUÉ:
    Diseño de interacción , UI , UX
  • COMPARTE:
  • Blog