Как не переплачивать за верстку сайта

Часто заказчики недооценивают важность HTML-верстки и воспринимают её как промежуточный этап между дизайном и разработкой сайта. Некоторые команды даже не указывают верстку в смете, чтобы у клиентов не появлялось лишних вопросов.

В этой публикации мы объясним, почему верстка — это не просто перевод дизайнерских макетов в HTML-теги, а важный процесс, от качества выполнения которого зависит успех вашего проекта.

Распространенные заблуждения, связанные с процессом верстки веб-страниц

Под версткой часто понимают перевод макета дизайна в HTML-код: сначала веб-дизайнер создает оформление сайта в графическом редакторе, после чего верстальщик «нарезает» макет на отдельные изображения и переводит их в код с использованием HTML, CSS.

На первый взгляд это кажется неплохой идеей — прежде чем проект уйдет на разработку, заказчик может поэкспериментировать с дизайном и понять, устраивает ли его окончательный вид продукта. Однако такой подход перестает быть актуальным.

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

Этот портрет, стилизованный под полотна XVIII века, написан чистым CSS-кодом. Если у вас крепкие нервы, то кликните по изображению, чтобы увидеть как эта же картина выглядит в Internet Explorer 9.

Во-вторых, если раньше интернет был доступен в основном с персональных компьютеров, и достаточно было создать сайт с разрешением 1024×768, то сегодня пользователи могу войти в сеть с чего угодно, даже с холодильника. Дизайнер больше не может ориентироваться на единое разрешение, а адаптивная верстка стала стандартом отрасли.

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

Значит ли это, что верстка в традиционном ее понимании умерла?

Совсем нет. Графические редакторы, вроде продуктов Adobe по-прежнему очень важны для веб-дизайна. А этап верстки также играет большую роль в успехе проекта. Однако, необходимо принимать во внимание современные сложности связанные с проектированием веб-сайтов.

В Photoshop все еще удобно составлять макеты для дизайна сайтов. Высококачественный детальный макет поможет обсудить с заказчиком спорные моменты прежде чем вы приступите к написанию кода.

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

Семантика и SEO сайта тоже напрямую связаны с качеством верстки. Браузер быстро выдает по поисковому запросу адрес или телефон предприятия, указанные на сайте, потому что программист правильно прописал отвечающие за эту информацию теги.

Более того, от квалификации верстальщика во многом зависят дальнейшая поддержка и масштабирование сайта: при некачественной верстке страница похожа на набор несвязанных между собой блоков, и чем больше их становится, тем сложнее такой сайт поддерживать. И любое новое изменение может повлечь за собой другие, совсем неочевидные изменения, следуя «принципу домино».

Теперь давайте рассмотрим несколько типичных примеров из практики:

Добавление новых элементов
Качественная верстка должна предусматривать масштабирование сайта

На сайте ЭкоДжут требовалось добавить новый пункт меню. Такая простая задача из-за некачественной верстки превратилась в проблему. Верстка сайта не предполагала дальнейших добавлений и расширений функционала. Интеграция нового пункта в шапке сайта привела к тому, что все элементы стали «наезжать» друг на друга.


В нашей практики бывали случаи, когда верстальщик для внешне похожих страниц составлял разную структуру. Например, на главной странице у тега body нет класса, но на другой он задан. Таким образом, множество разных стилей отвечали за похожие вещи, что приводило к путанице в наименованиях.

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

В таких случаях приходится прибегать к быстрым решениям, которые не исправляют проблему целиком. Проще говоря, в код сайта приходится вставлять «костыли». Такой подход только утяжеляет сайт и делает его дальнейшую поддержку дороже.

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

Полная переработка верстки
Временные решения мелких проблем могут только отсрочить неизбежное

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


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

Так, например, был написан блок для обычной версии:

А вот так для мобильной:


В итоге на переработку верстки и ее повторную интеграцию ушло 60 часов, что задержало запуск интернет-магазина на две недели.

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

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

Например, при обновлении нашего сайта в разделе «Портфолио» верстальщик задала класс стилей родительскому блоку, который привязан к контентной части. Открывающий тег этого блока расположен в шапке сайта, а закрывающий, соответственно, — в подвале.

Стилизация контентной части осуществляется с помощью установки класса в родительском блоке. Имя класса соответствует контенту страницы (например “case--bank”).

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

Заметив такой недостаток, разработчик направил верстку на доработку и не тратил лишнее время на интеграцию, заодно предотвратив будущие сложности.


Как обезопасить себя от дополнительных расходов и убедиться, что вся работа будет выполнена качественно?

Действительно, во всех описанных случаях заказчик не подозревал о проблемах на своем проекте, и, не обладая нужными техническими знаниями, принимал работу верстальщика по внешнему виду, не заглядывая «под капот».

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

Верстка сайта в обмен на еду — заманчивое предложение.

К сожалению, часто происходит так, что программисты-верстальщики не уделяют достаточно времени тестированию продукта. Не проверяют стабильность работы в разных браузерах с разными разрешениями и так далее. Помимо прочего, верстка часто начинается не с «чистого листа», а с уже готовых решений, которые использовались на других проектах и подгоняются под нужды новых. Таким образом, на сайте может использоваться множество вещей, которые в действительности ему не нужны и только мешают стабильной работе и замедляют время загрузки.

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

В команде Work Solutions есть верстальщики, которые тесно общаются с фронтенд-разработчиками и оперативно вносят необходимые изменения в проект, прежде чем передать его на интеграцию, так как они несут ответственность не только перед заказчиком, но и перед коллективом.

Такой подход гарантировано убережет от неоправданных расходов и переплат.

На данном сайте собираются метаданные пользователя (cookie, данные об IP-адресе и местоположении) для функционирования сайта. Если Вы не хотите чтобы эти данные обрабатывались, то должны покинуть сайт

Заявка
на сотрудничество

Как вас зовут? Заполните это поле
Адрес электронной почты Неверный формат почты
Телефон для связи Заполните это поле
Нажимая на кнопку «Отправить заявку»,
я даю согласие на обработку персональных данных