doka-guide · solarrust · Aug 27, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
@@ -0,0 +1,203 @@
+<!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&display=swap">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    body {
+      font-family: Roboto, sans-serif;
+      margin: 0;
+      background-color: #18191c;
+    }
+
+    header {
+      background-color: #2E9AFF;
+    }
+
+    main {
+      display: flex;
+      flex-direction: column;
+      color: #2E9AFF;
+      padding: 8px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    pre {
+      margin: 0;
+    }
+
+    h1 {
+      margin: 0;
+    }
+
+    .navbar {
+      padding: 8px;
+    }
+
+    .burger-icon {
+      cursor: pointer;
+    }
+
+    .burger-icon:hover,
+    a:hover {
+      opacity: .5;
+      transition: opacity 100ms ease-in-out;
+    }
+
+    .link_active {
+      text-decoration: underline;
+    }
+
+    .navbar__links_list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin: 8px 0 8px 0;
+      padding: 0;
+    }
+
+    .navbar__links_list>li {
+      list-style-type: none;
+    }
+
+    .navbar__links_list_hidden {
+      display: none;
+    }
+
+    .active-styles-example {
+      width: fit-content;
+      margin-left: auto;
+      padding: 8px;
+      background-color: #ff8630;
+      color: #18191c;
+    }
+
+    #flex-direction,
+    #current-screen-width,
+    #burger-icon {
+      text-decoration: underline;
+    }
+
+    @media (width >=640px) {
+      .burger-icon {
+        display: none;
+      }
+
+      .navbar__links_list {
+        flex-direction: row;
+        margin: 0;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar">
+      <i class="fa fa-bars burger-icon" onclick="handleClick(this)"></i>
+      <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>
+      <li>В каждом кошачьем ухе находится более чем 30 мускулов.</li>
+      <li>В среднем, коты спят по 16-18 часов в день, что составляет более 70% кошачьей жизни.</li>
+      <li>Кошки не чувствуют вкуса сладкого.</li>
+      <li> У кошек и людей за управление эмоциональным состоянием отвечают одинаковые отделы головного мозга.</li>
+    </ul>
+
+    <div class="active-styles-example">
+      <h3>Текущая ширина экрана:
+        <span id="current-screen-width"></span> px
+      </h3>
+
+      <div>.navbar__links_list {</div>
+      <div>&nbsp;&nbsp; flex-direction:
+        <span id="flex-direction"></span>;
+      </div>
+      <div>}</div>
+
+      <br />
+
+      <div>.burger-icon {</div>
+      <div>&nbsp;&nbsp; display:
+        <span id="burger-icon"></span>;
+      </div>
+      <div>}</div>
+    </div>
+  </main>
+
+  <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,127 @@
+---
+title: "Mobile-first vs Desktop-first"
+description: "Разбираем основные подход вёрстки, отвечающие на вопрос «С какого экрана начать верстать?»"
+authors:
+  - rezn1kovAndrey
+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
+
+### Минималистичне интерфейсы
+
+Важно понимать, что в данном случае термин **минималистичные интерфейсы** не означает, что интерфейсы содержат урезанную функциональность. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UX (user experience) именно для таких устройств. Далее, используя эти интерфейсы как основу, улучшается UX для более широких экранов.
+
+### Мобильные сценарии использования
+
+С точки зрения UX в первую очередь фокус на:
+
+- сенсорное взаимодействие;
+- навигацию одной рукой;
+- основной контент.
+
+### SEO
+
+Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)).
+
+## Desktop-first
+
+### Богатая функциональность
+
+Из-за большого размера экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают насыщенную функциональность. Например, в аналитических дашбордах это могут быть редактируемые таблицы с большим количеством столбцов.
+
+### Десктопные сценарии использования
+
+С точки зрения UX фокус на **использование клавиатуры и мыши**.
+
+## Как пишется
+
+В качестве примера рассмотрим адаптивный блок навигации, который на планшетах и десктопе располагается горизонтально, а на мобильных устройствах - вертикально (появляется при клике на иконку).
+
+Договоримся, что брейкпоинты будут такими:
+
+- мобильные устройства: ширина экрана меньше 640 пикселей;
+- планшеты: ширина экрана от 640 до 1024 пикселей;
+- десктопные устройства: экраны с шириной больше 1024 пикселей.
+
+### Mobile-first
+
+Прописываем стили для мобильного устройства в начале файла с CSS. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием, пишем стили для планшета и десктопа.
+
+```css
+  /* стили для мобильной версии */
+  .burger-icon {
+    cursor: pointer;
+  }
+
+  .navbar__links_list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin: 8px 0 8px 0;
+    padding: 0;
+  }
+
+  /* стили для планшетной и десктопной версий */
+  @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;
+    margin: 0;
+    gap: 16px;
+    margin: 8px 0 8px 0;
+    padding: 0;
+  }
+
+  /* здесь могли бы быть дополнительные стили для планшетной версии */
+  @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="420"></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)