Доработка сайтов · вёрстка · мобильная версия
Вёрстка сайтов в Санкт-Петербурге
Вёрстка сайта для готового проекта: правим то, что разъехалось, делаем адаптивную вёрстку и мобильную версию, верстаем новые страницы по макету из Figma. Работаем в вашей CMS. Правка вёрстки — от 2 000 ₽, адаптивная вёрстка — от 12 000 ₽. Цену задачи называем до начала работ, и она не меняется.
- Фиксированная цена, без оплаты по часам
- Проверка на телефонах и в браузерах
- WordPress, 1С-Битрикс, OpenCart и другие CMS
от 2 000 ₽ — правка вёрстки, адаптивная вёрстка — от 12 000 ₽
Заказать вёрстку сайта
Пришлите адрес сайта, скриншот проблемы или ссылку на макет — оценим и пришлём план со стоимостью.
Какую вёрстку мы делаем
Берём задачи по вёрстке для работающих сайтов — от одного съехавшего блока до шаблонов многостраничного сайта. Новый сайт целиком делаем в рамках создания сайтов.
Правка вёрстки
Съехавший блок, сломанное меню, кнопка поверх текста, таблица шире экрана. Находим причину в стилях и исправляем без побочных эффектов. От 2 000 ₽.
Адаптивная вёрстка
Делаем мобильную версию сайта, который на телефоне неудобен или показывается уменьшенной копией десктопа. От 12 000 ₽.
Вёрстка по макету Figma
Переносим макет дизайнера в шаблон вашей CMS: сетка, отступы, шрифты, состояния кнопок и форм. Цену называем после просмотра макета.
Вёрстка многостраничного сайта
Верстаем шаблоны: главную, раздел, услугу, карточку товара, статью, контакты. Страницы одного типа собираются из них.
Новые блоки и страницы
Доверстаём блок преимуществ, таблицу цен, галерею, промостраницу акции — в стиле сайта, чтобы не выглядело заплаткой.
Кроссбраузерность
Сайт по-разному выглядит в Safari, Chrome и на Android. Приводим вёрстку к одному виду в актуальных браузерах.
Вёрстка — одна из работ раздела «Доработка сайтов». Если обновить нужно весь внешний вид, а не отдельные страницы, посмотрите редизайн сайта.
Как мы верстаем
Четыре правила, без которых вёрстка готового сайта превращается в череду новых поломок.
Фиксированная цена задачи
Оцениваем вёрстку заранее и называем цену, которая не меняется в работе. Нормо-часов и пакетов часов нет.
В вашей CMS, а не архивом
Отдаём не набор HTML-файлов, а рабочий шаблон темы или компонент, который редактируется из админки.
Проверка на разных экранах
Смотрим результат на узких телефонах, планшетах и широких мониторах, в Chrome, Safari и Firefox.
Без вреда для поиска
Сохраняем адреса, тексты, заголовки и микроразметку. Мобильная версия содержит тот же контент, что и десктоп.
Что вы получите
Сайт, которым удобно пользоваться с телефона и компьютера, и вёрстку, которую можно поддерживать дальше.
Каждую задачу закрываем отчётом: что изменили, на каких экранах и браузерах проверили, что заметили попутно. Вы видите результат, а не только счёт.
- Страницы без горизонтальной прокрутки и обрезанных блоков на телефоне
- Читаемый текст и кнопки, по которым легко попасть пальцем
- Меню, формы, таблицы и галереи, которые работают на маленьком экране
- Изображения нужного размера: телефон не грузит картинку для монитора
- Вёрстка, которая не прыгает при загрузке
- Чистый код в шаблоне CMS: обновления не сотрут работу
- Отчёт по каждой задаче и рекомендации, что улучшить дальше
Адаптивная вёрстка и мобильная версия сайта
Адаптивная вёрстка — это когда одна страница подстраивается под ширину экрана: на компьютере в несколько колонок, на телефоне в одну. Google рекомендует именно такой подход как самый простой в поддержке (Google Search Central).
| Подход | Как устроен | Когда уместен |
|---|---|---|
| Адаптивная вёрстка | Один адрес и один HTML, раскладка меняется стилями под ширину экрана | Почти всегда: проще поддерживать, контент на всех устройствах одинаковый |
| Отдельная мобильная версия (m.сайт) | Отдельные страницы для телефонов на поддомене | Редко: две версии нужно синхронизировать, легко потерять контент и разметку |
| Фиксированная ширина | Страница под монитор, телефон показывает её уменьшенной | Уже нигде: текст мелкий, приходится масштабировать пальцами |
Для поиска это важно. Google индексирует и ранжирует сайты по мобильной версии, которую сканирует робот для смартфонов (справка Google). Если на телефоне скрыта часть текста или блоков, для поиска её как будто нет.
Что делаем при адаптивной вёрстке
| Что | Как делаем | Источник |
|---|---|---|
| Метатег viewport | Добавляем width=device-width, initial-scale=1, иначе мобильный браузер покажет страницу как на мониторе | MDN, web.dev |
| Mobile first | Сначала верстаем одну колонку для узкого экрана, затем добавляем колонки там, где хватает ширины | MDN, web.dev |
| Точки перелома по контенту | Раскладку меняем там, где ломается контент, а не под конкретные модели телефонов | web.dev |
| Гибкая сетка и медиазапросы | Колонки в процентах, flex и grid; медиазапросы переключают раскладку по ширине | MDN |
| Адаптивные изображения | Картинки не шире контейнера; через srcset и picture телефон получает лёгкую версию | MDN |
| Кнопки под палец | Зона нажатия — около 48 пикселей, между соседними ссылками — около 8 пикселей | web.dev |
| Удобная длина строки | Текст не растягиваем на весь монитор: в колонке комфортнее короткие строки | web.dev |
| Без прыжков при загрузке | Задаём размеры изображениям и место под баннеры и виджеты, подбираем замену веб-шрифтам | web.dev |
Вёрстка и скорость
Вёрстка напрямую влияет на метрики Core Web Vitals (web.dev). LCP — как быстро появился главный блок, хорошо до 2,5 с. INP — отклик на нажатия, хорошо до 200 мс. CLS — стабильность вёрстки, хорошо до 0,1.
При вёрстке не утяжеляем первый экран и резервируем место под картинки и виджеты. Если сайт уже медленный, это отдельная работа — ускорение сайта.
Вёрстка по макету Figma
Получаем макет от вашего дизайнера и превращаем его в работающие страницы сайта. Перед оценкой смотрим макет целиком — так цена не меняется посреди работы.
| Что смотрим в макете | Зачем | Если этого нет |
|---|---|---|
| Мобильные версии экранов | Видно, как блоки перестраиваются на телефоне | Адаптируем сами по правилам сетки и согласуем спорные места |
| UI-кит: цвета, шрифты, кнопки, поля | Одинаковые элементы верстаем один раз и переиспользуем | Собираем кит из макета и показываем, где элементы расходятся |
| Состояния элементов | Наведение, нажатие, ошибка в форме, пустая корзина | Делаем в стиле сайта и показываем на согласование |
| Реальные тексты и фото | Длинный заголовок может сломать карточку | Проверяем блоки на длинных и коротких текстах |
| Шрифты с лицензией для веба | Шрифт из макета должен законно работать на сайте | Предлагаем похожий шрифт со свободной лицензией |
| Экспорт графики | Иконки в SVG, фото в нужных размерах | Выгружаем из Figma сами, если есть доступ к файлу |
Вёрстка многостраничного сайта
В многостраничном сайте страниц много, а шаблонов — несколько: главная, раздел, услуга, товар, статья, контакты. Стоимость вёрстки зависит от числа уникальных шаблонов, а не от числа страниц.
Сначала верстаем общие элементы — шапку, подвал, кнопки, формы. Затем шаблоны, которые из них собираются. Так сайт выглядит цельно.
Pixel perfect и здравый смысл
Верстаем близко к макету: отступы, размеры и шрифты совпадают. Но браузеры по-разному рисуют шрифты, а реальные тексты отличаются от «рыбы».
Где буквальное повторение макета ломает удобство на телефоне, предлагаем решение и согласуем его с вами и дизайнером.
Правка вёрстки: с чем приходят чаще всего
Каждая из этих проблем — отдельная задача от 2 000 ₽. Несколько правок собираем в один план, чтобы не платить минимум за каждую.
Горизонтальная прокрутка
Страница на телефоне шире экрана и ездит вбок. Находим элемент, который распирает вёрстку: таблицу, картинку, iframe.
Мелкий текст
На телефоне текст приходится увеличивать пальцами. Обычно не задан viewport или размеры шрифта рассчитаны на монитор.
Мелкие кнопки и ссылки
Пункты меню стоят вплотную, посетитель промахивается. Увеличиваем зону нажатия и расстояние между ссылками.
Меню не открывается
Бургер не реагирует, подменю уходит за край экрана или перекрывает страницу. Чиним стили и скрипт меню.
Таблицы шире экрана
Прайс или характеристики обрезаются на телефоне. Делаем прокрутку внутри таблицы или перестраиваем её в карточки.
Растянутые картинки
Фото сплющено, обрезано или размыто. Задаём пропорции и подключаем версии нужного размера.
Страница прыгает
Пока грузится, текст и кнопки съезжают. Резервируем место под изображения, баннеры и шрифты.
Неудобные формы
Поля мелкие, клавиатура закрывает кнопку, для телефона открывается буквенная раскладка. Настраиваем поля под мобильный ввод.
Сломалось после обновления
Обновили тему, плагин или модуль — и вёрстка разъехалась. Находим конфликт стилей и переносим правки в свой шаблон.
Не знаете, где проблема, — пришлите скриншот с телефона и ссылку на страницу. Если ошибок много и они не только в вёрстке, начните с технического аудита или бесплатного экспресс-аудита.
Сколько стоит вёрстка сайта и как мы её считаем
Стоимость вёрстки сайта зависит от того, что именно верстать. Почасовой оплаты нет: оцениваем задачу заранее и называем фиксированную цену.
| Задача | Как считаем | Цена |
|---|---|---|
| Правка вёрстки: блок, меню, таблица, форма | По прайсу | от 2 000 ₽ |
| Адаптивная вёрстка — мобильная версия готового сайта | По прайсу, уточняем по числу шаблонов | от 12 000 ₽ |
| Вёрстка по макету Figma | Фиксированная смета после просмотра макета | после оценки |
| Вёрстка многостраничного сайта | Смета по числу уникальных шаблонов и блоков | после оценки |
| Новый блок или страница в стиле сайта | Фиксированная смета | после оценки |
| Кроссбраузерность: одинаковый вид в браузерах | Правка вёрстки или смета, если проблем много | от 2 000 ₽ |
Цены «от» — нижняя граница для типовой задачи на исправном сайте. Точную стоимость фиксируем в плане до начала работ. Полный прайс доработок — в разделе «Доработка сайтов».
От чего зависит цена вёрстки
- Число уникальных шаблонов и блоков
- Есть ли макет и его мобильные версии
- Сложность элементов: слайдеры, фильтры, калькуляторы, анимация
- CMS и состояние шаблона: аккуратная тема или наслоения правок
- Число страниц, которые нужно проверить после изменений
Почему не по часам
При почасовой оплате итог известен только в конце, а медленную работу оплачивает клиент. У нас цена задачи фиксирована: если вёрстка заняла больше времени, это наш риск.
Правки в рамках согласованной задачи входят в цену. Новые пожелания оформляем отдельной задачей — решаете вы.
Вёрстка в вашей CMS
Вёрстку мало сделать — её нужно правильно встроить в сайт. Иначе первое обновление темы или платформы вернёт всё как было.
| Платформа | Как встраиваем вёрстку |
|---|---|
| WordPress | Дочерняя тема или собственная тема, блоки редактора, шаблоны страниц и WooCommerce. Основную тему не правим. |
| 1С-Битрикс | Свой шаблон сайта, копии компонентов в шаблоне, включаемые области для редактируемых блоков. Ядро не трогаем. |
| OpenCart | Шаблоны темы и модификаторы, без правок в файлах ядра — так проще обновляться. |
| MODX | Шаблоны, чанки и дополнительные поля, чтобы контент редактировался из админки. |
| Самописные сайты и HTML | Разбираем, как устроены шаблоны, и встраиваемся в существующую логику. Лендинг на чистом HTML тоже сделаем. |
Если платформа мешает сделать нормальную мобильную версию, а каждая правка дорожает, скажем об этом прямо. Как сравнить платформы, рассказали в статье «Какую CMS выбрать».
Как заказать вёрстку сайта
Приступаем к работе в течение 3 рабочих дней
Заявка
Пришлите адрес сайта, скриншоты с телефона или ссылку на макет. Опишите, что должно получиться.
Разбор
Смотрим CMS, шаблон и стили, проверяем страницы на разных экранах. Для макета — изучаем все экраны и состояния.
План и цена
Присылаем план: задачи, фиксированная цена каждой и срок. Работы начинаем после согласования.
Вёрстка
Делаем резервную копию и верстаем — сложные изменения на тестовой копии сайта.
Проверка
Проверяем на узких и широких экранах, в Chrome, Safari и Firefox. Отправляем тестовые заявки из форм.
Отчёт и оплата
Переносим на рабочий сайт и присылаем отчёт. Вы проверяете результат и оплачиваете выполненное.
Делаем мы
- Разбираемся в шаблоне и стилях сайта
- Оцениваем и составляем план с ценой
- Делаем резервную копию
- Верстаем и встраиваем в CMS
- Проверяем на устройствах и отчитываемся
Нужно от вас
- Описание задачи, скриншоты или макет
- Доступы к админке и хостингу
- Тексты и фото для новых блоков
- Согласование плана и проверка результата
Кому подходит
- Владельцам сайтов, которые неудобны на телефоне
- Компаниям с макетом от дизайнера, которому нужен верстальщик
- Тем, у кого вёрстка разъехалась после обновления или чужих правок
- Интернет-магазинам с таблицами, фильтрами и формами, которые ломаются на мобильных
- Тем, кто хочет знать цену вёрстки до начала работ
Когда нужна другая услуга
- Устарел весь внешний вид — подойдёт редизайн сайта
- Сайт медленно грузится — подойдёт ускорение сайта
- Задачи по сайту идут постоянно — подойдёт техническая поддержка
- Сайт проще сделать заново — создание сайта
- Сайт удобен, но не приносит заявок — ведение сайта или SEO-продвижение
Гарантии и сроки
Гарантируем то, что зависит от нас: цену из плана, аккуратную вёрстку и проверку перед сдачей.
Договор и цена из плана
Работаем по договору. Верстаем согласованное по согласованной цене, без доплат в процессе.
Резервная копия
Перед изменениями сохраняем файлы и базу. Сайт можно вернуть в исходное состояние.
Исправим свою ошибку
Если после сдачи найдётся ошибка в нашей вёрстке, исправим её.
Код и доступы — ваши
Шаблоны и стили остаются у вас. Наши доступы можно отозвать в любой момент.
Как проверяем вёрстку перед сдачей
- Ширины от узкого телефона до широкого монитора, в вертикальной и горизонтальной ориентации
- Chrome, Safari, Firefox и Яндекс Браузер, на телефоне и компьютере
- Нет горизонтальной прокрутки, текст читается без масштабирования
- Меню, формы, таблицы, слайдеры и всплывающие окна работают с касания
- Изображения не растянуты и отдаются нужного размера
- Заголовки, тексты, адреса и микроразметка на месте
Сроки
Срок каждой задачи указываем в плане после оценки. Правка одного блока и вёрстка многостраничного сайта по макету — работы разного объёма, поэтому общую цифру не называем.
На срок влияют число шаблонов, готовность макета и текстов, состояние темы и скорость согласований. Если на телефоне не работает форма или корзина, ставим задачу в плане первой.
Сайты, которые мы верстаем и развиваем
Аренда теплоходов · Санкт-Петербург
Разработали сайт и продолжаем его развивать: верстаем новые страницы под суда и события, следим за мобильной версией, добавляем микроразметку.
- ×1,9визитов из поиска за сезон
- 35+запросов в ТОП-10 Яндекса
Обслуживание чиллеров · B2B
Сделали сайт с нуля и доверстываем страницы под услуги: ремонт, монтаж, сервис, марки оборудования — в едином стиле.
- +90%заявок с сайта за год
- ×2больше страниц услуг
Женская одежда · интернет-магазин
Разработали интернет-магазин и дорабатываем вёрстку каталога и карточек товаров, чтобы покупать с телефона было удобно.
- +60%продаж из поиска
- +70%трафика из Яндекса
Ещё проекты
Музыкальные инструменты, интернет-магазин
Интернет-магазин
Мужские костюмы, интернет-магазин
Разработка и развитие
Обувная фабрика, опт
Развитие сайта
Онлайн-типография
Развитие сайта
Журналы и бланки по охране труда
Развитие сайта
Почему вёрстку заказывают у Еллоу Медиа
Работаем с сайтами с 2009 года. Верстаем так, чтобы страница была удобной на телефоне, не мешала поиску и не ломалась при обновлениях.
Фиксированная цена задачи
Называем цену до начала работ, и она не растёт. Нам невыгодно тянуть время, а вы не платите за медленную работу.
Верстаем сами и сами делаем сайты
Создаём сайты на WordPress и 1С-Битрикс, поэтому знаем, как правильно встроить вёрстку в шаблон.
Специалисты и ИИ в одной команде
Нейросети ускоряют разбор чужих стилей и проверку на разных экранах, а решения принимают специалисты.
Система план — отчёт
Согласовали задачи, сверстали, проверили, отчитались. Оплата — за сделанное, без ежемесячного платежа.
Кто верстает ваш сайт
Распределённая команда специалистов и ИИ-ассистентов. Каждый проект ведёт персональный менеджер.
Менеджер проекта
Принимает задачу, собирает оценку в план, следит за сроками и присылает отчёт.
Верстальщик
Верстает по макету, делает адаптивную вёрстку и мобильную версию, правит стили.
Разработчик
Встраивает вёрстку в CMS, дорабатывает скрипты меню, форм и фильтров.
SEO-специалист
Следит, чтобы адреса, заголовки, тексты и микроразметка сохранились после вёрстки.
Аналитик
Проверяет, что цели Метрики на формах и кнопках срабатывают после изменений.
ИИ-ассистенты
Помогают разбирать стили, искать причины поломок и проверять страницы на разных экранах.
Отзывы клиентов
Исправили мобильную версию, которая разъезжалась на телефонах. Теперь большая часть заказов приходит именно с мобильных.
Цветочный магазин
К выставке срочно понадобились новая посадочная страница и форма регистрации. Сделали за два дня, всё работало без сбоев.
IT-компания
Поддерживают и сайт, и форму заказа на мобильных. Если что-то не так, исправляют в тот же день.
Доставка воды
Задачи выполняются, но иногда со второго раза: после сдачи находим ошибки. Договорились о тестировании перед сдачей, стало лучше.
Запчасти для грузовиков
Цены на вёрстку сайта
Правка вёрстки — от 2 000 ₽, адаптивная вёрстка — от 12 000 ₽. Вёрстку по макету и многостраничную вёрстку считаем по фиксированной смете после оценки. Цена не меняется в работе.
Вёрстка сайта
от 2 000 ₽ / задача
- Правка вёрстки и исправление ошибок отображения
- Адаптивная вёрстка и мобильная версия
- Вёрстка по макету Figma
- Вёрстка шаблонов многостраничного сайта
- Новые блоки и страницы в стиле сайта
- Встраивание в CMS
- Проверка на телефонах и в браузерах
- Отчёт по каждой задаче
Почасовой оплаты нет: оцениваем задачу заранее, фиксированная цена не меняется. Оплата по системе «план — отчёт», без ежемесячного платежа. Работаем по договору, без НДС.
От чего зависит цена
- Объём один блок → шаблоны всего сайта
- Макет есть с мобильными версиями → адаптируем сами
- Элементы текст и карточки → фильтры, слайдеры, калькуляторы
- CMS и тема аккуратный шаблон → наслоения чужих правок
Пришлите скриншоты, адрес сайта или ссылку на макет — оценим вёрстку и пришлём план со стоимостью до начала работ.
Прайс на вёрстку и смежные работы
Вёрстку часто заказывают вместе с другими доработками. Цены «от» — для типовой задачи, точную называем после оценки.
| Работа | Что входит | Цена |
|---|---|---|
| Правка вёрстки | Съехавшие блоки, меню, таблицы, формы, отображение на телефоне и в браузерах | от 2 000 ₽ |
| Адаптивная вёрстка (мобильная версия) | Мобильная версия страниц для удобства на телефонах и планшетах | от 12 000 ₽ |
| Вёрстка по макету и многостраничная вёрстка | Шаблоны страниц по макету Figma, встроенные в CMS | фиксированная смета после оценки |
| Ускорение сайта | Замер, изображения, кеш, скрипты и шрифты, повторный замер | от 12 000 ₽ |
| Калькулятор или квиз | Расчёт стоимости или опрос с заявкой на выходе, цели в Метрике | от 8 000 ₽ |
| Микроразметка Schema.org | Разметка организации, услуг, товаров, вопросов и хлебных крошек | от 4 000 ₽ |
| Установка Яндекс Метрики и настройка целей | Счётчик, цели на формы, звонки и мессенджеры | от 3 000 ₽ |
| Редизайн сайта | Новый дизайн и вёрстка с сохранением адресов и позиций | от 50 000 ₽ |
| Экспресс-аудит | Короткий разбор: главные ошибки и точки роста | Бесплатно |
Полный прайс работ — в разделе «Доработка сайтов», все цены агентства — на странице «Цены». Платные шрифты, темы и плагины владелец сайта оплачивает напрямую поставщикам.
Акции
Бесплатно
Аудит сайта в подарок
Проанализируем сайт, позиции и конкурентов, покажем точки роста и составим план работ.
Сайт + SEO
Первый месяц продвижения бесплатно
Закажите создание сайта — и первый месяц продвижения будет в подарок. При сдаче сайта уже сделаем SEO-оптимизацию, тексты и технические настройки.
Вопросы о вёрстке сайтов
Сколько стоит вёрстка сайта?
Правка вёрстки — от 2 000 ₽, адаптивная вёрстка — от 12 000 ₽. Вёрстку по макету и многостраничную вёрстку считаем по фиксированной смете после оценки. Цену указываем в плане до начала работ.
Почему вёрстка сайта — цена «от»?
«От» — цена типовой задачи на аккуратном шаблоне. Дороже выходит, когда шаблонов много, элементы сложные или тема покрыта слоями чужих правок. Точную цену называем после оценки, дальше она не меняется.
Вы берёте оплату по часам?
Нет. Оцениваем задачу заранее и называем фиксированную цену. Если вёрстка заняла больше времени, чем мы рассчитывали, это наш риск, а не ваш счёт.
Что такое адаптивная вёрстка?
Это вёрстка, при которой одна страница подстраивается под ширину экрана: на компьютере в несколько колонок, на телефоне в одну. Google рекомендует такой подход как самый простой в поддержке (справка Google).
Чем адаптивная вёрстка отличается от мобильной версии сайта?
Мобильной версией часто называют любой вариант сайта для телефона. Адаптивная вёрстка — способ её сделать на тех же адресах и с тем же кодом. Отдельный мобильный поддомен сложнее поддерживать, поэтому делаем адаптив.
Нужна ли мобильная версия сайта для поиска?
Да. Google индексирует и ранжирует сайты по мобильной версии (Google Search Central). Если на телефоне скрыта часть контента, поисковик её не учтёт. Места в выдаче мы при этом не обещаем.
Что такое mobile first?
Подход, при котором сначала верстают одну колонку для узкого экрана, а колонки добавляют, когда хватает ширины (MDN). Так мобильная версия получается не урезанной копией, а полноценной.
Сверстаете по макету из Figma?
Да. Посмотрим макет целиком, назовём фиксированную цену и сверстаем в шаблон вашей CMS. Если мобильных версий в макете нет, адаптируем сами и согласуем спорные места.
Сколько стоит вёрстка многостраничного сайта?
Цена зависит от числа уникальных шаблонов, а не страниц: главная, раздел, услуга, товар, статья. Считаем по фиксированной смете после просмотра макета или сайта.
Можно отдать вёрстку в HTML-файлах?
Можно, но для работающего сайта полезнее вёрстка, встроенная в CMS. Тогда контент редактируется из админки, а обновления не стирают работу. Лендинг на чистом HTML тоже сделаем.
Верстаете на WordPress и 1С-Битрикс?
Да. На WordPress — через дочернюю или свою тему, на 1С-Битрикс — в своём шаблоне с копиями компонентов. Работаем также с OpenCart, MODX и самописными сайтами.
В каких браузерах проверяете вёрстку?
В актуальных версиях Chrome, Safari, Firefox и Яндекс Браузера, на телефоне и компьютере. Проверяем ширины от узкого телефона до широкого монитора.
Сайт прыгает при загрузке — это вёрстка?
Чаще всего да. Картинки без размеров, баннеры и веб-шрифты сдвигают страницу. Это метрика CLS, хороший уровень — до 0,1 (web.dev). Исправляется правкой вёрстки.
Вёрстка повлияет на скорость сайта?
Может, в обе стороны. Аккуратная вёрстка с лёгкими изображениями ускоряет первый экран, тяжёлые слайдеры и скрипты замедляют. Если сайт уже медленный, нужно отдельное ускорение сайта.
Не пропадут ли позиции после вёрстки?
Сохраняем адреса, заголовки, тексты и микроразметку, а мобильная версия содержит тот же контент, что и десктоп. SEO-специалист проверяет изменения до выкладки.
Возьмёте сайт, который делали не вы?
Да. Сначала разбираемся, как устроены шаблоны и стили, делаем резервную копию и только потом меняем.
Какие сроки вёрстки?
Срок каждой задачи указываем в плане после оценки. Приступаем в течение 3 рабочих дней. Если на телефоне не работает форма или корзина, такую задачу ставим первой.
Что нужно от нас, чтобы начать?
Адрес сайта, скриншоты проблем или ссылка на макет, доступы к админке и хостингу. Для новых блоков — тексты и фото.
Вёрстка или редизайн — что выбрать?
Если дизайн в порядке, но страницы неудобны на телефоне или разъехались, хватит вёрстки. Если устарел весь внешний вид, выгоднее редизайн. Начните с бесплатного экспресс-аудита.
Работаете с компаниями не из Петербурга?
Да. Мы в Санкт-Петербурге, но верстаем сайты компаний по всей России. Вся работа идёт онлайн.
Как проходит оплата?
По договору, без НДС, любым удобным способом. Оплачиваете выполненные задачи после отчёта, ежемесячного платежа нет.
Вёрстка сайта: что стоит знать перед заказом
Подробности о том, как мы верстаем, и о том, что владельцу сайта полезно проверить самому.
Как проверить мобильную версию самому
Откройте сайт с телефона и пройдите путь клиента: найдите услугу, откройте прайс, отправьте заявку. Всё, что пришлось увеличивать пальцами или прокручивать вбок, — задачи для вёрстки.
На компьютере поможет режим устройства в инструментах разработчика браузера. Но реальный телефон он не заменяет: клавиатура, касания и Safari ведут себя иначе.
Зачем нужен метатег viewport
Без него мобильный браузер считает страницу широкой, как на мониторе, и показывает её уменьшенной. MDN советует всегда добавлять этот метатег (документация MDN).
Это одна строка в шаблоне, но без неё адаптивная вёрстка не заработает. На старых сайтах её отсутствие — частая причина мелкого текста.
Точки перелома — по контенту
Раньше вёрстку подгоняли под модели телефонов. web.dev советует менять раскладку там, где начинает ломаться контент (web.dev).
Так страница нормально выглядит и на устройствах, которых ещё нет. Мы растягиваем страницу от узкой ширины к широкой и правим места, где блоки начинают мешать друг другу.
Почему мобильная версия не должна быть урезанной
Раньше на телефоне прятали тексты и часть блоков. Сейчас это вредно: Google оценивает сайт по мобильной версии, и скрытый контент для него теряется.
Поэтому на телефоне показываем всё важное, но компактнее: аккордеоны, прокрутка внутри таблиц, карточки вместо широких колонок.
Кнопки и формы под палец
Палец крупнее курсора. web.dev рекомендует зону нажатия около 48 пикселей и расстояние около 8 пикселей между соседними элементами (web.dev).
Для полей формы задаём правильный тип: для телефона открывается цифровая клавиатура, для почты — с символом @. Мелочь, которая влияет на число заявок.
Изображения для разных экранов
Телефону не нужна картинка шириной в монитор. Через srcset и picture браузер выбирает подходящий размер (MDN).
Ещё задаём изображениям размеры или пропорции. Тогда браузер заранее оставляет под них место, и текст не прыгает при загрузке.
Таблицы и прайсы на телефоне
Широкая таблица — самая частая причина горизонтальной прокрутки. Есть два решения: прокрутка внутри самой таблицы или перестройка строк в карточки.
Выбираем по смыслу. Прайс из трёх колонок удобнее карточками, сравнение характеристик — прокруткой с закреплённой первой колонкой.
Что передать верстальщику вместе с макетом
Мобильные версии хотя бы ключевых экранов, UI-кит с кнопками и полями, состояния элементов, шрифты с веб-лицензией и реальные тексты.
Чем полнее макет, тем точнее оценка и меньше согласований. Если чего-то нет, мы скажем об этом до начала работ, а не посреди них.
Вёрстка и обновления CMS
Правки прямо в основной теме WordPress или в системных компонентах 1С-Битрикс пропадают при первом обновлении. Поэтому работаем в дочерней теме и своём шаблоне.
Если до нас правили «в обход», переносим изменения в правильное место. Так сайт снова можно спокойно обновлять.
Вёрстка и скорость загрузки
Тяжёлый слайдер на первом экране, десяток шрифтов и лишние скрипты ухудшают LCP и INP. Хорошие значения — до 2,5 с и до 200 мс (web.dev).
При вёрстке не добавляем лишнего и проверяем вес страницы. Подробнее о причинах медленной загрузки — в статье о скорости сайта.
Вёрстка и SEO
Вёрстка влияет на поиск через удобство: мобильная версия, скорость, стабильность. Но сама по себе позиции не поднимает.
Мы следим, чтобы при вёрстке сохранились заголовки H1–H3, тексты, адреса и микроразметка. Рост трафика — отдельная работа: SEO-продвижение или ведение сайта.
Когда верстать заново дешевле, чем править
Если тема собрана из десятков чужих правок, каждая новая задача дорожает. В какой-то момент выгоднее сверстать шаблоны заново или сделать редизайн.
Мы скажем об этом при оценке, если увидим, что правки по одной обойдутся дороже. Решение остаётся за вами.
Вёрстка сайтов в СПб и по всей России
Вёрстка сайта — это перевод дизайна в код страницы: сетка, блоки, шрифты, кнопки и формы, которые одинаково хорошо работают на телефоне и компьютере. Еллоу Медиа верстает для готовых сайтов и встраивает результат в CMS.
Адаптивная вёрстка и мобильная версия
Делаем мобильную версию сайта на тех же адресах: одна страница подстраивается под ширину экрана. Проверяем на узких телефонах, планшетах и мониторах, в Chrome, Safari, Firefox и Яндекс Браузере.
Вёрстка по макету и многостраничных сайтов
Верстаем по макету Figma шаблоны многостраничного сайта: главную, разделы, услуги, карточки товаров, статьи. Работаем с WordPress, 1С-Битрикс, OpenCart, MODX и самописными сайтами.
Сколько стоит вёрстка сайта
Правка вёрстки — от 2 000 ₽, адаптивная вёрстка — от 12 000 ₽. Вёрстка по макету и многостраничная вёрстка — по фиксированной смете после оценки. Почасовой оплаты нет: цена задачи не меняется в работе. Работаем по договору, без НДС.
Заказать вёрстку сайта в Санкт-Петербурге
Мы находимся в Санкт-Петербурге, на набережной канала Грибоедова, 35, и верстаем сайты компаний по всей России онлайн. Контакты — на странице «Контакты».
Другие работы по сайту — в разделе «Доработка сайтов». Задачи идут постоянно — подключите техническую поддержку. Или оставьте заявку — оценим вёрстку вашего сайта.
Заказать вёрстку сайта
Пришлите адрес сайта, скриншоты или ссылку на макет — оценим вёрстку и пришлём план со стоимостью.
Оставить заявку
Ответим в течение рабочего дня и назовём стоимость.
Контакты
- +7 812 448-57-64
- infoyellowmedia.ru
- Санкт-Петербург, наб. канала Грибоедова, 35
- Пн–Пт с 10:00 до 19:00