Luke Wroblewski le dio nombre a esta práctica en 2009, pero la lógica ya era evidente. Los teléfonos se habían convertido en la principal forma de acceder a internet, y diseñar primero las interfaces para ordenadores de escritorio obligaba a los diseñadores a adaptar la complejidad a las pantallas pequeñas posteriormente. El enfoque "mobile-first" invierte este orden. Se empieza con la pantalla más pequeña, se decide qué es lo más importante y luego se amplía a las interfaces para tabletas y ordenadores de escritorio.

La limitación resulta productiva. Un área de visualización reducida obliga a priorizar. La navegación se reduce a un menú. El contenido se organiza en una sola columna. Cada función debe justificar su espacio. Los diseñadores diseñan zonas de interacción fáciles de usar con el pulgar, consideran el uso con una sola mano y prevén conexiones lentas. Cuando el diseño se adapta a una pantalla más grande, el espacio adicional se utiliza para crear un espacio de ventilación y paneles secundarios, en lugar de saturarlo con nuevos elementos innecesarios.

Prácticas básicas

• Comience a crear los wireframes con el ancho del teléfono.
• Prioriza la jerarquía del contenido sin contemplaciones.
• El diseño táctil apunta a un mínimo de 44 píxeles.
• La adaptación a tabletas y ordenadores de escritorio se realiza al final.

El diseño responsivo y el enfoque mobile-first suelen ir de la mano. El enfoque mobile-first establece la prioridad. El diseño responsivo gestiona la adaptación a través de los diferentes puntos de interrupción.