Креативное бюро 77 занимается версткой с середины 90-х, в те времена занимались версткой брошюр, инструкций и прочей многостраничной полиграфической продукции. Первые сайты были сверстаны в 1999-м году в табличном дизайне. На верстку с использованием каскадных таблиц стилей перешли в 2001-м, не прекращая при этом работу с полиграфическими материалами: каталогами, буклетами и пр. За эти годы наработан следующий подход к верстке сайтов:
- Mobile first. В первую очередь сайт верстается для удобного просмотра с мобильных устройств.
- Адаптивная и кросс-браузерная верстка. Одинаковый внешний вид сайта на любых устройствах с любыми браузерами.
- Использование шаблонизаторов и фреймворков. Короткие сроки работ и в случае необходимости упрощение обслуживание сайта силами заказчика (его сотрудники или фрилансеры): править внешний вид сайта сможет любой человек, знакомый с основами верстки. При верстке сайтов Бюро использует фреймворки Bootstrap v.5.3 и ZURB Foundation v.6.7.
- Анализ макета: Веб-разработчики внимательно изучают предоставленный макет сайта. Они анализируют разметку, внешний вид элементов, типографику, цветовую схему и другие детали макета.
- Создание HTML-структуры: прорабатывается структура HTML-разметки, которая соответствует макету. Определяются контейнеры, блоки, секции и расположение элементов на странице в соответствии с дизайном.
- Применение стилей с помощью CSS: добавляются стили CSS, чтобы придать элементам макета нужный внешний вид. Стили задают цвета, размеры, шрифты, отступы и другие свойства элементов.
- Работа с изображениями: Изображения из макета обрабатываются и оптимизируются для веб-формата. Они вставляются на страницу и масштабируются в соответствии с дизайном.
- Разработка адаптивности: Современные веб-сайты должны быть адаптивными и хорошо отображаться на различных устройствах, таких как смартфоны и планшеты. Верстка должна быть адаптирована под различные разрешения экранов.
- Использование JavaScript: При необходимости добавляются интерактивность и функциональность с помощью скриптов. Это может включать создание выпадающих меню, слайдеров, форм обратной связи и других интерактивных элементов.
- Тестирование: После завершения верстки, проводится тестирование на различных браузерах и устройствах, чтобы убедиться в корректности отображения и функционирования.
- Запуск сайта: После успешного завершения всех тестов, сайт размещается на сервере и запускается для пользователей.
Важно отметить, что верстка сайта по макету в виде картинки – это первый этап процесса создания веб-сайта. После верстки, разработчики могут добавлять дополнительную функциональность, подключать базу данных, создавать серверную часть и выполнять другие задачи, необходимые для полноценного функционирования сайта.
По окончании работ Заказчик получает исходные файлы и дистрибутив, в который можно вносить изменения. Достаточно иметь представление об основных HTML-тегах и атрибутах, понимать общие принципы CSS и типографики, знать какие бывают графические форматы. В общем-то вот и все. Вышеуказанный объем знаний становится доступен компьютерно-грамотному пользователю в течение месяца.
