Принципы верстки сайтов, которых мы придерживаемся
Семантическая верстка (блочная)
строим сайт на основе блоков, применяя семантические теги, таким образом мы добиваемся понятной структуры, где элементы вкладываются один в другой. Такую верстку легко править, а значит и поддерживать сайт в дальнейшем будет просто.
Flexbox-верстка, адаптивная
задаем поведение отдельным элементам и блокам для разных разрешений экрана. При этом для отрисованных разрешений контролируем результат с помощью дизайн-макета, а на промежуточных не допускаем появления полосы прокрутки, наложения элементов друг на друга, “кривой” верстки.
Валидная верстка
верстка без ошибок в W3C валидаторе (World Wide Web Consortium - принятый стандарт в вебе) - важно не только для корректной работы сайта, но и для SEO продвижения.
Кроссбраузерная верстка
сайт открывается одинакового хорошо в разных браузерах (Chrome, Firefox, Safari, Opera, Edge, Яндекс.Браузер).
Кроссплатформенная верстка
правильная работа сайта на разных устройствах (desktop, Android, IOS, Windows Phone).
Сколько стоит верстка сайта
Стоимость верстки зависит от количества страниц, кол-ва и сложности уникальных блоков,соответствия дизайн-макета требованиям. Условно можно разбить на 3 вида проектов:
Лендинг
- одностраничный сайт (1 шаблон);
- 1 тип шапки;
- без меню или одноуровневое меню;
- 1 тип футера;
- до 10 разных блоков.
Корпоративный сайт
- многостраничный сайт (2+ шаблонов);
- 1 тип шапки;
- многоуровневое меню;
- 1 тип футера;
- до 15 разных блоков.
Интернет-магазин
- многостраничный сайт (5+ шаблонов);
- 2 и более типов шапки;
- многоуровневое меню;
- 2 и более типов футера;
- до 20 разных блоков.
Сложности верстки сайта
Мы беремся за работу любой сложности, однако у верстальщика могут возникнуть дополнительные временные затраты или дополнительные вопросы, если дизайн-макет делаем не мы и в нем есть определенные ошибки, например:
- отсутствует дизайн для адаптивных версий (только дизайн для десктопной версии, без мобильной);
- дизайн-макет построен не по сетке, т.е. элементы сайта отрисованы без привязки к колоночной сетке;
- расстояния между элементами приняты хаотично, когда нет стандартных отступов между блоками, элементами;
- смешанное использование на сайте 2ух и более шрифтов;
- отсутствие отрисованных состояний для элементов взаимодействия (например для кнопок состояния при наведении и клике);
- непродуманный UX и путь пользователя (например интернет магазин без отрисованной корзины и оформления доставки);
- отсутствие комментариев с указаниями от веб-дизайнера как верстать активные элементы или анимаций в интерфейсе.
Как происходит верстка сайта у нас
Веб-дизайн
Разрабатываем с нуля (дизайн в Figma, готовый для передачи в работу дизайнером верстальщику) или используем ваш дизайн-макет.
Разметка страницы HTML
Составляем структуру страницы, с учетом требований W3C и семантической верстки. Результат проверяем с помощью валидатора.
Добавление стилей CSS
Добавления свойств CSS для классов и HTML элементов для визуального соответствия сайта дизайн-макету. Проверяем валидатором.
Настройка работы JS
Процесс “оживления” сайта, добавляем модальные окна, анимации и др. динамические элементы.
Проверка в Pixel Perfect
Важный этап, когда проверяем готовую работу под каждый адаптив макета на соответствие согласованному дизайну, при нахождении отклонений - корректируем.
Окончательная настройка
Передача верстки бекенд разработчику или, если не требуется CMS, заливка ресурса на хостинг, привязка домена.
Наши клиенты
Наши клиенты
