Вёрстка статьи в Тильде: разбор ошибок28.10.2017 16:22

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

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

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

Сколько стоит

Бесплатно: 1 сайт, 50 страниц, 50MB места на сервере. На этом тарифе доступны не все блоки и нельзя подключить свой домен.

750 руб./месяц — тариф Personal: 1 сайт, 500 страниц, 1GB места на сервере. Доступ ко всем блокам и возможность подключить свой домен.

1250 руб./месяц — тариф Business: 5 сайтов в 500 страниц для каждого и 1GB места на сервере.

Для моей статьи хватило функций бесплатного тарифа.

С чего начать: шаблон или пустая страница

Страница выбора шаблона

Мне казалось, что проще взять готовый шаблон (например, лонгрид) и адаптировать его под свою статью. На деле же получилась ерунда. Моя статья про кемпинг в Калифорнии по содержанию и оформлению не то же самое, что лонгрид о бритпопе, который я пыталась переделать. Это тот случай, когда проще начать с пустого шаблона и добавлять свои блоки.

Шаблон лонгрида, который я планировала переделать под свою статью

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

Примеры шаблонов

Блоки и модули

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

Есть соблазн налепить разные модули в один блок, что я и сделала в первый раз.

Блок TL02 «заголовок: 64»

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

Сравните:

Неправильно: использовать блок «заголовок» для чего-то кроме заголовка

Лучше: три модуля (заголовок, лид, фотография) — три блока

Что еще почитать по теме:

• Митя Моровов о текстовых стилях
• Ильяхов о модулях статьи

Расстояние между элементами

Мало определиться с блоками, нужно ещё правильно задать расстояния между ними и между их элементами: заголовками, подзаголовками, текстом, фотографиями и подписями к ним. Здесь не обойтись без правила внутреннего и внешнего и концепции «воздуха» (белого пространства).

Правило внутреннего и внешнего

Дизайнер Антон Жиянов пишет: «Универсальное правило внутреннего и внешнего в типографике: внутреннее внешнее.

Внутреннее — расстояние между буквами, внешнее — между словами.

Внутреннее — между словами, внешнее — между строками.

Внутреннее — между строками, внешнее — между абзацами или поля вокруг текста».

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

Плохо: расстояние между двумя блоками меньше, чем расстояние между элементами внутри одного блока (между заголовком и текстом). Правило «внутреннего и внешнего» не соблюдено.

Лучше: «внутреннее», то есть расстояние между заголовком и текстом, меньше «внешнего», то есть расстояние между двумя блоками.

Вертикальное расстояние между блоками задаётся в настройках блока.

Лучше сразу определиться, сколько строк будет между смысловыми блоками. Мне проще придерживаться нулевого отступа снизу и задавать только верхний. Можно делать наоборот. Главное помнить, что при отступе и сверху и снизу, например, по 1.5 строки, суммарное расстояние между блоками будет равно трём.

Воздух (белое пространство)

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

Read — Wordpress theme. Много «воздуха», глазу приятно, ничто не отвлекает от чтения

Сайт сети магазинов «Техник». Мало незаполненного пространства, недостаточно «воздуха» вокруг контента.

В тильде 12-колоночная вёрстка. Отступа слева и справа от контента статьи задаются в настройках блока.

Если заполнить контентом все 12 колонок, текст будет тяжело читаться. Оптимально отступить хотя бы 1 колонку слева.

Плохо: нет отступов слева и справа, текст растянут на 12 колонок.

Лучше: отступ слева — 1 колонка, ширина текста — 8 колонок, ширина фактоида — 2 колонки. Остаётся одна колонка для отступа справа.

Что почитать по теме:

• Интерфейсы без шелухи: правило «Внутреннее и внешнее»;
• Артём Горбунов об этом же правиле более подробно;
• Блог Тильды: Сила белого пространства и Как делать красивые статьи на Тильде.

Шрифты

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

В Тильде шрифты задаются в настройках всего сайта, а не отдельной страницы.

Если предложенных Тильдой шрифтов вам недостаточно, можно подключить Google Fonts. Вот инструкция.

Моей ошибкой при выборе шрифтов и начертаний был недостаточный контраст между размером заголовка и текста. Для пары заголовок-описание сочетание размера 52 px и 42 px не создаёт контраста. Пара 62 px и 32 px смотрится лучше.

Плохо: слабый контраст.

Так лучше.

При размере заголовка в 32 px и размере основного текста в 20 px заголовок не выделяется за счет контраста, а скорее сливается с текстом. Пара 42 px и 20 px работает лучше.

Плохо: заголовок 32 px, текст 20 px.

Лучше: заголовок 42 px, текст 20 px.

Я не знаю, по какой форме высчитывать размер кегля, а скорее делаю это «по-дилетантски» — на глаз. Проверяя наши работы на курсе, Дмитрий Моровов дал вот этот вариант: пара 12–14pt — плохая. 12–16pt — уместная. 12–18pt — хорошая. (Pt — от немецкого «Punkt» — это единица измерения кегля шрифта).

Если игнорировать принцип контраста, статья выглядит как скучная простыня. Глазу трудно зацепиться за элементы в тексте, теряется внимание, а значит страдает и качество чтения.

Что почитать по теме:

• Илья Бирман про «Почти, но не совсем»;
• Контрасты в веб-типографике на Хабре;
• 22 правила сочетания шрифтов;
• Руководство по выбору шрифта в блоге Тильды.

Фактоиды

Специального блока под фактоид нет, но можно адаптировать блок «CL05 Текст и сноска» в разделе «Колонки».

Шаблон, который подходит для фактоида или ссылки на полях.

В моём случае не удалось подтянуть фактоид еще на одну строку. Пришлось оставить так.

Мелкие косяки

Футер, прилипший к предыдущему блоку

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

Плохо: не задан нижний отступ у текстового блока. Футер прилип.

Лучше: задан нижний отступ в 120 px.

Поддомен Тильды

По умолчанию поддомен моей статьи вот этот — http://project201667.tilda.ws. Не понятно, о чем страница и куда ведёт ссылка. Поддомен можно изменить в настройках сайта в разделе «Главное». Здесь же подключается ваш персональный домен.

Выравнивание всего текста по центру

Большинство дизайнеров и верстальщиков сходятся во мнении, что такой текст невозможно читать. Центрирование текста портит не только читаемость, но и вид всей страницы.

Сравните:

Выравнивание по центру.

Выравнивание по левому краю.

Что почитать по теме:

• Памятка верстальщика от Игоря Штанга;
• Игорь Штанг о выравнивании (выключке) по левому краю, по центру и по формату.

Слишком тонкое начертание

Не злоупотребляйте тонким начертанием. Если текст объёмный, воспринимать «сверхтонкий» шрифт тяжело. Более того, на скриншотах такое начертание отображается плохо (как на скриншоте ниже). Настроить размер и насыщенность можно в настройках сайта (не страницы!) в разделе «Шрифты и цвета».

Что еще пригодится

• Типографская раскладка Ильи Бирмана для ввода кавычек, тире, дефисов и редких символов.
• Типограф Артемия Лебедева, чтобы убрать лишние пробелы и висячие предлоги.
• Статья про экранную типографику в Ководстве.
• Как устроена Tilda Publishing и Как сделать статью — обучающие видео по работе с Тильдой.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология