Верстка: самый загадочный процесс веб-разработки

Екатерина Шукалова: Здравствуйте, дорогие друзья! Сегодня с вами опять Екатерина Шукалова и наша передача «Бизнес Online». Мы продолжаем разбираться с веб-мастерингом: как делать сайт, как делать его правильно, алгоритмично и с пользой для вашего бизнеса. Наша очередная передача посвящена совершенно загадочному этапу — HTML-верстке. У меня в гостях Кирилл Мельничук, технический директор агентства Alterego. И мы с ним сегодня поговорим про верстку.?

Кирилл Мельничук, сооснователь digital-агентства Alterego.
Родился в 1988 году в Краматорске.
В 2010 году окончил факультет автоматизации машиностроения и информационных технологий Донбасской государственной машиностроительной академии.
С 2008 года — сооснователь и технический директор агентства Alterego.?
С 2014 года — директор по IT финансовой группы «Национальный кредит».

Е. Ш.: Кирилл, скажи, ты любишь верстку?
Кирилл Мельничук: Нет.
Е. Ш.: Совсем?
К. М.: Я давным-давно не верстаю сам. Но с точки зрения верстки все-таки нельзя сказать, люблю или не люблю, потому что верстка — это код. Больше нравится результат верстки. Вот об этом мы уже можем говорить как о чем-то, что нравится. А нравится верстка как процесс, наверное, только веб-технологам, которые им занимаются.
Е. Ш.: Сегодня именно о веб-технологиях мы и будем говорить, потому что очень важно дать нашим слушателям понимание того, почему верстка стоит дорого, дешево, как клиенту проверить, насколько студия или агентство хорошо работает по верстке.
Итак, этап верстки начинается, когда мы прошли огонь, воду и медные трубы с веб-дизайном. Я думаю, что у тебя в агентстве тоже всегда куча проблем, связанных с веб-дизайном, с веб-дизайнерами и т. д. В какой-то момент макет благополучно переходит к верстальщику. Вот что говорит нам Wikipedia о том, что это такое: «Верстка веб-страниц — это процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, следующий этап после веб-дизайна, а также результат этого процесса, то есть собственно веб-страницы». Скажи, пожалуйста, какие ассоциации ты даешь клиенту, когда объясняешь, что такое верстка? Потому что, судя по моей практике, объяснить это клиенту, обычному человеку, особенно малому предпринимателю или тому, кто открывает интернет-магазин, достаточно тяжело. Какие у тебя есть ассоциации, для того чтобы объяснить клиенту, что это верстка?
К. М.: Есть разные варианты, в зависимости от того, насколько технически подкован человек в принципе и насколько у него большой опыт работы с подрядчиками в разработке сайта со стороны клиента. Если мы говорим о человеке, который вообще ничего не понимает…
Е. Ш.: Вообще ничего не понимает, да.
К. М.: …то самый простой вариант — показать ему какой-то макет из предыдущих проектов в виде картинки и дать ссылочку на страницы, где уже есть сверстанные макеты дизайна. И чтобы он в браузере поиграл им, поменял размеры, например, если это «резиновая» или адаптивная верстка. Тогда он сразу видит, как все меняется, что статичная картинка — это одно, а то, что отображается в браузере, — это другое. Там уже текст можно выделить, формочку заполнить.
Е. Ш.: Представь, что я именно такой клиент, я говорю: «Послушайте, Кирилл, какая же это верстка? Это программирование!»
К. М.: Нет, программирование — это все же немножечко другое. Программирование — это превращение верстки в динамичный сайт, где мы можем изменять содержимое, в админ-панели что-то редактировать и остальное. Как-то примерно так и объясняется. Все очень сильно зависит от человека, с которым общаешься. Но зачастую на этом моменте понимание уже устанавливается. И рассказывать о технических нюансах и деталях, о том, почему верстка не программирование, приходится достаточно малому числу людей.
Е. Ш.: Значит, можно дать такой совет нашим слушателям: если вы хотите узнать, что такое верстка, нужно попросить разработчика показать макет дизайна в Photoshop или в каком-то другом графическом редакторе и затем продемонстрировать, как это реализуется в интернете?
К. М.: Да, да.
Е. Ш.: Отлично! Я иногда использую такие картинки, то есть показываю сначала сайт, а потом открываю кракозябры. И на самом деле эти кракозябры, то бишь HTML-код, позволяют клиенту убедиться в том, что действительно верстка — это нечто загадочное, для нее нужны специальные люди и просто так не возьмешь верстальщика и не поймаешь его на том, что он делает что-то непонятное.
Давай дальше. Скажи, какие бывают верстки? Давай поясним, каким образом может верстаться сайт, каковы на сегодняшний момент наиболее популярные типы верстки. Нужно это для того, чтобы клиент, разговаривая с разработчиком, говорил: «Я хочу, допустим, адаптивную верстку». Как у тебя в студии построена работа? Как вы объясняете, какие бывают типы верстки, и чем вы вообще используете?
К. М.: Нужно сказать, что о том, каким будет тип верстки, каким вообще будет сайт, — адаптивным, «резиновым», статичным либо «отзывчивым», — мы говорим еще на этапе предпроектного проектирования, предпроектной разработки. Потому что для любого вида верстки, которая получится в итоге, необходимо готовить различный дизайн. Для «резиновой» необходимо, чтобы были макеты в состояниях на минимальный, максимальный размер и какие-то промежуточные. Для адаптивной, чтобы для различных устройств были макеты подготовлены. Для «отзывчивой», чтобы в каких моментах, в каких переходах элементы либо менялись местами, либо куда-то исчезали. Что касается вообще классификации, статическая верстка — это когда клиент открывает результат в браузере и вне зависимости от изменения размеров экрана или от смены устройства, с которого он открывает, ничего не меняется.
Е. Ш.: «Жесткая» верстка.
К. М.: То есть фиксированная ширина. Высота, понятно, варьируется, размеры элементов фиксированы. Вне зависимости от того, как вы растягиваете экран браузера, на чем ни открывайте, все будет одинаково.
Е. Ш.: Это «жесткая», или статическая, верстка?
К. М.: Да. Может быть «резиновая». «Резиновая» — это, если мы открываем на небольшом устройстве, у нас одни размеры элементов, одни расстояния между ними; если мы открываем на мониторе больше, на full HD или вообще на каком-нибудь iMac 27-дюймовом, меняются размеры элементов, меняются пропорции и расстояния между ними. Текст меняется редко, я имею в виду размер текста. Меняются чаще всего фоновые картинки, просто картинки. Могут изменяться какие-то размеры функциональных элементов: кнопок, форм.
Е. Ш.: А вы делаете такие дизайны, которые реально «резиновые» на маленьком экране, на 800 пикселей, — потому что еще есть такие экраны, сохранились где-то в регионах, — и на тех, у которых разрешение по 1900? Есть требования от клиентов, которые хотят такую «резиновую» верстку?
К. М.: Ну, под 800 мы не делаем уже очень давно. Я не помню, когда я последний раз вообще макет на 800 видел. Наверное, году в 2008-м. Может быть, даже раньше. Что касается больших разрешений экрана, 1900 — это еще не самое большое. Есть мониторы 2560 на 1600, есть уже 4К-, 5К-мониторы, они вообще сумасшедшие.
Е. Ш.: Что делать в этом случае?
К. М.: Делать, делать. Мы всегда, когда делаем «резиновую» верстку, ориентируемся на 2560. 4К, 5К мы еще пока не поддерживаем, но на 2560 строго ориентируемся.
Е. Ш.: После передачи я хочу посмотреть на те сайты, которые хорошо в «резиновой» верстке выглядят. Потому что мы в нашей практике используем… я придумала для себя такое понятие, как «псевдорезиновая» верстка — «резиновая» до поры до времени. Потому что сделать гармоничный дизайн даже на 1900, — я уже не говорю о больших разрешениях, — даже на 1200 очень тяжело. Поэтому мы фиксируем на 1400, и дальше она становится «жесткой». Это вариант, который позволяет убить двух зайцев одним камнем. С одной стороны, удовлетворить дизайнера, который не вопит по поводу того, что у него на маленьком и на большом экране непонятно какой сайт получается, с другой — дать клиенту некое понимание «резиновости» и растягивания сайта по экрану. Что касается адаптивной верстки, в своей предыдущей заметке ты говорил об «отзывчивой» верстке, а «отзывчивая» верстка и адаптивная верстка?.. Я понимаю разницу в переводах…
К. М.: Это смешанные понятия.
Е. Ш.: Давай разберемся.
К. М.: На самом деле это такой адский холивар, потому что никто не может точно сказать, чем они различаются. Каждое агентство, которое говорит, что делает то или иное, дает собственное определение.

По сути, примерно одновременно просто возникли оба термина на Западе — adaptive and responsive. И так же, калькой, они перешли в русский язык. Толком между этими двумя понятиями различий нет. Мы, по крайней мере, их просто не учитываем.

Мы считаем, что это один и тот же тип верстки. Чем адаптивная отличается от «резиновой»? Тем, что на различных устройствах, — здесь мы уже даже не только об экранах говорим, — мы получаем различное поведение элементов, различный набор элементов на странице. Если говорить о каком-то корпоративном сайте, то на 1024 на 768, на обычном мониторе, будет один набор элементов. Например, три баннера, четыре новости снизу, скажем, логотип, восемь пунктов меню в строку и какая-то контактная формочка и телефон. На большем экране, например, кроме одного такого широкого баннера посредине, могут появляться еще дополнительные боковые. И новостей может становиться больше, а может появляться еще какой-нибудь блок статей и аналитики.
Е. Ш.: Нам нужно продумать для адаптивной верстки на этапе предпроектного проектирования, на этапе дизайна, соответственно, различные форматы представления информации на различных устройствах?
К. М.: Да.
Е. Ш.: Я подведу черту и скажу слушателям о том, что не важно, что вам говорят, — адаптивная верстка или «отзывчивая». Это по сути одно и то же.
К. М.: По сути да.
Е. Ш.: И нужно здесь заметить, что сейчас требование «отзывчивости» или адаптивности — это must have. Ты согласен?
К. М.: Смотря для каких проектов.
Е. Ш.: Поговорим чуть попозже, потому что это очень важный момент, который влияет на стоимость верстки. Теперь по поводу стандартов. Нас очень сильно интересует вопрос, связанный со стандартами, потому что обычный клиент сейчас очень сильно зажат в рамки нашего рынка, когда он не может понять, что ему предлагают на выходе. Один разработчик предлагает одно и то же за X рублей, другой — за X, умноженное на миллион рублей, и т. д. Скажи, пожалуйста, какие есть стандарты у верстки? Может ли обычный человек проверить, где-то сравнить, то ли ему разработчик предлагает? Какими стандартами вы пользуетесь у себя в студии, в агентстве, для того чтобы проверить правильность, качество верстки?
К. М.: Есть стандарты для HTML-кода, есть стандарты для CSS, есть стандарты для JavaScript. Соответственно, все три технологии могут быть использованы в верстке. И для каждой из них мы используем тот или иной набор требований. Если мы говорим о валидности… Я начну с последнего пункта. Я не обращаю внимания на валидность верстки, не рекомендую клиентам обращать на нее внимание. Потому что можно сделать валидную верстку, за это заплатить больше денег, не получить от этого никакого бизнес-толка, вообще никакого профита.
Е. Ш.: Почему?
К. М.: Где плюсы?
Е. Ш.: Ну, есть стандарты… Я размышляю как клиент. Есть стандарты, мне сказали на каком-нибудь мастер-классе или семинаре: «Друзья, если вы будете получать от разработчика невалидный код, это, например, будет плохо влиять на SEO».
К. М.: Нет.
Е. Ш.: Давай докажем это.
К. М.: Во-первых, валидатор того же W3C не учитывает многие моменты с точки зрения стандартов, которые появляются постоянно и добавляются. Не буду останавливаться подробно, потому что это уже технические детали, которые вряд ли будут интересны большей части тех, кто нас слушает или смотрит. Что касается продвижения, давайте посмотрим так: если в валидаторе есть warnings какие-то, именно просто замечания, они желтеньким обычно подсвечиваются, это вообще не важно. Если есть какие-то красные замечания, то здесь уже вопрос. Необходимо попросить того, кто сверстал макет, объяснить по каждому пункту. Если человек сможет доказать, что абсолютно не нужно соблюдать эти требования, тогда, скорее всего, можно ими и пренебречь. В зависимости от того, конечно, насколько клиент доверяет компетенциям человека, который верстает.
Е. Ш.: Так, значит, мы во главу угла должны ставить компетенции человека, с которым работает клиент? Правильно ли я понимаю, что не нужно обращать внимания на качество верстки, не нужно заморачиваться, главное — доверять тому разработчику, с которым ты работаешь?
К. М.: Нет. Я не говорил, что не нужно обращать внимания на качество верстки. Я говорил всего лишь о валидности. Что касается качества верстки…
Е. Ш.: Как его определить?
К. М.: Здесь достаточно просто. Если открыть код и увидеть, что он хотя бы нормально отформатирован, есть какая-то табуляция, то есть элементы вложены друг в друга, это выглядит как минимум красиво и аккуратно, а не просто намешан код непонятного формата, то уже какой-то плюсик можно поставить себе. Еще просто для обычного клиента я могу дать совет открыть исходный код, посмотреть, есть ли там какие-то параметры тегов, которые называются id. Если там есть «id = что-то», то надо уже говорить верстальщику, что так не пойдет, потому что на id завязываться в 2015 году не стоит. Можно открыть CSS, посмотреть, насколько много там каких-то условных комментариев для Internet Explorer, например, или для других браузеров, поддерживаются ли какие-то вендорные префиксы. Ну, это такое сложное, наверное, слово.
Е. Ш.: Это сложно, да. Если я клиент-девочка, то все, я потерялась.
К. М.: В общем, если там есть дефисик и написано moz, дефисик и написано о, дефисик и написано webkit, то, значит, веб-технолог, верстальщик пытался каким-то образом поддерживать все эти свойства, которые он написал, для всего набора браузеров. А самый простой способ проверить качество верстки — это просто открыть ее на всех подряд устройствах. Конечно, у человека может не быть всех подряд устройств. Для этого существуют специальные сервисы, на которых можно протестировать верстку конкретной страницы либо целого набора страниц на различных устройствах. Получить скриншоты на выходе и увидеть, разваливается или не разваливается, нормально выглядит или нет.
Е. Ш.: Тогда у меня просьба, Кирилл: можешь ли ты, после того как мы опубликуем нашу передачу, в комментариях к этому ролику написать все свои шаги, по пунктам, которые позволят клиенту проверить правильность и качество верстки?
К. М.: Да, конечно.
Е. Ш.: Отлично. Тогда пойдем дальше. Следующий момент касается компетенции тех самых верстальщиков, о которых мы говорим. Потому что очень часто клиенты ищут отдельно дизайнера, отдельно программиста, отдельно каких-то других веб-мастеров, которые помогают при разработке сайта. А как ты думаешь, какими основополагающими знаниями и компетенциями должен обладать верстальщик сейчас — именно тот человек, который пишет собственно HTML-код? Я предлагаю следующие знания: он, помимо таких специфических историй, как HTML, CSS, JavaScript и т. д., должен понимать немного в бизнесе, должен немного понимать в дизайне, должен немного понимать в PHP или других языках веб-программирования, и он должен знать основы SEO. Как ты думаешь, есть такие сверхъестественные верстальщики?
К. М.: Да.
Е. Ш.: А где вообще они живут, где они обитают?
К. М.: У меня в офисе.
Е. Ш.: И очень важная компетенция, как мне кажется, — это ставить себя, то есть верстальщика, на место пользователя: как пользователь будет реагировать на ту или иную историю, на ту или иную верстку. Согласен, да?
К. М.: Да, конечно.
Е. Ш.: А сколько же тогда нужно времени, для того чтобы владеть всеми этими знаниями? Сколько стоит верстальщик? Как выбрать из всех этих людей, кто необходим в бизнесе, кто необходим в твоем бизнесе, в твоем агентстве? Как ты выбираешь верстальщика?
К. М.: Мы их растим, мы не берем с рынка.
Е. Ш.: Это единственно возможный вариант, нигде их не учат?
К. М.: Нет, учат, но 90%, даже, наверное, 99% верстальщиков… Мы не называем просто так, у нас нет такого понятия.
Е. Ш.: Стандартов нет, профстандартов нет.
К. М.: Я хотел сказать, у нас нет понятия «верстальщик», у нас нет такой должности в агентстве.
Е. Ш.: А кто тогда?
К. М.: У нас это веб-технологи. Потому что верстальщик — это человек, который в HTML, CSS получил сайтик, а потом кто-то с JavaScript или какой-то программист уже делает. А «веб-технолог» для нас более расширенное понятие. Это как раз человек, который вбирает в себя понимание бизнеса, понимание того, как будет пользователь взаимодействовать с этим сайтом, понимание того, как это будет отображаться на разных устройствах. И главное — умение все это сделать, владея современными технологиями. «Верстальщик» для меня отвечает только за свою маленькую часть — превратить статичный макет в набор кода, с которым потом уже следующая итерация разработки должна что-то делать.
Е. Ш.: То есть не имеет смысла, допустим, для подрастающего агентства или для клиента, который делает некий веб-отдел у себя в бизнесе, набирать именно верстальщика, нужен веб-технолог?
К. М.: Нет, есть смысл. Все диктуется вопросами бизнеса.
Е. Ш.: И целесообразностью.
К. М.: Да, и все идет от целесообразности, от необходимости именно в данном бизнесе. Если уже говорить о стоимости и о выборе между различного уровня верстальщиком или технологом, что я могу посоветовать? Если какой-то простой сайт, несложный, обычный корпоративный, например, или небольшой магазин, то стоит, наверное, выбирать, исходя из принципа «подешевле, но нормальный».
Е. Ш.: Как это определить?
К. М.: «Нормальный» — это человек, у которого смотрим портфолио, смотрим на этих ресурсах, о которых я говорил, разваливается или не разваливается, как себя ведет в старых браузерах. Смотрим на свою аудиторию, думаем, нужна ли нам поддержка Internet Explorer 6, 7, 8. Смотрим, как верстка конкретно этого технолога, которого мы выбираем, или верстальщика отражается в тех браузерах.
Е. Ш.: По тем пунктам, которые ты нам напишешь в комментариях, да?
К. М.: Да. Если он это технически может сделать, то выбираем по принципу «по цене нам подходит». Платить действительно много за несложную работу нет никакого смысла. То есть брать действительно дорогого специалиста, который очень давно на рынке, который умеет вообще все подряд, нет резона.
Е. Ш.: Только на сложные проекты.
К. М.: Если мы говорим о проекте сложном либо таком, который в будущем планирует развиваться и которому необходима эффективная база, следует брать хорошего, подготовленного человека с большим опытом и смотреть, чтобы у него в портфолио были примеры.
Е. Ш.: Были соответствующие проекты.
К. М.: Брать верстальщика верстать свой проект, если дизайнер нарисовал, скажем, «адаптив», а у верстальщика нет в портфолио вообще ни одной адаптивной работы, но он говорит: «Да, да, я смогу», — я бы не рискнул. Либо рискнул бы, попробовав с каким-то тестовым заданием.
Е. Ш.: Понятно. Значит, найти хорошего верстальщика, веб-технолога можно, мы всегда отталкиваемся от целесообразности бизнеса, от целесообразности проекта.
К. М.: Да.
Е. Ш.: И теперь самый важный вопрос: сколько стоит верстка? Это вопрос №1, я его немножко раздроблю: прописываешь ли ты в коммерческих предложениях и в договоре этап верстки и каким образом ты его калькулируешь? Давай возьмем простой проект, какой-нибудь корпоративный сайт, без сильно навороченных интерактивных элементов. Ну, стандартный сайт, какой-нибудь корпоративный портал, обычный. Сколько будет стоить верстка? Сначала «жесткая», а потом адаптивная.
К. М.: Цену назвать сложно, сразу говорю.
Е. Ш.: По времени тогда давай, оттолкнемся от количества часов.
К. М.: По времени — 20-40 часов, если мы говорим о простом сайте.
Е. Ш.: Это какая верстка? Простая или адаптивная?
К. М.: Это обычная.
Е. Ш.: Адаптивная верстка тогда сколько?
К. М.: Зависит от объема поддерживаемых устройств. Я бы ставил на 20-200% сверху.
Е. Ш.: Максимально мы можем сказать, что если разработчик калькулирует обычную верстку в диапазоне 20-40 часов, то в лучшем случае ее нужно умножить на два, чтобы получить адаптивную?
К. М.: В худшем. Это если вот такой перечень устройств, которые необходимо поддерживать. Обычно банально iPad, iPhone, Android и планшеты используют дизайнеры, практически больше ни под что не рисуют. Если мы фиксируемся на этих устройствах, это где-то на 50% больше времени. Но опять-таки все сильно зависит от дизайна, очень сильно.
Е. Ш.: Да, понятно, что в зависимости от сложности дизайна будет усложняться и верстка, но нам нужно донести до наших слушателей одну простую вещь. Друзья, если вы хотите получить действительно современный сайт, — а только современный сайт может иметь адаптивную верстку, и ты со мной, надеюсь, согласен, — стоимость верстки возрастает иногда в несколько раз.
К. М.: Да.
Е. Ш.: И к этому нужно быть готовым. И нужно быть готовым к тому, что этап верстки увеличивается, то есть сайт с использованием адаптивной верстки нельзя сделать быстро. Очень часто бывает: «Сделайте нам сайт завтра. Но мы хотим, чтобы на всех устройствах он замечательно отображался». И это объяснение, в общем-то, усложняет. И, Кирилл, подводя итог, пожалуйста, дай несколько советов, может быть, один главный, как клиенту выбрать ту студию по качеству верстки, которая бы максимально его удовлетворила?
К. М.: Открыть работы из последних, за последний год на своем iPhone, на своем планшете и на своем компьютере. Посмотреть, насколько этим удобно пользоваться в его браузерах, а лучше даже в браузерах, которыми будут пользоваться клиенты. Потому что в первую очередь мы все равно составляем портрет нашей аудитории на самом-самом первом этапе. Смотрим, насколько это не разваливается. Это банально, конечно, но у многих до сих пор верстка на некоторых устройствах разваливается. Насколько это «отзывчивая» верстка? Под «отзывчивостью» я имею в виду, например, если там есть анимация, не тормозит ли, не зависает ли. И насколько этим в принципе хорошо и удобно пользоваться. Это самый главный критерий. Если все требования учтены, можно не смотреть ни код, ничего, потому что главная задача для бизнеса — это чтобы будущий пользователь, покупатель, клиент был доволен при использовании сайта.
Е. Ш.: Итак, дорогие друзья, для того чтобы определить, выполняет ли качественную верстка студия, агентство, какой-то человек, который делает вам сайт, открываете портфолио и смотрите, насколько она, эта самая верстка, хорошо отображается на различных устройствах и под различными браузерами. Это будет небольшой залог успеха в дальнейшем сотрудничестве со студией. Что ж, на этом хотелось бы подвести черту. С вами были Екатерина Шукалова и Кирилл Мельничук из агентства Alterego, и мы с вами говорили про загадочную HTML-верстку. До новых встреч!