Вёрстка сайта в Москве

Что такое вёрстка сайта

Дизайнер рисует страницу в Figma. Это картинка: её нельзя открыть в браузере, по ней нельзя кликнуть. Верстальщик переводит макет в код на HTML, CSS и JavaScript. После вёрстки страница живёт в браузере, реагирует на нажатия и подстраивается под размер экрана.

«Типичная ошибка — выбирать логотип по вкусу руководителя. Мы начинаем со смыслов бизнеса и того, чем вы отличаетесь, а форма, цвет и шрифт вытекают из этого, а не из случайных предпочтений.»

— Команда SeoSpurt

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

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

Мы описываем состав работ до старта, чтобы не было споров на приёмке. Базовый набор такой.

• Разбор макета. Смотрим, все ли состояния нарисованы: наведение, ошибка в форме, пустая корзина, мобильное меню. Недостающее согласуем с дизайнером до вёрстки.
• Сетка страницы. Переносим сетку и отступы из Figma, настраиваем контрольные точки адаптива.
• Компоненты. Кнопки, карточки, формы, слайдеры верстаем один раз и используем на всех страницах.
• Адаптив. Проверяем каждую страницу на ширине телефона, планшета и настольного экрана.
• Кроссбраузерность. Сверяем отображение в актуальных версиях распространённых браузеров.
• Оптимизация. Сжимаем картинки, подключаем современные форматы, убираем неиспользуемые стили.
• Передача в CMS. Натягиваем шаблоны на движок или отдаём архив с кодом, если сайт собирает ваша команда.

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

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

Что мы проверяем в макете до начала

Макет редко бывает полным. Часто нарисована только настольная версия, а мобильная остаётся «на усмотрение верстальщика». Бывает, что в разных блоках стоят разные оттенки одного цвета или похожие, но не одинаковые отступы.

Такие места мы выписываем списком и отправляем дизайнеру. Решение принимается один раз, до кода. Так вёрстка не растягивается бесконечными правками после приёмки.

Когда макета нет

Иногда приходят с референсом: «сделайте как у этого сайта». Верстать чужой сайт один в один мы не берёмся. В таком случае предлагаем начать с дизайна, чтобы у страницы был свой облик и продуманная логика.

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

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

Мы не просто сжимаем страницу. На узком экране блоки меняют порядок, таблицы превращаются в карточки, меню прячется в кнопку. Главное действие страницы — кнопка заявки или телефон — остаётся под рукой на любом экране.

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

Кроссбраузерность

Один и тот же код браузеры иногда показывают по-разному. Где-то съезжает форма, где-то не работает анимация. Мы проверяем вёрстку в распространённых браузерах на компьютере и телефоне, а найденные расхождения исправляем до сдачи.

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

Семантическая разметка

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

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

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

Мы держим код лёгким:

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

Если сайт уже работает и тормозит, это отдельная задача. Для неё у нас есть услуга ускорения загрузки сайта.

Передача вёрстки в CMS

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

WordPress

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

1С-Битрикс

Нужен, когда есть обмен с 1С, большой каталог или сложные права доступа. Вёрстку разбиваем на компоненты Битрикса, чтобы контент-менеджер работал через привычную админку. Подробнее — на странице разработки на 1С-Битрикс.

Архив с кодом

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

Частые ошибки вёрстки

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

Текст картинкой

Заголовок или цена вставлены изображением. Выглядит аккуратно, но поисковик такой текст не читает, а на телефоне он становится мелким. Любой текст мы верстаем текстом.

Страница прыгает при загрузке

Картинки и баннеры подгружаются без заданных размеров. Посетитель тянется к кнопке, а она уезжает вниз. Мы задаём размеры заранее, поэтому блоки стоят на месте.

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

Иногда под телефон делают вторую копию страниц. Её приходится править дважды, и рано или поздно версии расходятся. Мы делаем одну страницу, которая подстраивается под экран.

Каждая страница свёрстана заново

Одна и та же кнопка написана десятком разных способов. Любая правка превращается в поиск по всему коду. Мы собираем повторяющиеся элементы в компоненты, поэтому правка в одном месте меняет их везде.

Скрипты ради мелочей

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

Как принимать вёрстку

Приёмка — ваш шанс увидеть сайт глазами посетителя. Мы советуем проверять не только настольный экран, но и свой телефон. Вот короткий список того, на что смотреть.

• совпадают ли шрифты, цвета, отступы с макетом;
• удобно ли читать текст на телефоне без увеличения;
• работают ли меню, формы, кнопки заявки;
• как выглядят длинные заголовки и пустые состояния;
• открывается ли страница быстро на мобильном интернете.

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

Что остаётся у вас после сдачи

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

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

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

Кому отдельная вёрстка не подойдёт

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

• Нет макета. Верстать без дизайна значит придумывать его на ходу. Начните с дизайна или прототипа.
• Нужен сайт под ключ. Если ещё нет ни движка, ни программиста, вёрстка — только часть работы. Удобнее заказать разработку сайта целиком.
• Нужна копия чужого сайта. Такие задачи мы не берём.
• Макет на конструкторе. Если сайт собран в конструкторе, перенос вёрстки в код обычно означает новую разработку.

Как мы работаем

1. Разбор макета. Смотрим макет, задаём вопросы, называем стоимость вёрстки.
2. Договор. Фиксируем состав работ, порядок приёмки и оплаты.
3. Вёрстка шаблонов. Сначала общие компоненты, потом страницы.
4. Проверка. Адаптив, браузеры, скорость, разметка.
5. Передача. Подключаем к CMS или отдаём архив.
6. Приёмка. Вы смотрите страницы на своих устройствах, мы исправляем замечания.

Работаем по договору. В нём прописаны состав работ, порядок приёмки и то, что считается доработкой сверх объёма.

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

Вёрстка входит в разработку сайта от 80 000 ₽. В эту сумму уже заложены дизайн, вёрстка, подключение к CMS и запуск.

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

Срок работ

Срок — от 2 недель. Точные даты фиксируем в договоре.