Mobile-first vs Desktop-first

Mobile-first и Desktop-first — это подходы в веб-дизайне и разработке, которые определяют, для каких устройств начинается проектирование дизайна и разработка в первую очередь.

Mobile-first подход получил широкое распространение в современном вебе благодаря возросшей популярности мобильных устройств. Однако есть типы задач (CRM / ERP системы, дашборды, эффектные имидживые проекты), для решения которых Desktop-first остаётся более подходящим.

Важно понимать, что в данном случае термин «минималистичные интерфейсы» не означает, что функциональность интерфейсов урезана. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UI & UX (англ. User Interface & User Experience, «пользовательский интерфейс и пользовательский опыт») именно для таких устройств. Далее, на основе мобильных интерфейсов, дорабатывается UI & UX для более широких экранов.

Чтобы пользователю было комфортнее работать с мобильным интерфейсом, при его разработке учитывают:

• удобство сенсорного взаимодействия (по интерактивным элементам должно быть удобно тапать пальцами);
• возможность навигации одной рукой (дотягивается ли большой палец, не мешает ли ему что-то при скролле?);
• приоритетность основного контента (не заставляйте пользователя доскролливать до контента, ради которого он зашёл).

Не ограничивайтесь эмуляцией мобильной версии в браузере, откройте сайт, который разрабатываете, на смартфоне и попробуйте выполнить все приходящие в голову действия одной рукой, пока готовите кофе.

Google преимущественно использует мобильную версию сайта для индексации (mobile-first-indexing).

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

С десктопным интерфейсом пользователь взаимодействует с помощью клавиатуры и мыши. Курсор менее требователен к области клика, чем палец, зато он всегда на экране: хорошей практикой будет следить, чтобы контент не появлялся и не пропадал с экрана при малейшем сдвиге мыши. Клавиатура в пользовательском интерфейсе может быть представлена (в виде подсказок о горячих клавишах) или нет, но в любом случае интерфейс должен на неё отзываться: например, отправится ли форма при нажатии на «Enter»?

В качестве примера рассмотрим адаптивный блок навигации, который на планшетах и десктопе располагается горизонтально, а на мобильных устройствах — вертикально (и появляется при клике на иконку).

Договоримся, что брейкпоинты будут такими:

• мобильные устройства: ширина экрана меньше 640 пикселей;
• планшеты: от 640 до 1024 пикселей;
• десктопные устройства: больше 1024 пикселей.

Прописываем стили для мобильного устройства в начале CSS-файла. Не оборачиваем их в медиавыражение. Ниже, внутри медиавыражения с соответствующим условием, пишем стили для планшета и десктопа:

        
          
            /* стили для мобильной версии */  .burger-icon {    cursor: pointer;  }  .navbar__links_list {    display: flex;    flex-direction: column;    gap: 25px;  }  /* стили для планшетной и десктопной версий */  @media (width >= 640px) {    .burger-icon {      display: none;    }    .navbar__links_list {      flex-direction: row;      margin: 0;    }  }  /* здесь могли бы быть дополнительные стили для десктопной версии */  @media (width >= 1024px) {}
            /* стили для мобильной версии */
  .burger-icon {
    cursor: pointer;
  }

  .navbar__links_list {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* стили для планшетной и десктопной версий */
  @media (width >= 640px) {
    .burger-icon {
      display: none;
    }

    .navbar__links_list {
      flex-direction: row;
      margin: 0;
    }
  }

  /* здесь могли бы быть дополнительные стили для десктопной версии */
  @media (width >= 1024px) {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Прописываем стили для десктопного устройства, а далее, с помощью медиавыражений с соответствующими условиями, дописываем стили для остальных разрешений:

        
          
            /* стили для десктопной версии */  .burger-icon {    display: none;  }  .navbar__links_list {    display: flex;    gap: 25px;  }  /* здесь могли бы быть дополнительные стили для планшетной версии */  @media (width < 1024px) {}  /* стили для мобильной версии */  @media (width < 640px) {    .burger-icon {      display: initial;      cursor: pointer;    }    .navbar__links_list {      flex-direction: column;    }  }
            /* стили для десктопной версии */
  .burger-icon {
    display: none;
  }

  .navbar__links_list {
    display: flex;
    gap: 25px;
  }

  /* здесь могли бы быть дополнительные стили для планшетной версии */
  @media (width < 1024px) {}

  /* стили для мобильной версии */
  @media (width < 640px) {
    .burger-icon {
      display: initial;
      cursor: pointer;
    }

    .navbar__links_list {
      flex-direction: column;
    }
  }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

Андрей Резников советует

Скопировать ссылку "Андрей Резников советует" Скопировано

Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются Mobile-first подхода:

• Tailwind
• Material UI

+ Развернуть