Вёрстка сайта 1 в 1 по макету в Москве

Первым делом открываем ваши макеты в Figma или Photoshop, а затем внимательно изучаем. Не «посмотрели по диагонали», а прям с лупой проверяем — все ли слои названы по-человечески, не потерялись ли шрифты, есть ли состояния для кнопок (наведение, нажатие, неактивна), проработаны ли адаптивные версии под планшет или телефон.

Часто дизайнер рисует красиво, но не думает о том, как это будет верстаться. Например, использует сломанные сетки, нереальные отступы или шрифты, которых нет в открытом доступе. Мы такие моменты вылавливаем, сразу фиксируем в ТЗ до старта работ. Согласовываем с вами объём, сроки и цену. Никаких «ой, а тут надо было ещё три состояния кнопки, мы не учли».

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

Мнение нашего front-end разработчика: «80 % косяков на этапе вёрстки закладываются в кривых макетах. Если дизайнер забыл нарисовать, как выглядит выпадающее меню на мобилке, — мы либо додумываем сами (при этом рискуем ошибиться), либо дёргаем вас за уточнениями (а значит теряем время). Аудит макетов до старта экономит всем нервы и деньги».

Сетка утверждена, шрифты подключены, ТЗ на руках, значит начинается основная часть работы. Мы пишем чистый HTML/CSS-код с принципом не «лишь бы работало», а так, чтобы его не стыдно было показать другим разработчикам. Семантическая вёрстка, правильная вложенность блоков, осмысленные классы (не .block1, а .header, .product-card).

Каждая страница верстается по принципу Pixel Perfect — максимальное приближение к дизайну. Но без фанатизма, так как если в макете отступ 15.7 пикселя, а браузер округляет до 16 — мы не будем переделывать 10 раз. Договоримся о допустимых погрешностях на берегу.

Структуру кода строим так, чтобы её легко было «пересадить» на любую CMS — «Битрикс», WordPress, OpenCart. Вы не платите за переписывание, когда решите добавить сайт на движок. Всё уже готово, бери и ставь.

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

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

Мы не делаем «резиновую» вёрстку (которая просто сжимается и превращает текст в нечитаемую мелочь). Мы делаем адаптивную: меняется расположение блоков, размер шрифтов, поведение меню. На десктопе — горизонтальное меню в шапке. На планшете — оно же, но чуть компактнее. На телефоне — аккуратное бургер-меню, которое не раздражает.

Прописываем все ключевые разрешения:

• десктоп: 1920px, 1440px, 1280px, 1024px;
• планшет: 768px (вертикальная и горизонтальная ориентация);
• мобилка: 480px, 375px, 320px.

Проверяем на реальных устройствах, а не только в эмуляторе браузера. Потому что эмулятор — это хорошо, но старый iPhone 8 с его глюками — это реальность.

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

Используем чистый JavaScript (без монструозных jQuery-библиотек, которые тянут сайт вниз). Подключаем только то, что реально нужно:

• выпадающие меню и аккордеоны;
• слайдеры и карусели;
• табы и переключатели вкладок;
• формы с валидацией (проверка на пустые поля, формат email, телефон);
• всплывающие окна (попапы) с заявками;
• лёгкая анимация при скролле или наведении.

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

На этом этапе получаем полностью рабочую HTML-страницу, где всё нажимается, листается, проверяется и закрывается. Как живой сайт, только без бэкенда.

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

Что проверяем:

• Pixel Perfect. Сравниваем каждый блок с макетом. Допустимые отклонения — не более 2-3 пикселей.
• Адаптив. Вертим экран, смотрим на реальных устройствах (или в BrowserStack). Меню не разваливается, текст читабелен, кнопки не съезжают.
• Кроссбраузерность. Запускаем в Chrome, Firefox, Safari, Edge. В последних версиях и в двух-трёх старых (на случай, если у клиента не обновлён браузер).
• Скорость. Прогоняем через Google PageSpeed Insights. Цель — минимум 90 баллов для десктопа и 70 для мобилок.
• Интерактив. Кликаем везде, где можно кликнуть. Формы отправляем с пустыми полями, с кривым email, с правильными данными. Валидация должна ругаться, когда надо, и пропускать, когда всё ок.

Найденные ошибки фиксируем, отдаём верстальщику, правим. Потом тестируем снова и так по кругу, пока не останется ни одного бага.

Всё готово, тесты пройдены. Вы получаете архив с исходниками:

• все HTML-файлы;
• CSS-стили (разбитые по папкам, с комментариями);
• JS-скрипты (чистые, без мусора);
• оптимизированные изображения (в том числе для ретины);
• шрифты (с лицензиями, если нужно);
• краткую инструкцию по интеграции в CMS.

На этом работа не заканчивается, так как после сдачи проекта мы даём 1 месяц бесплатной поддержки. В течение этого срока:

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

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

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