diff --git a/css/mobile-first-vs-desktop-first/index.md b/css/mobile-first-vs-desktop-first/index.md index 7464b6a9666..44ed8532f7f 100644 --- a/css/mobile-first-vs-desktop-first/index.md +++ b/css/mobile-first-vs-desktop-first/index.md @@ -16,33 +16,39 @@ tags: _Mobile-first_ и _Desktop-first_ — это подходы в веб-дизайне и разработке, которые определяют то, для каких устройств начинается проектирование дизайна и разработка в первую очередь. -Из-за возросшей популярности мобильных устройств, _Mobile-first_ подход в современном вебе имеет более широкое распространение. Однако, существуют определённые типы приложений (CRM / ERP системы, различные дашборды), для которых _Desktop-first_ является более подходящим. +Из-за возросшей популярности мобильных устройств, Mobile-first подход в современном вебе имеет более широкое распространение. Однако, существуют определённые типы приложений (CRM / ERP системы, различные дашборды), для которых _Desktop-first_ является более подходящим. -## Особненности _Mobile-first_ подхода +## Mobile-first -##### Минималистичне интерфейсы -Важно понимать, что в данном случае термин **минималистичные интерфейсы** не означает, что интерфейсы содержат урезанную функциональность. Минималистичность здесь - это следствие небольшого размера экрана. В первую очередь создается UX (user experience) именно для таких устройств. Далее, используя эти интерфейсы как основу, улучшается UX для более широких экранов. +#### Минималистичне интерфейсы + +Важно понимать, что в данном случае термин **минималистичные интерфейсы** не означает, что интерфейсы содержат урезанную функциональность. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UX (user experience) именно для таких устройств. Далее, используя эти интерфейсы как основу, улучшается UX для более широких экранов. + +### Мобильные сценарии использования -#### Мобильные сценарии использования С точки зрения UX в первую очередь фокус на: -- сенсорное взаимодействие, -- навигацию одной рукой, -- основной контент; -#### SEO -Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)) +- сенсорное взаимодействие; +- навигацию одной рукой; +- основной контент. + +### SEO + +Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)). -## Особненности _Desktop-first_ подхода +## Desktop-first -#### Богатая функциональность -Из-за большого размера экрана, как правило, не возникает проблем с гармоничным расположением элементов интерфейса, которые предлагают насыщенную функциональность (например, в аналитических дашбордах это могут быть редактируемые таблицы с большим количеством столбцов). +### Богатая функциональность -#### Десктопные сценарии использования -С точки зрения UX фокус на **использование пользователем клавиатуры и мыши**. +Из-за большого размера экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают насыщенную функциональность. Например, в аналитических дашбордах это могут быть редактируемые таблицы с большим количеством столбцов. + +### Десктопные сценарии использования + +С точки зрения UX фокус на **использование клавиатуры и мыши**. ## Как пишется -Представим, что нам необходимо сверстать страницу с карточками, которые в десктопной версии располагаются в ряд, а в мобильной - в колонку. +В качестве примера рассмотрим адаптивный блок навигации, который на планшетах и десктопе располагается горизонтально, а на мобильных устройствах - вертикально (появляется при клике на иконку). Договоримся, что брейкпоинты будут такими: @@ -52,25 +58,35 @@ Google преимущественно использует мобильную в ### Mobile-first -Прописываем стили для мобильного устройства в начале файла с CSS. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием пишем стили для планшета и десктопа. +Прописываем стили для мобильного устройства в начале файла с CSS. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием, пишем стили для планшета и десктопа. ```css - .container { + .burger-icon { + cursor: pointer; + } + + .navbar__links_list { display: flex; flex-direction: column; - row-gap: 8px; + gap: 16px; + margin: 8px 0 8px 0; + padding: 0; } /* здесь могли бы быть дополнительные стили для планшетной версии */ - @media (width >= 640px) {} + @media (width >= 640px) { + .burger-icon { + display: none; + } - /* стили для десктопной версии */ - @media (width >= 1024px) { - .container { + .navbar__links_list { flex-direction: row; - column-gap: 8px; + margin: 0; } } + + /* здесь могли бы быть дополнительные стили для десктопной версии */ + @media (width >= 1024px) {} ``` ### Desktop-first @@ -79,10 +95,16 @@ Google преимущественно использует мобильную в ```css /* стили для десктопной версии */ - .container { + .burger-icon { + display: none; + } + + .navbar__links_list { display: flex; - flex-direction: row; - column-gap: 8px; + margin: 0; + gap: 16px; + margin: 8px 0 8px 0; + padding: 0; } /* здесь могли бы быть дополнительные стили для планшетной версии */ @@ -90,9 +112,13 @@ Google преимущественно использует мобильную в /* стили для мобильной версии */ @media (width < 640px) { - .container { + .burger-icon { + display: initial; + cursor: pointer; + } + + .navbar__links_list { flex-direction: column; - row-gap: 8px; } } ``` diff --git a/css/mobile-first-vs-desktop-first/practice/reznikovandrey.md b/css/mobile-first-vs-desktop-first/practice/reznikovandrey.md index c8226bd86a8..517ff5f8445 100644 --- a/css/mobile-first-vs-desktop-first/practice/reznikovandrey.md +++ b/css/mobile-first-vs-desktop-first/practice/reznikovandrey.md @@ -1,3 +1,3 @@ -Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются _Mobile-first_ подхода: +Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются Mobile-first подхода: - [Tailwind](https://tailwindcss.com/docs/responsive-design#working-mobile-first) - [Material UI](https://mui.com/material-ui/getting-started/usage/#responsive-meta-tag)