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

Холиварная тема — должен ли веб-дизайнер понимать в верстке. Предлагаю подискутировать в комментах💬 А в статье расскажу, почему верстка бывает неправильная, даже если сайт хорош по дизайну. Чем это грозит сайту (спойлер — долгая загрузка и плохое ранжирование поисковиками) и дизайнеру (спойлер — дольше собирать проект и делать адаптацию). Как делать лучше и быстрее, используя правильные методики, тоже расскажу.

Привет! Я Игорь Литвинцев, мы с командой работаем над no-code платформой Taptop для создания многостраничных сайтов. Недавно я проводил вебинар на тему из заголовка статьи — там 1.5 часа рассказывал про верстку. А здесь постараюсь изложить основные мысли о том, откуда пошли проблемы в методиках сборки сайтов и как мы помогаем их решать.

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

1999-2012 — Разработка вручную

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

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

2013-2014 — Появляется no-code

No-code — новая веха в развитии веба. В 2010-е годы появлялось довольно много инструментов для создания сайтов без кодинга. Затрону два из них, с моей точки зрения, самых важных в истории веба — один с российского рынка, другой с зарубежного. Пойдем от более простого сервиса к более сложному.

На российском рынке: Tilda (2014)

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

На зарубежном рынке: Webflow (2013)

За рубежом выпустили Webflow — платформу для создания адаптивных сайтов без написания кода. У Webflow было одно большое отличие от Tilda — он позволял дизайнерам нативно управлять версткой, а не создавал верстку за них.

У Webflow был только один минус — «въехать» в него было посложнее, чем в работу на блочном конструкторе. Требовалось хоть немного разобраться в принципах верстки и внутреннего строения сайтов.

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

2015 — Новая концепция дизайна для веба: Figma

Инструменты для разработки макетов также не стояли на месте. Появился сервис Figma, который давал возможность создавать дизайн-макеты прямо в браузере. Figma решала многие сложности, присущие Photoshop, который на самом деле не был заточен для веб-дизайна.

2016 — Новый редактор для создания веб-страниц: Zero Block в Tilda

Развитие Tilda продолжалось. Вышла новая фича редактора — свободное рисование в Zero Block. Теперь можно было не только собирать сайт из блоков, но и делать кастомный дизайн.

2019 — Новый система расположения элементов в Figma: Auto Layouts

В Figma также происходит революционный прорыв. Появилась новая система автоматического размещения и выравнивания элементов внутри контейнера — Auto Layouts. Принцип их работы: при изменении размеров контейнера элементы подстраиваются под него сами — не нужно ничего расставлять вручную.

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

Благодаря появлению новых инструментов для веб-дизайна и новых фич происходит сокращение доли программирования в вебе. Прогнозы на будущее тоже в пользу no-code. Например, исследовательская компания Gartner прогнозирует, что к 2027 году 90% веб-приложений будет создаваться ноукодерами и только 10% — разработчиками.

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

Кроме описанных ранее инструментов для веб-дизайна, на графике можно увидеть платформу Taptop. Мы с командой запустили Taptop на рынок в 2023 году и продолжаем активно развивать.

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

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

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

Сейчас поясню, почему я так думаю.

🚫 Проблема №1: Перегруженный код — долгая загрузка

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

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

А как правильно?

Объясню на примере Taptop. Здесь вы не можете поставить элементы в любых точках холста, потому что их расположение основано на правилах. По аналогии, если включить Auto Layout в Figma для всех слоев — тогда не получится свободно перемещать элементы в блоках.

В Taptop мы делаем так: устанавливаем у родительского блока авто-лейаут, настраиваем правила выравнивания и отступы — и элементы внутри блока автоматически встают в нужных местах. Работает примерно так же, как авто-лейауты в Figma.

Какая разница, какой получается код?

Вы скажете: мне всё равно, какой будет код — главное, сайт выглядит, как надо. Посмотрим на примере — проверим производительность двух сайтов из 40 одинаковых блоков (из примера выше), сделанных на Tilda и на Taptop. Google PageSpeed показывает много параметров, в том числе — количество элементов в структуре страницы:

Tilda — 733 элемента в структуре DOM:

Taptop — 478 элементов в структуре DOM:

Получилось, что у Tilda в 1,5 раза больше элементов, хотя сайты были совершенно одинаковые и довольно простые. Если же проекты большие и сложные, то разрыв по количеству элементов растет нелинейно — отличие будет в несколько раз. И это очень сильно скажется на производительности — будет долгая загрузка и плохое SEO.

🚫 Проблема №2: Долго вносить изменения и адаптировать

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

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

В Taptop есть много вариантов относительных единиц измерения — проценты, vh, vw, em, rem. Например, чтобы блок всегда помещался на любой экран, можно использовать vh — величину, зависимую от высоты экрана. 100vh — это 100% высоты устройства.

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

Итог

Таким образом, Tilda облегчила дизайнерам жизнь, позволив использовать привычные инструменты и не заглядывать в глубину сайтов. Но в итоге выросло целое поколение дизайнеров, которые привыкли к этой простоте и думают, что:

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

Вывод простой — пользуйтесь правилами верстки при создании сайтов, и будет вам счастье) Мы в Taptop стараемся дать дизайнерам как можно больше возможностей, чтобы они делали по-настоящему крутые и качественные сайты. Приглашаю осваивать правильную верстку на нашей платформе, а если будут сложности — поможем и научим 👌 Как раз недавно мы записали двухчасовой обучающий курс по созданию сайта на Taptop, который поможет новичкам быстро освоить азы работы.

Пишите в комментах — согласны, что дизайнерам нужно знать основы верстки или считаете, что это лишнее?