Что значит сверстать макет
Хватит это верстать, ударим автоматизацией по макетам
А Вас не посещала мысль, что вёрстка руками — это долго, дорого, избыточно и устарело?
Меня вот постоянно. В данной статье я поверхностно затрону текущее состояние индустрии, проблематики и поделюсь результатами своих исследований.
Интересно? Добро пожаловать под кат!
Перед началом
Если хочется сразу «пощупать», вот проверка концепции.
Она демонстрирует общие моменты, ряд аспектов модели и крайних случаев остались за пределами реализации, что сказалось на качестве, но я считаю, что общий концепт проверен, подробнее ниже.
Термины
В тексте я использую термин «Верстка» в 2‑х значениях:
Введение
А так же мы имеем и вовсе космические исследования этой темы при помощи нейронок, а ля pix2code или sketch2code.
Но к моему сожалению, я так и не смог найти инструмент, который можно органично ввести в процесс разработки.
А чего же хочется? Хочется получить макет у дизайнера, добавить логики, разбить на компоненты, поправить вёрстку, там где нужно, получить библиотеку компонентов и вернуть это всё дизайнеру для будущего взаимодействия. Понимаю, это превосходит даже самые передовые возможности индустрии, но такова моя мечта.
Как говорит Джейм Стетхем Конфуций, большая дорога начинается с первого шага, вот и я раздобыв немного время, решил понять, с чего же начать. Об этом и будет данная статья.
Проблематика
Тут нужно сразу обговорить разницу между вёрсткой и интерфейсом:
Вёрстка — это полуфабрикат, грубо говоря, результат конвертации графического формата в HTML, CSS и другие файлы, предназначенный для дальнейшего преобразования в интерфейс.
Интерфейс — полноценный артефакт системы, с которым будут взаимодействовать пользователи.
На 2020 год ручная вёрстка всё ещё является основным способом создания web интерфейсов, что довольно любопытно само по себе. Это идёт вразрез трендам параллельных стеков, таких как нативные и десктоп приложения, где визуальные инструменты дизайна интерфейсов являются стандартом их создания.
Можно долго рассуждать почему это так, но как я считаю, главные выводы — это высокие требования к конечной верстке и необходимость низкоуровневого контроля, «лобби верстальщиков» предлагаю оставить за скобками.
Вёрстка сложна, требует применения специальных методик и инструментов для управления, минимизации ошибок и поддержки в актуальном состоянии.
Отдельный вопрос — это анимации, так создание анимации является для многих проектов вовсе непосильной задачей в плане ресурсоемкости.
Верстка это дорого, в среднем это от 25% стоимости всей системы для SPA и до 75% для посадочных страниц.
Не существует общепринятой теории вёрстки как таковой.
Стандарт W3C очень широкий и каждый верстальщик / команда руководствуется своими собственными правилами и стандартами, которые попадают в рамки валидной разметки.
Решение
Для начала нужно формализовать процесс вёрстки, определить сущности, алгоритм и правила. Конечно сама тема довольно обширная, и её полное раскрытие не является темой данной статьи. Исходя из этого, рассмотрим только интересную в данный момент часть.
Шаблон
Шаг 1
Визуально разделим на высокоуровневое дерево блоков.
Найдём строки и колонки макета
Шаг 2
Семантический анализ, определим основные блоки:
Тут мы сразу сталкиваемся с интересным явлением, простого макета не всегда достаточно для построения полноценной структуры, так проектировщик интерфейса должен уточнить поведение блоков. Что наталкивает на мысль, что семантического анализа тоже не всегда достаточно.
И пока нам этого достаточно. Тут мы можем разделить нашу задачу на две большие группы:
Отложим семантическую группу для будущих исследований и сосредоточимся на технической.
Несмотря на то, что вёрстка по картинке нейронной сетью задача очень интересная, по моему мнению, она избыточна.
Сложно себе представить ситуацию, когда при нормальном рабочем процессе верстальщику придёт макет в формате растрового изображения.
Чаще всего это форматы, созданные в таких инструментах как Figma, Sketch или Adobe Photoshop, которые в себе уже содержат практически исчерпывающую информации о макете, самое главное:
Получение HTML документа на основе данной информации является уже решенной проблемой, так инженеры из Figma уже поделились своей реализацией конвертации и результатами исследования, а такие сервисы как Anima прямо построены на синхронизации макетов и интерфейса.
Но почему же подобные решения не привели к эффекту разорвавшейся бомбы и спустя 2 года нет ничего лучше старой доброй ручной вёрстки?
Тут я повторюсь, моё мнение, причина этого два фактора:
Контроль, несомненно, нужная вещь, но без удовлетворения первого требования, не особо имеющая смысл. Проще будет реализовать сразу качественную вёрстку и управлять ей, чем пытаться исправить некачественную.
Таким образом, первостепенным является первое требование. Но что же делает код качественным? Если убрать за скобки официальные показатели качества как LTR, Accessibility и подобное, мы останемся с важными показателями качества для разработчиков:
Таким образом главной задачей для автоматизации и будет соответствие этим критериям.
Попробуем же доказать, что это возможно, построив дерево блоков. Для этого нам нужно, опять же, формализовать процесс и ввести необходимые понятия, оставив ряд крайних случаев для будущих исследований.
Строки и столбцы
Строки
Если позиция одного элемента попадает в отрезок высоты другого, то они образуют одну строку.
Столбцы
Аналогично, если позиция одного элемента попадает в отрезок ширины другого, то они образуют одну колонку.
Отношения элементов
Независимое расположение
Элементы позиционируются относительно друг друга, опираясь на поток.
Дерево достраивается при необходимости.
Расположение с перекрытием
Перекрывающие элементы вырываются из потока, позиционируются абсолютно, не влияют на позиционирование других элементов.
Процесс построения дерева блоков
Шаг 1
Определим все строки.
Шаг 2
Находим отступы у каждой строки.
Шаг 3
Выбираем строку для проработки и определяем тип разметки:
Шаг 4
Для многоколоночной, определяем тип колонок:
В зависимости от типа, формируем отступы между колонками.
Шаг 5
Определяем тип колонки по количеству элементов в ней:
Если тип единичный, позиционируем элемент относительно колонки, переходим к следующему.
Шаг 6
Для типа колонки «множественная» находим все строки
Типы строк аналогичны типам колонок:
Находим отступы.
Повторяем весь алгоритм пока есть хоть один необработанный блок.
И теперь реализуем полученные утверждения в код.
Упрощение:
Увидеть и «пощупать» доказательство концепции можно по ссылке.
Вывод
Автоматизация качественной вёрстки возможна без привлечения слабо контролируемых алгоритмов машинного обучения. Это позволит значительно сократить расходы на создание продуктов и увеличить их качество. Не маловажно и то, что это упростит работу разработчикам и сделает её более интуитивной и приятной.
Но необходимы дальнейшие исследования, а сама проблема требует более пристального внимания сообщества для реализации полнофункциональной модели и инструментов, основанных на ней.
Что дальше?
Считаю следующий важный этап — это подтверждение концепции контролируемости автоматической разметки. Главным фактором тут будет являться обратное преобразования кода в макет, так, чтобы при изменении разметки обновлялся и он — создание двусторонней связи между инструментом дизайна и разметкой.
Буду рад конструктивной критике и такой же дискуссии. Всем мир!
Верстка сайта: инструкция для начинающих
Что такое вёрстка сайта
Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст.
Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.
В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.
В контексте создания сайтов есть два вида разработки:
Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования.
Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:
Как правильно подготовить макет к вёрстке?
Мне часто передавали работу дизайнеров, которые уходили в отпуск или болели. Менеджеры и арт-директор считали, что я быстро нарисую недостающие страницы, ведь основная часть работы уже сделана.
Я открывал переданные макеты и не видел в них логики: куча текстовых стилей для однотипных случаев, слои не сгруппированы и не названы, старые варианты дизайна просто спрятаны. Чтобы успеть в отпуск, дизайнер в спешке сделал красивые PNG, не подумал про вёрстку и оставил мне сырые макеты. Чтобы доработать макет, я тратил время, которое не закладывалось в бюджет и сроки проекта. Менеджер обвинял меня в задержке, торопил и гундел за спиной. Обидно.
Иногда дизайнер сразу передавал неподготовленные макеты в верстку. Фронтендеры тратили уйму времени на поиск логики, и сроки вёрстки вырастали в два раза. Никто не винил дизайнера, ведь он сделал макеты вовремя. Все косяки ложились на верстальщиков, которые из-за несправедливости спивались и копили злобу.
Такое у нас случалось часто. Но верстальщиков это достало. Они составили список ошибок в макетах и обсудили его с дизайнерами. После разговора мы собрали чек-лист из требований, которые дизайнер должен выполнить перед отправкой макета в вёрстку. Теперь дизайнеры делают чистые макеты, которые легко верстать. Мы решили рассказать вам про наш чек-лист, чтобы вы не наступали на наши грабли и жили вечно в добром здравии.
Делать чистые макеты сразу сложно: клиенты постоянно меняют контент, арт-директор приходит с крупными правками в последний момент, верстальщики срезают дизайнерские фишки из-за отсутствия времени и бюджета. Объясните это команде и дополнительно закладывайте время на сборку макета.
При работе над проектом дизайнер может случайно наплодить кучу текстовых стилей для однотипных случаев. Например, незначительно могут отличаться кегль и интерлиньяж в одинаковых абзацах. Это частая проблема больших проектов со множеством экранов.
Укажите гарнитуру, начертание, кегль и межстрочное расстояние. Пропишите поведение текстов для разных разрешений:
20+ современных принципов верстки: что нужно знать, чтобы верстать сайты, которые не рассыпаются
Что такое верстка сайта
Разработку разделяют на 2 зоны ответственности:
● Backend — разработка внутреннего функционала сайта на сервере;
● Frontend — внешняя часть сайта, программирование пользовательского интерфейса.
За Frontend отвечают верстальщик (HTML+CSS) и Frontend-разработчик (JavaScript).
Верстка — это перевод дизайн-макетов на язык браузера при помощи кода. Верстальщик дает жизнь макетам, отрисованным дизайнером, воплощает все его задумки, превращая картинки в полноценный сайт. Для этого используются HTML, CSS и скрипты, написанные фронтенд‑разработчиком:
● HTML — разметка, определяющая содержимое — задет каркас, структуру страницы, местоположение объектов;
● CSS — отвечает за представление элементов (размер, цвет, форма);
● JavaScript — определяет поведение объектов (анимация, взаимодействие с интерфейсом).
У каждого верстальщика свой подход и лайфхаки. Это нормально, поскольку у верстки нет канона, все работают по-своему. Но чтобы верстка была надежной, сайт не рассыпался ни при каких условиях, а другой специалист мог потом разобраться с этим кодом — нужно соблюдать правила и принципы, о которых поговорим далее.
Почему верстка — один из самых важных этапов разработки сайта
Первое впечатление о сайте создают дизайн и верстка. Но пользователь никогда не увидит дизайн-макет, он взаимодействует с готовым сайтом, собранным верстальщиком. Поэтому, каким бы крутым ни был первоначальный дизайн, если он криво сверстан, впечатление пользователя будет испорчено с первых секунд.
Но чаще речь идет не только об эстетике. Сайт с поехавшей версткой становится нечитаемым, неудобным и неинформативным. Если 2 текстовых блока наложились друг на друга, или изображение ушло под срез верстки и стали не видны условия акции, даты проведения и другая важная информация на баннере — польза сайта снижается.
Кроме того, качественная верстка — это залог успешного SEO-продвижения, причем она отражается не только на технических, но и на поведенческих факторах ранжирования.
От правильности верстки зависит доступность сайта для поискового робота: сможет ли он проиндексировать всю информацию на странице? Поймет где контент, а где вспомогательные элементы дизайна? Сможет ли уловить иерархию и структуру страницы? Не споткнется ли на ошибках в коде?
Пользователь, зайдя на сайт и обнаружив, что он весь куда-то уплыл, тут же покинет его, добавив нам отказ в систему аналитики, и просадив поведенческие факторы.
Поэтому, кривая верстка — это не об эстетике. Она имеет далеко идущие последствия, так как от нее зависит возможность продвижения сайта.
Из чего складывается верстка сайта
Работа верстальщика складывается из таких этапов как:
● Работа с макетом — выделение изображений, иконок, их компоновка и сохранение в отдельную папку;
● Загрузка и подключение шрифтов;
● Разработка страниц — непосредственная верстка дизайн-макетов на HTML и CSS;
● Подключение готовых скриптов, анимация элементов;
● Проверка корректности верстки, тестирование готового сайта.
Подходы к верстке
Фиксированная верстка
Резиновая верстка
Адаптивная верстка
Сайт верстается под несколько разрешений экрана, например:
● Широкие мониторы: от 1920 px;
● Ноутбуки: от 1280 до 1919 px;
● Планшеты: от 768 до 1279 px;
● Мобильные устройства: от 320 до 767 px
Отзывчивая верстка
Мобильная верстка
Мобильная версия сайта, в отличие от адаптивной, представляет собой верстку отдельного сайта, со своим URL (обычно на поддомене вида m.web-valley.ru) для мобильных устройств. То есть верстается 2 отдельных сайта: один для десктопа, другой — для смартфонов.
Такой подход применяется для крупных порталов или интернет-магазинов, которые верстались десятки лет назад, когда в мобильной версии сайта не было необходимости. Сейчас она нужна, но переработать такие крупные проекты в адаптив, сделать редизайн — дорого и долго. Проще сверстать отдельный сайт для мобильных устройств.
Еще один случай, когда уместна мобильная верстка — проекты, изначально заточенные под мобильный трафик, которым вообще не нужен десктоп.
Техники верстки
Табличная верстка
Табличный метод верстки напоминает работу в Excel: страница делится на строки, а они, в свою очередь, на ячейки, которые наполняются контентом. Табличная верстка выполняется при помощи тега
| , задающим столбцы. |
Долгие годы таблицы были самым простым и надежным способом верстки, гарантирующим «резиновость» сайта: колонки таблицы масштабировались под любую ширину экрана. К тому же табличные сайты примерно одинаково выглядели в разных браузерах.
Но у этой техники есть ряд недостатков, которые делают ее бесперспективной:
● Сайт не прогружается при слабом интернете или перебоях связи: чтобы контент таблицы корректно отображался в браузере, он не показывается до тех пор, пока таблица не загрузится полностью. Если таблица большая, то это существенно сказывается на скорости сайта;
● Тяжелый код: чтобы разместить фотографию на сайте в середине страницы, нужно создать таблицу из 3 колонок, фото поместить в среднюю, а первую и последнюю оставить пустыми, они будут служить фиксаторами для изображения по центру. В процессе верстки сайта образуются десятки таких пустых таблиц, что утяжеляет код и снижает скорость загрузки;
● Плохая индексация: поисковый робот не любит сайты с табличной версткой, ему сложно понять структуру и иерархию страницы, тяжело воспринимать контент целостно, так как между небольшими кусочками контента находятся громоздкие части кода;
● Соотношение контента к HTML в пользу последнего: еще один фактор, плохо влияющий на SEO. Для нормальной индексации, контента на странице должно быть больше, чем кода.
В целом, табличная техника считается устаревшей. Ей все еще активно пользуются для HTML‑верстки электронных писем, но для разработки сайтов используют более современные методы.
Верстка слоями
Блочная верстка
Блочная верстка на сегодня единственный валидный и адекватный способ верстки. Это усовершенствованное продолжение верстки слоями. Вместо слоев структурным элементом выступают блоки или контейнеры — прямоугольники разных размеров. Эта форма была выбрана, потому что прямоугольник может удобно делиться на неограниченное число других прямоугольников, что делает верстку более гибкой.
Формируется такой контейнер при помощи тега
, после чего в него помещается контент, причем в зависимости от задачи его можно по разному наполнять:
● Затолкать все содержимое страницы в один контейнер;
● Сверстать сайт поблочно, используя отдельный
контейнер для каждого блока — обложка, о компании, преимущества и т. д.;
● Расположить элементы дизайна одного смыслового блока (например, обложки) по отдельным контейнерам.
То есть, благодаря блочной верстке, мы получаем колоссальную гибкость, а в совокупности с CSS-стилями, которые можно применять к каждому блоку — безграничные возможности.
К преимуществам блочной верстки относятся:
● Небольшой объем кода, а следовательно высокая скорость загрузки и меньшая нагрузка на сервер. В отличие от табличной верстки, позиционирование контейнера можно задавать в любых координатах экрана, не используя для этого лишние пустые поддерживающие ячейки;
● Понятный читаемый код;
● Возможность реализации любых сложных дизайнерских решений;
● Идеален для SEO — робот хорошо считывает такой код, сразу четко видит контент и семантическую разметку, что положительно сказывается на индексации. Если у вас есть сайт на Тильде, наверняка вы видели эту фразу в справочном центре:
На первый взгляд, такая формулировка кажется бредом: ну как последовательно расположенные блоки на странице могут влиять на SEO? Однако, если смотреть на это утверждение с точки зрения блочной верстки, то оно имеет смысл.
Наверное, единственный недостаток блочной верстки — плохая кроссбраузерность. Верстальщику бывает сложно добиться того, чтобы сайт одинаково хорошо выглядел в разных браузерах.
Верстка фреймами
Фрейм — это элемент, который отображает отдельную HTML-страницу. Фреймы не зависят друг от друга. Поэтому при таком подходе верстальщику нужно думать только об отображении «маленького» HTML-файла. Такой подход исключает повторяющиеся части кода, что уменьшает размер и сложность оригинального файла.
Но несмотря на кажущиеся преимущества, верстка фреймами имеет серьезный недостаток: эти сайты хуже всего индексируются поисковиками. Для робота часть таких страниц не имеет контента, а вторая часть — не содержит ссылок на другие страницы, не передает и не принимает внутренний вес сайта.
Кроме того, такая верстка неудобна для пользователя, например, внутренние страницы невозможно добавить в закладки, т.к. у них нет отдельного URL-адреса.
Принципы верстки 2021-2022
Кроссбраузерность
Браузеры не имеют единого стандарта и могут по-разному отображать один и тот же элемент. Задача верстальщика — протестировать сайт во всех популярных браузерах: Google Chrome, Yandex, Opera, Safari, FireFox, Edge, чтобы верстка не рассыпалась ни в одном из них.
В некоторых случаях для этого используют вендорные префиксы перед новыми CSS-свойствами. Например, не все браузеры могут одинаково хорошо прочитать время срабатывания анимации. Чтобы решить этот вопрос, ставят префикс — приставку. Таким образом создается отдельное свойство под конкретный браузер, и вместо нормального transition-duration:0.76s, мы получаем:
-webkit-transition-duration:0.76s;
-moz-transition-duration:0.76s;
-o-transition-duration:0.76s;
-ms-transition-duration:0.76s;
где webkit, moz, o, ms — это префикс.
По сути — это зло и основная причина раздувания CSS-файлов. Ведь для каждого нестандартного и нового свойства нужно прописывать ещё дополнительные 4 строки со всеми префиксами.
Автоматизировать этот процесс можно через Autoprefixer — это программа, которая проставляет префиксы там, где необходимо. То есть в нее загружается файл без префиксов, а на выходе получается файл с префиксами.
Но бывают свойства, которые работают только в одном браузере. В таких ситуациях надо либо отказываться от них, либо использовать с максимальной осторожностью, и только если они не сильно изменяют внешний вид объектов.
Раньше обязательным пунктом ТЗ для верстальщика было корректное отображение сайта в старых версиях браузеров. Сейчас это требование неактуально, так как разработка под старые браузеры значительно удорожает проект, а пользуются ими единицы, и с каждым годом таких пользователей становится все меньше. Поэтому вкладываться в разработку под это старье — нецелесообразно, гораздо важнее, чтобы сайт корректно отображался в современных браузерах.
Лучший способ проверки кроссбраузерности — скачать все популярные браузеры, зайти на сайт и посмотреть, как ведет себя верстка. Но для ускорения процесса, верстальщики пользуются специальными сервисами. Некоторые из них работают по балльной системе, анализируя CSS и выставляя оценку каждому свойству в определенном браузере. Например, сервис Can I use показывает, какое свойство CSS, технология, расширение шрифта и картинок поддерживается на каких браузерах. Оценка выдаётся в процентах пользователей, в браузерах которых верстка не сломается. То есть при выборке в миллион человек и оценке 99% на Can I use, будет 10 000 человек со старыми версиями браузеров, которые не увидят нашу красоту.