Skip to content

Commit

Permalink
Вносит мелкие правки по части пункутации в статью и блок "На практике"
Browse files Browse the repository at this point in the history
  • Loading branch information
reznikovAndrey committed Aug 6, 2024
1 parent b3dc900 commit ffd8d8c
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 30 deletions.
84 changes: 55 additions & 29 deletions css/mobile-first-vs-desktop-first/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 фокус на **использование клавиатуры и мыши**.

## Как пишется

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

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

Expand All @@ -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
Expand All @@ -79,20 +95,30 @@ 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;
}

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

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

.navbar__links_list {
flex-direction: column;
row-gap: 8px;
}
}
```
Expand Down
Original file line number Diff line number Diff line change
@@ -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)

0 comments on commit ffd8d8c

Please sign in to comment.