Diseño web Mobile first (móvil primero) y Drupal 8

Tradicionalmente, el diseño de una página web toma como lienzo de partida una pantalla más o menos grande, la de un monitor de trabajo.  Por ejemplo de resolución de 1024x768px, resolución estándar de los monitores de trabajo. 

Con la incursión de las pantallas pequeñas: teléfonos inteligentes, tabletas, etc. se consideró adaptar estos diseños para que se puedan ver de manera cómoda también en estas pantallas. Esta adaptación ha sido posible gracias a las técnicas de hojas de estilos y programación para hacer que el diseño pueda ser fluido. Es lo que se conoce como diseño "responsive".

Diseño web responsive o adatpativo

Diseño responsive adaptativo
 
Este enfoque ha empezado a cambiar, el concepto de diseño Mobile First invierte el proceso, no significa adaptar un contenido concebido en pantallas grandes a pantallas más pequeñas sino concebir un diseño en pantallas pequeñas e ir adaptándolo hacia pantallas mayores. 

Mobile first (móvil primero)

Mobile First - Móvil primero Drupal

¿Porqué hacer esto? Porqué si lo hacemos de grande siempre hay aspectos que quedan por resolver y se convierten en imprevistos. Estos aspectos afectan al concepto de desarrollo y también a la usabilidad. Por ejemplo, en una tienda online pueda que tengamos una columna lateral de filtros de búsqueda compleja que nos damos cuenta que no tiene cabida en pantalla pequeña, adaptarla supone un problema de desarrollo porqué hacerlo bien es costoso. A la práctica se opta por rehacerlo "mal" en la mayoría de los casos, o rehacerlo bien pero totalmente diferente para que sea usable en otros pocos casos. La segunda opción es la buena, pero entonces el usuario que en versión Escritorio está acostumbrado a el filtro (en tal sitio y de tal modo) pasa a móvil y queda algo desorientado. Pueda que la desorientación le duré medio segundo, pero es un corte que en el que la web no le parecerá que haya fluido de manera natural. Es como si un cliente está conduciendo un Ferrari y de repente se le ha movido el retrovisor, puede que le lleve un momento reajustarlo, pero también pensará... ¿y esto le pasa a un Ferrari?

En cambio sabemos que esa búsqueda que podemos poner en móvil, solo puede mejorar en versión escritorio y además que va a seguir el concepto de funcionamiento. 

Drupal 8 y Mobile (móvil primero)

Así como en términos de diseño gráfico hemos empezado a cambiar el concpeto a Mobile first (móvil primero). Drupal lo hecho en términos de desarrollo web con su nueva versión de Drupal 8.

Mejoras Drupal 8

Drupal 8, ha mejorado el sistema de plantillas para mejorar sus herramientas para hacer web responsive: el proceso mediante el cual el código leído por el navegador detecta los tamaños de pantalla y ajusta los diseños para que coincidan con un tamaño de pantalla determinado.

Las mejoras incluyen más flexibilidad para que los desarrolladores puedan conseguir diseños más precisos adaptados a cada caso, también sistemas aseguran la detección de fallos o bugs: lo típico que la web se vea bien en dispositivo pongamos Iphone 5 y mal en el mismo dispositivo con otro navegador. También incluye prestaciones para agilizar la carga, por ejemplo la facilidad para proponer no solo que una imagen se adapte para una determinado ancho de pantalla, sino que se muestre otra versión de la misma imagen que pese menos. Es decir: imaginad que tenemos uno de estos diseños con imagen de inicio a toda pantalla que queremos que se vea bien desde móviles, uincluso (smartwatches) a pantallas extra panorámicas. La imagen que debemos cargar tiene que ser muy grande para mostrarse nítida en pantallas grandes, pero si esa misma imagen simplemente se redimensiona visualmente en la pantalla pequeña tenemos un problema de carga importante. Drupal 8 permite que hagamos con facilidad recortes internamente de la misma imagen y muestre la imagen al peso óptimo dependiendo del dispositvo... 

Así como esta parte es fácil de explicar (la del diseño responsive e imagen del ejemplo expuesto), a nivel técnico y de cara a los desarrolladores, Drupal 8 introduce muchas mejoras para que a la vez que desarrollamos para un dispositivo tengamos en cuenta programar para los otros de manera más friendly.