Адаптивная вёрстка

Адаптивная вёрстка: сайт, удобный на любом экране

Вёрстка — это превращение дизайн-макета в работающую веб-страницу. Дизайнер рисует, как должен выглядеть сайт, а верстальщик переводит картинку на язык браузера: HTML задаёт структуру, CSS отвечает за внешний вид, JavaScript добавляет поведение и интерактивность. Адаптивная вёрстка означает, что одна и та же страница корректно перестраивается под ширину экрана — от небольшого смартфона до широкого монитора.

Сегодня большая часть посетителей заходит на сайты с телефонов. Если страница на мобильном разваливается, текст приходится увеличивать пальцами, а кнопки слишком мелкие, человек уходит. Поисковые системы тоже учитывают удобство мобильной версии при ранжировании. Поэтому качественная адаптивная вёрстка — не опция, а базовое требование к любому сайту.

В «Баратуре» вёрстка — одна из ключевых компетенций. Мы работаем с HTML, CSS, JavaScript, jQuery и AJAX больше десяти лет и сверстали сотни проектов: от простых лендингов до сложных интерфейсов личных кабинетов. Берём в работу как макеты нашего дизайнера, так и готовые макеты от вас или вашего агентства.

Кому нужна услуга

Технологии и что мы с ними делаем

Мы выбираем инструменты под задачу, а не наоборот. Для нового проекта часто достаточно современного CSS и небольшого количества чистого JavaScript. Для существующего сайта на jQuery разумнее продолжать в том же стиле, чем переписывать всё ради моды. Цель — быстрый, надёжный и поддерживаемый код.

Что входит в вёрстку

• Pixel-perfect перенос макета с учётом всех состояний: наведение, нажатие, фокус, ошибка
• Адаптация под типовые разрешения: смартфоны, планшеты, ноутбуки, широкие мониторы
• Продуманное поведение между контрольными точками, а не только на нарисованных ширинах
• Кроссбраузерность: корректная работа во всех актуальных браузерах
• Семантическая и валидная разметка, удобная для поисковых систем
• Оптимизация изображений, шрифтов и скриптов для быстрой загрузки
• Поддержка экранов высокой плотности: чёткие иконки и изображения
• Базовая доступность: контрастность, навигация с клавиатуры, подписи к элементам
• Интерактив на JavaScript и jQuery: меню, слайдеры, табы, аккордеоны, попапы
• AJAX-формы с проверкой полей и понятными сообщениями об ошибках
• Понятная структура файлов и комментарии в коде
• Интеграция вёрстки в систему управления сайтом по необходимости

На выходе вы получаете архив с исходниками или сразу готовые шаблоны в вашей системе управления. Код можно передать любому разработчику — он легко разберётся.

Как идёт работа

1. Анализ макета. Изучаем дизайн, уточняем непонятные моменты: как ведут себя элементы на промежуточных экранах, что происходит при длинных текстах, какие есть состояния. Если мобильной версии в макете нет, предлагаем свой вариант адаптации.
2. Оценка и план. Называем точную стоимость и срок, разбиваем работу на этапы. Для простых страниц показываем первый результат через 24 часа.
3. Каркас и стили. Создаём основу: сетку, типографику, цвета, общие компоненты. Это обеспечивает единообразие всех страниц.
4. Вёрстка страниц. Последовательно верстаем шаблоны, проверяя каждый на разных разрешениях.
5. Интерактив. Подключаем JavaScript, jQuery и AJAX-взаимодействия: формы, фильтры, анимации.
6. Тестирование. Проверяем на реальных устройствах и в разных браузерах, замеряем скорость загрузки.
7. Сдача. Передаём исходники или интегрируем в систему управления, вносим правки по вашим замечаниям.

Оценить вёрстку макета

Стоимость вёрстки

Переверстка существующего сайта под мобильные устройства оценивается отдельно, после аудита: иногда достаточно доработать стили, а иногда проще переписать шаблоны заново. Мы честно скажем, какой путь выгоднее.

Сроки

Срок зависит не только от количества страниц, но и от готовности макета. Если в дизайне нет мобильных версий или состояний элементов, мы дорабатываем их сами, и это добавляет немного времени.

Примеры задач

Вёрстка для дизайн-студии

Студия рисовала сайты для своих клиентов, но не имела верстальщиков. Мы стали постоянным подрядчиком: получаем макеты, верстаем с точностью до пикселя и сдаём в оговорённые сроки. Студия сосредоточилась на дизайне и продажах.

Адаптация каталога оборудования

Сайт компании хорошо выглядел на компьютере, но на телефоне таблицы характеристик вылезали за экран. Мы переработали вёрстку: таблицы на мобильных стали карточками, меню — компактным, фильтры — выезжающей панелью. Отказы с мобильных устройств заметно снизились.

Калькулятор стоимости ремонта

Клиенту нужен был калькулятор с несколькими шагами, мгновенным пересчётом и отправкой результата на почту. Мы реализовали его на JavaScript с AJAX-отправкой, без перезагрузки страницы и с сохранением введённых данных при случайном закрытии.

Ускорение каталога на jQuery

Старый каталог подгружал все товары разом и тормозил. Мы внедрили AJAX-подгрузку по мере прокрутки и фильтрацию без перезагрузки, оптимизировали скрипты. Страница стала открываться в несколько раз быстрее.

Наши принципы вёрстки

Как мы проверяем качество

Хорошая вёрстка — это не только «похоже на макет». Перед сдачей каждая страница проходит наш внутренний контроль, и мы делимся чек-листом с клиентами, чтобы было понятно, за что они платят.

1. Сверка с макетом. Накладываем вёрстку на дизайн и проверяем отступы, размеры шрифтов, цвета, выравнивание. Расхождения исправляем до сдачи, а не после ваших замечаний.
2. Проверка на устройствах. Открываем страницы на нескольких реальных смартфонах и планшетах, а не только в эмуляторе браузера. Смотрим, как ведут себя меню, формы и всплывающие окна при касании.
3. Проверка контента. Подставляем длинные заголовки, пустые поля, много пунктов в списках, чтобы убедиться, что вёрстка не ломается на живых данных, которые будут добавлять ваши сотрудники.
4. Скорость. Замеряем время загрузки и основные показатели производительности, оптимизируем изображения и порядок подключения скриптов.
5. Валидность и доступность. Проверяем разметку валидатором, контрастность текста, работу с клавиатуры и наличие подписей у полей форм.
6. Работа скриптов. Тестируем AJAX-запросы при медленном соединении и ошибках сервера: пользователь должен понимать, что происходит, а не смотреть на зависшую кнопку.

Вёрстка как часть большого проекта

Чаще всего вёрстку у нас заказывают в составе разработки сайта: наш дизайнер рисует макет, верстальщик переносит его в код, программист подключает систему управления. В этом случае вы не думаете о передаче макетов между подрядчиками и не рискуете получить вёрстку, которая не совпадает с дизайном или неудобна для программирования.

Если же у вас уже есть дизайнер или команда разработки, мы аккуратно встраиваемся в процесс: работаем в вашем репозитории, следуем принятым соглашениям по именованию классов и структуре файлов, участвуем в созвонах по проекту. Для постоянных партнёров выделяем закреплённого верстальщика, который знает проект и быстрее выполняет новые задачи.

• Вёрстка по макетам нашего дизайнера в составе разработки сайта
• Вёрстка по вашим макетам с передачей исходников
• Постоянное партнёрство для студий и агентств
• Доработка и исправление вёрстки на существующих сайтах
• Перевод старых сайтов на адаптивную вёрстку без смены дизайна

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

Получить эскиз через 24 часа

Частые вопросы о вёрстке

Пришлите макет — оценим быстро

Отправьте макет или ссылку на сайт, который нужно адаптировать, на [email protected] или оставьте заявку. Мы изучим задачу и в течение рабочего дня назовём стоимость и срок.

Офис студии: г. Калининград, ул. Генерала Соммера, д. 28, офис 304. Работаем удалённо с агентствами и компаниями из любых городов.

Отправить макет на оценку

Оставьте заявку

Опишите задачу в нескольких словах — ответим в течение рабочего дня и предложим варианты решения.