Собственнику завода не нужно разбираться в CSS. Но когда Вы принимаете сайт у подрядчика, полезно понимать одну вещь: сайт, который отлично выглядит на большом мониторе дизайнера, может разваливаться на телефоне снабженца. А снабженец всё чаще заходит именно с телефона: в цеху, в командировке, между встречами. Если на его экране кнопка заявки уехала за край, а таблица характеристик не читается, заявку Вы не получите. Адаптивная вёрстка это про то, чтобы такого не было. Ниже разберём, что такое адаптивный сайт и адаптивный дизайн, какие у них плюсы и минусы, какие размеры экранов учитывать, как сделать адаптивную вёрстку и как принять её у подрядчика.
Что такое адаптивная вёрстка простыми словами
Сайт состоит из блоков: шапка, меню, тексты, картинки, формы. Адаптивная вёрстка это когда эти блоки сами перестраиваются под ширину экрана. На мониторе меню идёт строкой, на телефоне сворачивается в кнопку-бургер. Таблица, которая на десктопе видна целиком, на телефоне становится прокручиваемой, а не вылезает за край. Один сайт, один адрес, но на каждом устройстве он удобен.
Это не то же самое, что отдельная мобильная версия (когда делают два разных сайта). Адаптивный подход это один сайт, который подстраивается. Так проще поддерживать и лучше для поиска.
Сам подход появился в 2010 году: веб-дизайнер Итан Маркотт описал его в статье «Responsive Web Design» для журнала A List Apart.
«Вместо того чтобы делать отдельный дизайн для каждого из всё растущего числа устройств, мы можем относиться к ним как к граням одного и того же опыта».
Адаптивный дизайн сайта, мобильная версия и резиновая вёрстка
Адаптивный дизайн веб-сайта часто путают с другими подходами. Разница такая:
| Подход | Как работает | Когда уместен |
|---|---|---|
| Адаптивный сайт | Один сайт, блоки перестраиваются под ширину экрана | Почти всегда, это стандарт |
| Отдельная мобильная версия | Второй сайт, часто на поддомене m.site.ru | Редко: дороже поддерживать, риск расхождений |
| Резиновая вёрстка | Блоки растягиваются пропорционально, но не перестраиваются | Как часть адаптивной, сама по себе на телефоне неудобна |
Адаптивная версия мобильного сайта, по сути, это тот же сайт, свёрстанный с учётом телефона. Адаптивная страница сайта ведёт себя одинаково по смыслу на любом экране, меняется только раскладка.
Преимущества и недостатки адаптивного сайта
| Преимущества | Недостатки |
|---|---|
| Один адрес и один контент для всех устройств, поиск не видит дублей | Сложнее и дольше в вёрстке, чем сайт под одну ширину |
| Правки вносятся один раз | Тяжёлые картинки и скрипты грузятся и на телефоне, если их не оптимизировать |
| Лучше для SEO: поиск оценивает мобильную версию | Сложные таблицы и калькуляторы требуют отдельной проработки под телефон |
| Дешевле поддержка, чем у двух сайтов | Нужна проверка на многих экранах перед сдачей |
Почему для производства это про заявки, а не про красоту
Три причины, по которым адаптивность бьёт по деньгам напрямую:
- Поиск ранжирует по мобильной версии. Google с 2023 года индексирует все сайты по мобильной версии, а Яндекс ещё в 2016 году запустил алгоритм «Владивосток», который учитывает удобство сайта на телефоне в мобильной выдаче. Кривая мобильная версия: ниже позиции, меньше трафика.
- Закупщики заходят с телефонов. Первое касание часто с мобильного: увидел в поиске, зашёл, оценил. Неудобно, ушёл к конкуренту
- Формы и звонки. Если на телефоне неудобно заполнить заявку или не работает клик по номеру, Вы теряете горячего клиента на последнем шаге
Мобильная версия давно не «приятное дополнение». Как её проверять и настраивать под поиск, подробнее разбирали в статье про SEO для мобильных.
Размеры экранов для адаптивной вёрстки
Адаптивная вёрстка размеры экранов учитывает не по моделям телефонов, а по диапазонам ширины. Точки, где раскладка перестраивается, называют брейкпоинтами. Типичный набор:
| Экраны | Ширина | Что обычно меняется |
|---|---|---|
| Телефоны | 320–480 px | Одна колонка, меню в кнопке, крупные кнопки |
| Большие телефоны и планшеты вертикально | 481–768 px | Одна-две колонки, таблицы с прокруткой |
| Планшеты горизонтально, небольшие ноутбуки | 769–1024 px | Две-три колонки, меню может раскрываться |
| Ноутбуки и мониторы | 1025–1440 px | Полная раскладка |
| Большие мониторы | от 1441 px | Контент ограничивают по ширине, чтобы строки не растягивались |
Мы свои страницы проверяем на ширине 390 px, это типичный современный телефон. Каждую статью перед публикацией открываем в эмуляторе на этой ширине и автоматически ищем элементы, которые выходят за край экрана: длинные строки кода, широкие таблицы, картинки без ограничения по ширине. Такие вещи на компьютере не видны вообще.
На что смотреть при приёмке сайта
Не нужно быть верстальщиком, чтобы проверить главное. Откройте сайт на своём телефоне и пройдите путь клиента:
| Что проверить | Как должно быть |
| Текст | Читается без увеличения пальцами, не вылезает за край |
| Кнопки | Крупные, попадаешь пальцем с первого раза, не слипаются |
| Меню | Сворачивается в бургер, открывается, все пункты доступны |
| Картинки и фото продукции | Не растянуты, не обрезаны, грузятся быстро |
| Таблицы характеристик | Прокручиваются вбок, а не ломают вёрстку |
| Форма заявки | Легко заполнить, поля видны, кнопка отправки на месте |
| Телефон | Клик по номеру сразу набирает звонок |
Проверьте на разных экранах: свой телефон, планшет, чужой смартфон поменьше. Отдельно посмотрите скорость загрузки на мобильном интернете: тяжёлый сайт на 4G грузится долго, и человек уходит.
Частые проблемы, которые всплывают уже после запуска
Классика: сайт приняли на десктопе, обрадовались красоте, а через месяц заметили, что с телефона половина заявок не доходит. Типичные болячки: горизонтальная прокрутка (приходится елозить сайт вбок), микроскопический текст, кнопка заявки под шапкой и её не видно, всплывающее окно на весь экран без крестика. Это не мелочи дизайна это дырки, через которые утекают лиды.
Такие вещи это часть более широкой темы ошибок при разработке сайта. Ловить их надо на приёмке, потому что потом переделка стоит дороже.
Как сделать адаптивный сайт
Сделать адаптивный сайт правильнее с самого начала, чем переделывать готовый. Порядок работы у хорошей студии такой:
- Прототип под телефон. Сначала решают, что главное на маленьком экране, потом добавляют детали для большого. Это подход mobile first, подробнее о прототипе в статье Прототип сайта: зачем он нужен до дизайна.
- Дизайн в нескольких ширинах. Макеты для телефона, планшета и компьютера, а не только десктоп.
- Гибкая сетка и медиазапросы. Блоки задаются в долях ширины, а стили меняются на брейкпоинтах.
- Картинки под экран. Телефону отдают уменьшенные изображения, чтобы страница грузилась быстрее.
- Проверка на устройствах и в эмуляторе браузера перед сдачей.
«Проектирование сначала для мобильных заставляет сосредоточиться на том, что действительно важно».
Адаптивный дизайн это ещё и вопрос продаж: какие блоки оставить на первом экране телефона, где поставить кнопку заявки. Об этом статьи Продающий дизайн сайта: как оформление влияет на заявки и о главном экране сайта. Если сайту нужно больше, чем адаптив, например работа как приложение, смотрите статью про PWA.
Как не попасть на кривую вёрстку
Простое правило: требуйте показать сайт на мобильном ещё до финальной оплаты и сами пройдите путь клиента с телефона. Хорошая студия делает адаптивность по умолчанию и не считает её доплатой. Если подрядчик говорит «мобильная версия отдельно за деньги» или сдаёт сайт, который Вы не проверяли на телефоне, это повод насторожиться.
Хотите убедиться, что Ваш сайт не теряет мобильные заявки? Проведём аудит: пройдём путь клиента с телефона и покажем, где утекают лиды. Первый разбор бесплатный. Адаптивную вёрстку мы закладываем в макеты с первого экрана в рамках разработки дизайна сайта, а новый сайт под ключ собираем в рамках услуги создание и доработка сайтов. Подробнее про редизайн на странице дизайн сайта для производства.
