Статья
Вёрстка сайта: что это простыми словами
Вёрстка — это превращение макета в настоящую страницу: дизайнер нарисовал, как сайт должен выглядеть, а разработчик описал это кодом, который понимает браузер. От вёрстки зависит, совпадёт ли сайт с макетом, будет ли он быстрым и удобным на телефоне. Разбираем, как устроен этот этап и что проверить заказчику.
Что это такое
Страница сайта состоит из трёх слоёв:
- HTML — структура: заголовки, абзацы, картинки, кнопки, формы;
- CSS — внешний вид: цвета, шрифты, отступы, расположение блоков;
- JavaScript — поведение: анимации, всплывающие окна, отправка форм.
Вёрстка — это прежде всего HTML и CSS, собранные по макету. Её место в работе над сайтом такое: прототип, макет, вёрстка, подключение функций, запуск. О макете — статья «Макет сайта», о всех этапах — «Этапы разработки сайта».
Адаптивная вёрстка
Адаптивная вёрстка — это когда одна и та же страница перестраивается под ширину экрана: колонки встают одна под другую, меню сворачивается в кнопку, шрифты и отступы становятся удобными для пальца. Ширины, на которых раскладка меняется, называют контрольными точками. Чем это отличается от отдельной мобильной версии и что проверить на телефоне, разобрано в статье «Мобильная версия сайта».
На конструкторе и на коде
На конструкторе вёрстку делает сама платформа: вы собираете страницу из готовых блоков. На коде разработчик пишет вёрстку под ваш макет — свободы больше, а лишнего кода меньше, поэтому страница обычно грузится быстрее. Подробное сравнение — в статье «Тильда или сайт на коде».
Что проверить заказчику
- Совпадает с макетом на компьютере и на телефоне — не до пикселя, но без заметных расхождений.
- Работает в основных браузерах: Chrome, Safari, Яндекс Браузере, Firefox.
- Тексты не вылезают за края, ничего не налезает друг на друга при длинных словах и больших цифрах.
- Кнопки и ссылки удобно нажимать пальцем.
- Страница быстро грузится — как проверить, разобрано в статье «Скорость загрузки сайта».
- Формы отправляются — проверьте тестовой заявкой.
Сколько стоит
Цена вёрстки зависит от числа уникальных блоков и страниц, анимаций и того, нужна ли отдельная проработка под телефон. У нас вёрстка — часть разработки: лендинг на коде мы делаем целиком, от структуры до запуска, поэтому отдельной цены у неё нет.
Как это делаем мы
Вёрстку делаем на коде после того, как вы согласовали макет: так страница быстро загружается на телефоне и медленном интернете. Перед запуском проверяем сайт на реальных устройствах.