Вёрстка сайта

Статическая html-вёрстка сайта это процесс переработки дизайн-макетов в  текстовые файлы, которые могут быть открыты в браузере как веб-страницы.

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

Как правило, на этом этапе работ верстают только уникальные страницы и блоки — из которых в дальнейшем будет собран весь сайт. Верстать повторяющиеся страницы (например, все карточки товаров), по сути неблагодарное занятие.

В зависимости от сложности сайта и дизайна, статическая верстка может включать одну или несколько html страниц, а также несколько папок вспомогательных файлов (картинок, javascript файлов, стилей и т. д.).

Технологии html-верстки

При создании статической верстки используется множество технологий, которые позволяют сократить время разработки, структурировать блоки сайта, облегчить дальнейшее сопровождение и развитие сайта, обеспечить нормальное отображение сайта в различных браузерах и на различных устройствах. Так, например, в WebProfy используется:

• наименование классов по методалогии БЭМ,
• метаязыки SCSS и Jade,
• препроцессор gulp,
• различные скрипты для обеспечения обратной совместимости со старыми браузерами, корректного отображения сайта на retina-дисплеях и проч.

Совместимость и оптимизация

При верстке, как правило, учитывается отображение сайта в актуальных версий следующих браузеров: Opera, Chrome, Firefox, Yandex browser, Safari, Internet Explorer 11 или более старшие версии. В данный версиях статическая верстка включает в себя все задуманные эффекты.

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

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

Помимо работоспособности и визуального отображения верстка проверяется и оптимизируется под требования браузеров и поисковых систем. Верстка проверяется с помощью следующих инструментов: Google Page Speed, Google Mobile Friendly, W3C Validator, CSS Lint, JS Lint, Google Chrome Timeline performance. Это обеспечивает более быструю загрузку и работоспособность сайта в браузере пользователя.

См. также материалы для разработчиков