Люк Вроблевски дал этому подходу название в 2009 году, но логика уже тогда была актуальной. Телефоны стали основным способом доступа к интернету, и разработка макетов для настольных компьютеров сначала вынуждала дизайнеров позже втискивать сложные элементы на маленькие экраны. Подход «mobile-first» меняет порядок. Начинаем с самого маленького экрана, определяем, что важнее всего, а затем расширяем до макетов для планшетов и настольных компьютеров.

Ограничение оказывается продуктивным. Узкое поле зрения заставляет проводить сортировку задач. Навигация сворачивается в меню. Контент перемещается в одну колонку. Каждая функция должна оправдывать занимаемое ею место. Дизайнеры разрабатывают удобные для касания области, учитывают использование одной рукой и планируют работу с медленными соединениями. Когда дизайн расширяется до большего экрана, дополнительное пространство используется для создания «дышащей» зоны и дополнительных панелей, а не для загромождения новыми элементами.

Основные практики

• Начинайте создавать прототипы с ширины экрана телефона.
• Строго устанавливайте приоритеты в иерархии контента.
• При разработке дизайна сенсорных элементов необходимо учитывать не менее 44 пикселей.
• Масштабирование для планшетов и настольных компьютеров выполняется в последнюю очередь.

Адаптивный дизайн и подход «сначала мобильные устройства» часто идут рука об руку. Подход «сначала мобильные устройства» задает приоритет. Адаптивный дизайн отвечает за адаптацию к различным контрольным точкам.