Большинство посетителей заходит на сайты с телефона, а не с компьютера. Если сайт делали давно и мобильная версия — это просто сжатая копия десктопной, пользоваться им на маленьком экране неудобно: текст мелкий, кнопки не туда попадают, меню разворачивается криво. Адаптивная вёрстка делает сайт одинаково удобным на любом экране — от небольшого смартфона до широкого монитора.
Кому и когда нужна адаптивная вёрстка
Услуга актуальна в нескольких ситуациях. Первая — сайт вообще не адаптирован под мобильные устройства: на телефоне он показывается уменьшенной версией десктопа, приходится увеличивать масштаб, чтобы прочитать текст. Вторая — адаптивность есть, но сделана формально: элементы просто сжимаются, а не перестраиваются, из-за чего часть контента становится нечитаемой или выпадает за пределы экрана. Третья — сайт создавался как адаптивный, но с тех пор добавлялись новые блоки и разделы без учёта мобильной версии, и она перестала быть цельной.
Если помимо верстки требуется обновление визуального стиля — цветов, шрифтов, композиции, — вероятно, стоит рассмотреть редизайн сайта, в рамках которого адаптивность прорабатывается изначально вместе с новым дизайном. Если же дизайн устраивает, а проблема именно в отображении на разных экранах — адаптивная вёрстка решает задачу быстрее и дешевле.
Что входит в услугу
Аудит текущей верстки
Проверяем, как сайт отображается на разных разрешениях экрана, и фиксируем конкретные проблемы.
Переработка сетки страниц
Перестраиваем расположение блоков так, чтобы они логично складывались на узких экранах, а не просто сжимались.
Адаптация навигации
Проектируем удобное мобильное меню: гамбургер-меню, выпадающие списки, доступные крупным пальцем элементы.
Оптимизация изображений
Подключаем показ изображений разного размера в зависимости от экрана, чтобы не грузить тяжёлые картинки на телефон.
Проверка форм и кнопок
Делаем интерактивные элементы удобными для нажатия пальцем — размер, отступы, зоны касания.
Тестирование на реальных устройствах
Проверяем результат не только в эмуляторе браузера, но и на реальных смартфонах и планшетах разных марок.
Подход к адаптивной вёрстке
Мы проектируем вёрстку по принципу «мобильный вперёд»: сначала продумываем, как страница выглядит и работает на маленьком экране, а затем расширяем макет под более широкие разрешения — планшет, ноутбук, большой монитор. Такой порядок логичен, потому что на маленьком экране меньше места и приходится решать, что действительно важно показать в первую очередь, а что можно убрать в раскрывающиеся блоки или второстепенные разделы.
Подробнее о том, почему мобильная версия сегодня важнее десктопной и как это меняет подход к проектированию, можно прочитать в статье «Адаптивный дизайн: почему мобильная версия важнее десктопной».
$ проверка отображения > экран 375 px: меню, кнопки, формы — корректно > экран 768 px: сетка блоков перестроена — корректно > экран 1440 px: широкий макет — корректно
Этапы работы
- Аудит текущего сайта. Проверяем отображение на нескольких контрольных разрешениях экрана и составляем список проблем.
- Прототип мобильной версии. Прорабатываем порядок и расположение блоков для маленьких экранов.
- Вёрстка для мобильных. Реализуем адаптивную сетку, меню, формы и элементы управления.
- Расширение под планшет и десктоп. Дорабатываем отображение для промежуточных и широких экранов.
- Тестирование на реальных устройствах. Проверяем работу на нескольких моделях смартфонов и в разных браузерах.
- Публикация и финальная проверка. Переносим изменения на боевой сайт и повторно тестируем в реальных условиях.
На каких платформах делаем адаптивную вёрстку
Адаптивность можно доработать практически на любой платформе, если её архитектура это позволяет. Чаще всего работаем с сайтами на WordPress, 1С-Битрикс, Tilda и самописными решениями на HTML и CSS.
WordPress
Дорабатываем шаблон темы и стили, при необходимости меняем структуру блоков через конструктор страниц.
1С-Битрикс
Перерабатываем шаблоны компонентов и инфоблоков с учётом мобильного отображения.
Tilda
Настраиваем мобильную версию через встроенные инструменты платформы и код-блоки для нестандартных случаев.
Вёрстка с нуля
Для новых сайтов сразу проектируем адаптивную структуру на чистом HTML, CSS и минимальном JavaScript.
Стоимость
| Объём работ | Стоимость | Срок |
|---|---|---|
| Адаптация одной страницы | от 6 000 ₽ | от 2 рабочих дней |
| Адаптация ключевых разделов (3–5 страниц) | от 15 000 ₽ | от 5 рабочих дней |
| Полная адаптивная вёрстка сайта | от 35 000 ₽ | от 10 рабочих дней |
| Адаптивная вёрстка нового сайта «с нуля» | от 25 000 ₽ | от 8 рабочих дней |
Стоимость зависит от количества уникальных шаблонов страниц и сложности интерактивных элементов. Актуальные цены на все услуги — на странице цены.
Что нужно от заказчика
- Доступ к текущему сайту и его исходному коду или административной панели
- Список страниц, которые нужно адаптировать в первую очередь, если бюджет ограничен
- Информация о том, какие устройства и браузеры используют ваши клиенты чаще всего
- Фирменные шрифты и логотип, если их нужно корректно вписать в мобильную версию
- Время на тестирование готового результата перед публикацией
Типичные ошибки в мобильной версии сайта
- Текст и кнопки просто уменьшаются пропорционально экрану вместо перестройки макета
- Меню на телефоне занимает весь экран и скрывает контент без возможности быстро его закрыть
- Формы сложно заполнять — маленькие поля, мелкий текст, не тот тип клавиатуры для номера или почты
- Изображения грузятся в исходном тяжёлом размере даже на маленьком экране, из-за чего сайт медленно открывается
- Важные кнопки и ссылки расположены слишком близко друг к другу, легко промахнуться пальцем
- Мобильная версия тестируется только в браузере на компьютере, а не на реальных устройствах
Скорость загрузки напрямую связана с адаптивностью — тяжёлые изображения одинаково плохо влияют и на мобильную версию. Подробнее — в статьях «Скорость загрузки сайта: как ускорить и зачем» и «Оптимизация изображений без потери качества».
Почему это важно для поиска и удобства
Поисковые системы оценивают сайт в первую очередь по тому, как он выглядит и работает на мобильном устройстве — это называется индексацией по мобильной версии. Если сайт неудобен на телефоне, это может сказываться и на позициях в поисковой выдаче, и на количестве посетителей, которые уходят, не дождавшись загрузки или не разобравшись в навигации. Адаптивная вёрстка напрямую влияет на то, сколько людей из пришедших на сайт останутся и совершат целевое действие.
Контрольные разрешения экрана
Мы не ограничиваемся проверкой «влезает — не влезает» на глаз, а тестируем сайт на наборе контрольных ширин экрана, которые покрывают большинство реальных устройств: около 375 px для небольших смартфонов, около 414 px для смартфонов покрупнее, около 768 px для планшетов в портретной ориентации и от 1280 px до ширины полноразмерного монитора для ноутбуков и мониторов. Между этими контрольными точками сетка должна перестраиваться плавно, без резких «скачков» и обрезанного контента — это и есть суть адаптивной, а не просто уменьшенной вёрстки.
Отдельно проверяем горизонтальную ориентацию смартфонов и планшетов: часто про неё забывают на этапе разработки, а посетители переворачивают устройство регулярно, особенно при просмотре каталога или фотографий.
Гарантии
После завершения работ мы тестируем сайт на нескольких моделях смартфонов и планшетов, а не только в эмуляторах браузера — реальные устройства иногда ведут себя иначе. На выполненные работы действует гарантийный период: если после публикации на каком-то устройстве или в браузере обнаружится проблема отображения, исправляем её бесплатно.
Частые вопросы
Чем адаптивная вёрстка отличается от мобильной версии сайта?
Адаптивная вёрстка — это один сайт, который перестраивается под размер экрана. Отдельная мобильная версия — это, по сути, второй сайт на отдельном адресе, который сложнее поддерживать и обновлять. Мы делаем именно адаптивную вёрстку, потому что она удобнее в долгосрочной перспективе.
Можно ли адаптировать только часть сайта?
Да, если бюджет ограничен, можно начать с самых посещаемых страниц — обычно это главная страница, каталог и карточка товара или услуги.
Нужно ли менять дизайн, чтобы сделать сайт адаптивным?
Не обязательно, если текущий дизайн логично раскладывается на разные экраны. Но иногда в процессе выясняется, что отдельные элементы дизайна плохо подходят для мобильного отображения — в этом случае предложим точечные изменения, не затрагивая весь стиль.
Как вы тестируете результат?
На нескольких контрольных разрешениях экрана в браузере и дополнительно на реальных смартфонах и планшетах — эмулятор не всегда показывает то же самое, что реальное устройство.
Сколько времени занимает полная адаптивная вёрстка сайта?
В среднем от десяти рабочих дней для сайта из десяти-пятнадцати уникальных шаблонов страниц — точный срок зависит от их количества и сложности.
Вы делаете адаптивную вёрстку для новых сайтов «с нуля»?
Да, если сайт создаётся заново, адаптивность закладывается сразу в процессе разработки — это описано в услуге создание сайтов.
Проверить, как ваш сайт выглядит на телефоне прямо сейчас, можно за пару минут — просто откройте его с мобильного устройства. Если что-то режет глаз, напишите нам, разберёмся, что стоит поправить в первую очередь.
