doka-guide · solarrust · Aug 27, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Адаптивная вёрстка — Mobile-first vs Desktop-first — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap">
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: "Roboto", sans-serif;
+      background-color: #18191C;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+    }
+
+    header {
+      border: 1px solid #000000;
+      padding: 20px;
+      background-color: #FFFFFF;
+    }
+
+    main {
+      color: #FFFFFF;
+      padding: 20px;
+    }
+
+    a {
+      border-radius: 3px;
+      color: inherit;
+      text-decoration: none;
+      font-style: italic;
+      transition: background-color 0.2s linear;
+    }
+
+    a:hover {
+      outline-width: 0;
+      color: #FFFFFF;
+      background-color: #000000;
+      transition: all 0.2s linear;
+    }
+
+    pre {
+      margin-block-start: 1em;
+      font-size: inherit;
+    }
+
+    h1 {
+      margin-bottom: 17px;
+      font-size: 1.625rem;
+      font-weight: 500;
+    }
+
+    .burger-icon {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .link_active {
+      text-decoration: underline;
+    }
+
+    .navbar {
+      line-height: 1;
+    }
+
+    .navbar__links_list {
+      display: flex;
+      flex-direction: column;
+      gap: 25px;
+      margin-block-start: 25px;
+    }
+
+    .navbar__links_list>li {
+      list-style-type: none;
+    }
+
+    .navbar__links_list_hidden {
+      display: none;
+    }
+
+    .active-styles-example {
+      padding: 20px;
+      background-color: #2E9AFF;
+      color: #18191c;
+      font-size: 18px;
+    }
+
+    #flex-direction,
+    #current-screen-width,
+    #burger-icon {
+      background-color: #000000;
+      color: #FFFFFF;
+      border-radius: 3px;
+    }
+
+    .text-list {
+      list-style-type: none;
+    }
+
+    .text-list-item {
+      position: relative;
+      padding-inline-start: 25px;
+      text-transform: lowercase;
+    }
+
+    .text-list-item + .text-list-item {
+      margin-block-start: 10px;
+    }
+
+    .text-list-item::before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 0;
+      width: 14px;
+      height: 14px;
+      background-color: currentColor;
+    }
+
+    @media (width >= 640px) {
+      header {
+        padding: 20px 40px;
+      }
+
+      main {
+        padding: 40px;
+      }
+
+      .active-styles-example {
+        margin-inline-start: auto;
+        width: 65%;
+        padding: 25px 40px;
+      }
+
+      .burger-icon {
+        display: none;
+      }
+
+      .navbar__links_list {
+        flex-direction: row;
+        margin: 0;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar">
+      <button class="burger-icon" onclick="handleClick(this)">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 26 26" aria-hidden="true">
+          <path stroke="#000" stroke-linecap="round" stroke-width="4" d="M3 4h20M3 13h20M3 22h20"/>
+        </svg>
+      </button>
+      <ul class="navbar__links_list">
+        <li>
+          <a href="#" class="link_active">Интересные факты</a>
+        </li>
+        <li>
+          <a href="#">Происхождение</a>
+        </li>
+        <li>
+          <a href="#">История одомашнивания</a>
+        </li>
+        <li>
+          <a href="#">Физиология</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <h1>Интересные факты</h1>
+    <ul class="text-list">
+      <li class="text-list-item">В каждом кошачьем ухе находится более чем 30 мускулов;</li>
+      <li class="text-list-item">В среднем, коты спят по 16-18 часов в день, что составляет более 70% кошачьей жизни;</li>
+      <li class="text-list-item">Кошки не чувствуют вкуса сладкого;</li>
+      <li class="text-list-item">У кошек и людей за управление эмоциональным состоянием отвечают одинаковые отделы головного мозга.</li>
+    </ul>
+  </main>
+
+  <div class="active-styles-example">
+    <p>Текущая ширина экрана:
+      <code><span id="current-screen-width"></span>px</code>
+    </p>
+<pre>
+.navbar__links_list {
+&nbsp;&nbsp; flex-direction: <span id="flex-direction"></span>;
+}
+
+.burger-icon {
+&nbsp;&nbsp; display: <span id="burger-icon"></span>;
+}
+</pre>
+  </div>
+
+  <script>
+    const linksList = document.querySelector('ul');
+    const flexDirection = document.getElementById('flex-direction');
+    const screenWidth = document.getElementById('current-screen-width');
+    const burgerIconStyle = document.getElementById('burger-icon')
+
+    let isOpen = false;
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    function handleResize() {
+      screenWidth.innerText = window.innerWidth;
+
+      if (window.innerWidth >= 640) {
+        linksList.classList.remove('navbar__links_list_hidden')
+        flexDirection.innerText = 'row'
+        burgerIconStyle.innerText = 'none'
+
+      } else {
+        flexDirection.innerText = 'column'
+        burgerIconStyle.innerText = 'initial'
+
+        if (!isOpen) {
+          linksList.classList.add('navbar__links_list_hidden')
+        }
+      }
+    }
+
+    function handleClick() {
+      if (isOpen) {
+        linksList.classList.add('navbar__links_list_hidden')
+        isOpen = false
+      } else {
+        linksList.classList.remove('navbar__links_list_hidden')
+        isOpen = true
+      }
+    }
+  </script>
+</body>
+
+</html>
@@ -0,0 +1,126 @@
+---
+title: "Mobile-first vs Desktop-first"
+description: "Разбираем основные подходы вёрстки и отвечаем на вопрос «С какого экрана начать верстать?»"
+authors:
+  - rezn1kovAndrey
+contributors:
+  - skorobaeus
+related:
+  - css/pixel-perfect
+  - html/seo-for-beginners
+  - tools/site-readers
+  - tools/web-app-types
+tags:
+  - article
+---
+
+## Кратко
+
+_Mobile-first_ и _Desktop-first_ — это подходы в веб-дизайне и разработке, которые определяют, для каких устройств начинается проектирование дизайна и разработка в первую очередь.
+
+Mobile-first подход получил широкое распространение в современном вебе благодаря возросшей популярности мобильных устройств. Однако есть типы задач (CRM / ERP системы, дашборды, эффектные имидживые проекты), для решения которых Desktop-first остаётся более подходящим.
+
+## Mobile-first
+
+### Минималистичные интерфейсы
+
+Важно понимать, что в данном случае термин «минималистичные интерфейсы» не означает, что функциональность интерфейсов урезана. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UI & UX (англ. User Interface & User Experience, «пользовательский интерфейс и пользовательский опыт») именно для таких устройств. Далее, на основе мобильных интерфейсов, дорабатывается UI & UX для более широких экранов.
+
+### Мобильные сценарии использования
+
+Чтобы пользователю было комфортнее работать с мобильным интерфейсом, при его разработке учитывают:
+
+- удобство сенсорного взаимодействия (по интерактивным элементам должно быть удобно тапать пальцами);
+- возможность навигации одной рукой (дотягивается ли большой палец, не мешает ли ему что-то при скролле?);
+- приоритетность основного контента (не заставляйте пользователя доскролливать до контента, ради которого он зашёл).
+
+Не ограничивайтесь эмуляцией мобильной версии в браузере, откройте сайт, который разрабатываете, на смартфоне и попробуйте выполнить все приходящие в голову действия одной рукой, пока готовите кофе.
+
+### SEO
+
+Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)).
+
+## Desktop-first
+
+### Богатая функциональность
+
+Благодаря большому размеру экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают расширенную функциональность. Например, интерфейс аналитического дашборда может вмещать редактируемые таблицы с большим количеством столбцов.
+
+### Десктопные сценарии использования
+
+С десктопным интерфейсом пользователь взаимодействует с помощью клавиатуры и мыши. Курсор менее требователен к области клика, чем палец, зато он всегда на экране: хорошей практикой будет следить, чтобы контент не появлялся и не пропадал с экрана при малейшем сдвиге мыши. Клавиатура в пользовательском интерфейсе может быть представлена (в виде подсказок о горячих клавишах) или нет, но в любом случае интерфейс должен на неё отзываться: например, отправится ли форма при нажатии на «Enter»?
+
+## Как пишется
+
+В качестве примера рассмотрим адаптивный блок навигации, который на планшетах и десктопе располагается горизонтально, а на мобильных устройствах — вертикально (и появляется при клике на иконку).
+
+Договоримся, что брейкпоинты будут такими:
+
+- мобильные устройства: ширина экрана меньше 640 пикселей;
+- планшеты: от 640 до 1024 пикселей;
+- десктопные устройства: больше 1024 пикселей.
+
+### Mobile-first
+
+Прописываем стили для мобильного устройства в начале CSS-файла. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием, пишем стили для планшета и десктопа:
+
+```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) {}
+```
+
+### Desktop-first
+
+Прописываем стили для десктопного устройства, а далее, с помощью медиавыражений с соответствующими условиями, дописываем стили для остальных разрешений:
+
+```css
+  /* стили для десктопной версии */
+  .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;
+    }
+  }
+```
+
+<iframe title="Адаптивная навигация" src="demos/adaptive-navbar/" height="590"></iframe>
@@ -0,0 +1,3 @@
+Современные 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)