Orientación en diseño web: Diseñando Mobile-First


Continuando con las tendencias del diseño en este 2014 vamos directo hacia la web del futuro, hoy las tendencias van desde colores, tamaños y estilos, ¿pero existen formas o estructuras para diseñar?

Bueno, sabemos que estamos en un momento en el que nadie le pone peros al diseño responsivo, y no es porque tenga estilo, bueno sí, pero más que eso, la razón está en que estamos viviendo en la era de los dispositivos móviles, en los inicios del diseño responsivo primero estaba la vista de escritorio y al final la vista del móvil.

La tendencia mobile-first se plantea como la metodología de trabajo lógica en diseño web. Empezar por lo pequeño y comenzar a crecer.


¿Qué es lo que hace mejor a Mobile-First que la forma tradicional de diseño web?

Hay razones bastantes convincentes, te diré tres.

La primera, es que concibes una percepción global de todo el conjunto y del contenido desde el inicio. Además puedes y debes crear una jerarquía del contenido que vayas a poner según su relevancia y ubicación, esto es muy importante porque debes seleccionar el contenido que debe o no estar en las resoluciones menores.

La segunda, el rendimiento es mejor en resoluciones menores. Lo que hacíamos en un inicio era que todas nuestras clases de CSS las teníamos preestablecidas para la vista de escritorio y mediante los mediaqueries sobrescribíamos las reglas de escritorio para los dispositivos móviles. Esto hacia que, en el momento en el que abrías la página en tu Smartphone requería de tiempo para poder visualizarla en su completo esplendor.


Y esto no es óptimo para el aparato, ya que los dispositivos de resolución inferior son sobrecargados de reglas, más de las necesarias. Un ejemplo: cuando nosotros queremos cargar una imagen con cierta resolución, suponiendo unos 200kb, y la resolución debe ser menor de 600px, todo esto en vista de escritorio, pero cuando vamos al responsivo, y no queremos ya dicho fondo, aunque nosotros tengamos un display: none; esto el dispositivo de resolución menor sigue descargando la imagen.

En el mobile-first no sucede esto, se trabaja de una manera más eficiente, aquí no vamos sobrescribiendo reglas sino que las vamos creando. Una manera más fácil de entenderlo es que vamos de lo menos esencial a lo que más se necesita en una mayor resolución.

La tercera, si aplicas esto, serás un diseñador enfocado hacia el futuro. Vete olvidando de las resoluciones estándar de un iPhone o de un iPad. Diseña según el contenido, establece saltos y mediaqueries que te sean necesarios para una mejor experiencia de usuario con esos contenidos, los menús, las imágenes, los sidebars, etc… ¿Sabes cuál será la resolución de los dispositivos futuros? Prepara a tu web para que cuando estos lleguen, todo se vea de forma natural y correcta.


Analizando esto es lógico creer que esto llegaría a pasar, después de trabajar con diseños responsivos, reformular la estructura convencional con la que trabajamos, no es fácil adaptarse pero te aseguro que hacer webs más rápidas y correctas es posible, empecemos de menos a más, muchos de los estilos a la hora de diseñar nos muestran lo limpios y elegantes que pueden ser, pero no solo eso sino la rapidez con la que podemos navegar a través de ellos.

Piensa en grande, ve hacia donde el viento sopla, ve hacia el futuro… ¿Y tú, ya diseñas mobile-first?

0 comentarios: