Вёрстка сайта — это превращение макета в работающие страницы: структуру на HTML, оформление на CSS и поведение на JavaScript. Мы верстаем сайты на платформе Shopnseo и отвечаем за структуру и разметку: чистый HTML, понятные шаблоны, сайт, который одинаково хорошо работает на телефоне и на компьютере.
Что входит в вёрстку сайта
- Разбор макета. Изучаем макет: сетку, типографику, цвета, состояния элементов — и уточняем неясные места до начала работы.
- HTML-структура. Контейнеры, блоки, заголовки и списки в правильном порядке: чистый, читаемый код, который понимают и поисковики, и люди.
- Стили. Оформление на CSS (пишем на Sass, опираемся на Bootstrap 5); все размеры задаём в относительных единицах (em), чтобы сайт масштабировался вместе с экраном.
- Интерактив. Меню, галереи, формы, всплывающие окна — на JavaScript там, где без него нельзя.
- Проверка. Смотрим результат в основных браузерах, на телефоне и планшете, проверяем код валидатором W3C.
- Передача. Отдаём готовые шаблоны и описание структуры, чтобы с ними могли работать дальше.
Адаптивная вёрстка
Адаптивная вёрстка — сайт подстраивается под размер экрана: на телефоне, планшете и компьютере он выглядит и работает удобно. Мы верстаем «сначала для телефона» (mobile first): гибкая сетка в относительных единицах, изображения, которые масштабируются под доступное место, и медиазапросы для разных ширин экрана. Читаемость и удобство нажатия важнее, чем идеальное совпадение картинки на всех устройствах.
Кроссбраузерная вёрстка
Один и тот же сайт в Chrome, Firefox, Safari и Edge должен выглядеть и работать одинаково. Используем стандартные HTML и CSS, а там, где браузеры расходятся, предусматриваем запасные решения для старых версий.
Вёрстка по макету
Макет может быть вашим (из Figma или другого редактора) или сделанным в студии kb77.ru — партнёрской студии дизайна. Верстаем строго по утверждённому макету; если что-то в нём нельзя сделать без потери удобства, сообщаем сразу, а не в конце. Если нужна своя структура страниц на платформе, правим шаблоны через панель «Шаблон».
Сколько стоит вёрстка сайта
Стоимость считаем по смете: она зависит от числа разных типов страниц в макете, сложности интерактива и адаптивных состояний. Разовые цены установки сайта на платформе — на странице цен.
Как заказать вёрстку
Напишите на info@seowebdev.ru: пришлите макет или ссылку на него и коротко опишите, что нужно получить. Мы посмотрим макет и ответим, как будет проходить работа.
Что делаем не мы
Мы не рисуем макеты — за дизайн отвечает kb77.ru. Тексты и наполнение сайта — seoforger.ru. Если вам нужен сайт целиком, смотрите разработку сайта под ключ; одна страница под одну услугу — лендинг; техническую проверку готового сайта делаем в рамках технического SEO.