01 · вёрстка и адаптация сайтов

Вёрстка сайтови мобильные версии

Верстаем сайт по макету Figma под ключ и делаем мобильную версию готового сайта. Точно по макету, но без фанатизма: чистая разметка, быстрая загрузка и удобство на любом экране. Работаем в Москве и удалённо

Цена
от 30 000
Срок
от 3 дней

Услуги вёрстки под вашу задачу

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

  • 01

    Вёрстка по макету Figma

    Дизайн готов, верстальщика нет или он занят. Переводим макеты в код так, чтобы дизайнер узнал свою работу на любом экране

    • Все шаблоны страниц из макета
    • Сетка, отступы и шрифты по макету
    • Состояния кнопок, полей и ошибок
    • Вопросы к дизайнеру — до вёрстки
  • 02

    Мобильная версия сайта

    Сайт делали под монитор, а заходят с телефона. Адаптируем то, что есть, без переделки всего сайта с нуля

    • Адаптация действующих страниц
    • Меню, таблицы и фильтры под палец
    • Кнопка звонка и формы на виду
    • Без отдельного домена m.
  • 03

    Лендинги и промостраницы

    Одна страница, короткий срок и много внимания к первому экрану. Анимацию добавляем там, где она помогает читать

    • Вёрстка за несколько дней
    • Анимация при прокрутке
    • Формы с отправкой в CRM или почту
    • Цели Метрики на кнопках
  • 04

    Вёрстка под WordPress и 1С-Битрикс

    Сайт живёт на CMS, и новые страницы должны редактироваться из привычной админки, а не через программиста

    • Шаблоны и компоненты Битрикса
    • Темы и блоки WordPress
    • Поля для контент-менеджера
    • Адаптивная версия сайта на Битрикс
  • 05

    Компоненты для React и Next.js

    У вас своя команда разработки, а вёрстка тормозит спринты. Отдаём библиотеку компонентов, которую удобно подключать

    • Компоненты на TypeScript
    • Дизайн-токены: цвета, отступы, шрифты
    • Витрина компонентов со всеми состояниями
    • Код по вашим правилам репозитория
  • 06

    Исправление старой вёрстки

    Блоки наезжают друг на друга, в Safari всё разъехалось, страница грузится долго. Находим причину, а не прячем симптом

    • Разбор ошибок по браузерам
    • Горизонтальная прокрутка на телефоне
    • Тяжёлые картинки и шрифты
    • Порядок в стилях без переписывания всего

От макета Figma до живого сайта

Пять шагов, и на каждом результат виден в браузере, а не в переписке

  1. 01Аудит Figma

    Разбираем макет

    Проверяем, всё ли нарисовано: мобильные экраны, наведение, ошибки в формах, пустые списки. Недостающее обсуждаем сразу, а не посреди работы

  2. 02Сетка и компоненты

    Собираем основу

    Сначала сетка, шрифты, цвета и повторяющиеся блоки: кнопки, карточки, поля. Страницы потом собираются из них, как из конструктора

  3. 03Шаблоны

    Верстаем страницы

    Каждый шаблон на тестовом адресе, с настоящими текстами и картинками. Вы смотрите в браузере, а не на скриншоте

  4. 04Адаптив от 360 px

    Проверяем на экранах

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

  5. 05Проверка и код

    Сдаём и передаём

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

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

  1. 01Вёрстка всех шаблонов из макета
  2. 02Адаптив от 360 px до широких мониторов
  3. 03Семантическая разметка для поиска
  4. 04Состояния элементов: наведение, фокус, ошибка
  5. 05Навигация с клавиатуры и подписи для скринридеров
  6. 06Сжатые картинки в современных форматах
  7. 07Шрифты без мигания текста при загрузке
  8. 08Формы с проверкой полей и отправкой
  9. 09Проверка в Chrome, Safari, Firefox и Яндекс Браузере
  10. 10Код и доступы передаём вам

Вёрстка встаёт в ваш стек

Отдаём чистый HTML, компоненты для React или встраиваем вёрстку в CMS. Выбираем то, с чем вам потом удобно жить

Работаем с инструментами и системами: Figma, HTML, CSS, TypeScript, React, Next.js, WordPress, 1С-Битрикс

Если у вашей команды свои правила кода, сборка и библиотеки, подстраиваемся под них, а не приносим свои. Вёрстку должно быть легко поддерживать после нас

Что проверяем перед сдачей

Макет показывает три ширины и идеальные тексты. Реальная жизнь шире, поэтому вёрстку проверяем по списку, а не на глаз

  • Ширины от 360 px до широких мониторов

    Смотрим не три размера из макета, а весь диапазон: плавно тянем окно и ловим места, где блоки наезжают или появляется прокрутка вбок

  • Браузеры и устройства

    Chrome, Safari на iPhone, Firefox, Яндекс Браузер. Отдельно проверяем Safari: там чаще всего разъезжаются отступы и формы

  • Скорость загрузки

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

  • Работа с клавиатуры

    Меню, формы и всплывающие окна проходятся клавишей Tab, фокус виден, у кнопок и картинок есть понятные подписи

  • Длинные тексты и пустые состояния

    Заголовок в три строки, фамилия на полстраницы, пустой список товаров. Вёрстка не ломается, когда реальный контент отличается от макета

  • Соответствие макету

    Накладываем макет поверх страницы и сверяем сетку, отступы и шрифты. Точно, но без фанатизма: где пиксель спорит с удобством, спрашиваем дизайнера

Сколько стоит вёрстка сайта

Смотрим макет или сайт и присылаем смету на следующий день. После старта цена не меняется, если не меняется задача

  • Лендинг по макету

    от 30 000

    от 3 дней

    • Одна страница из Figma
    • Телефон, планшет и десктоп
    • Форма заявки и простая анимация
    • Проверка в основных браузерах
    Получить смету
  • Вёрстка сайта

    от 90 000

    1–2 недели

    • До 10 шаблонов страниц
    • Библиотека повторяющихся блоков
    • Адаптив от 360 px
    • Чек-лист скорости и доступности
    Получить смету
  • Большой сайт или мобильная версия

    от 200 000

    от 3 недель

    • Каталог, карточки, корзина, кабинет
    • Адаптация действующего сайта целиком
    • Встраивание в WordPress или 1С-Битрикс
    • Компоненты для React и Next.js
    Получить смету

Что удорожает вёрстку

  • Макет без мобильных экранов: недостающее придётся дорисовать
  • Сложная анимация, видео на фоне и 3D-сцены
  • Поддержка старых браузеров и нестандартных устройств
  • Старая вёрстка, которую проще переписать, чем исправить
  • Несколько языков и направление текста справа налево

Как проходит работа

  1. 01

    Макет и смета

    1 день

    Присылаете ссылку на Figma или адрес сайта. Смотрим шаблоны и на следующий день присылаем смету со сроком

  2. 02

    Основа и первый шаблон

    2–4 дня

    Верстаем сетку, компоненты и главную страницу. На ней договариваемся о точности и мелочах

  3. 03

    Остальные страницы

    по смете

    Шаблоны выкладываем на тестовый адрес по мере готовности. Оплата по этапам

  4. 04

    Сдача и поддержка

    30 дней

    Передаём код, встраиваем в вашу систему. Месяц правим найденные ошибки без доплаты

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

Открыт 01 из 07

Не нашли свой вопрос — задайте его в Телеграме, ответим в рабочее время

Спросить в Телеграме
  1. Лендинг от 30 000 ₽, сайт до 10 шаблонов от 90 000 ₽

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

  2. Лендинг от 3 дней, обычный сайт 1–2 недели

    Большой сайт с каталогом и кабинетом — от трёх недель. Срок фиксируем в смете. Быстрее всего идёт работа, когда макет полный: есть мобильные экраны и состояния элементов

  3. Зависит от числа шаблонов и состояния кода

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

  4. Можно, если хватает возможностей конструктора

    Онлайн-редакторы подходят для простой визитки. Когда нужен свой дизайн, быстрая загрузка, встраивание в CMS и нормальная мобильная версия, конструктор начинает мешать. Если вашей задаче хватит конструктора, так и скажем

  5. HTML, CSS и TypeScript

    Разметка на HTML, стили на CSS, поведение на TypeScript. Для команд на React и Next.js отдаём готовые компоненты, для WordPress и 1С-Битрикс встраиваем вёрстку в шаблоны. Лишних библиотек не тянем

  6. Да, в шаблон сайта без остановки

    Работаем на копии сайта, проверяем новые шаблоны и компоненты, потом переносим на рабочий сайт. Контент-менеджер продолжает редактировать страницы из привычной админки

  7. Базируемся в Москве, работаем с любым городом

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

Заказать вёрстку сайта

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

Что нужно сверстать

Нажимая кнопку, вы соглашаетесь на обработку персональных данных