Нaтaлия Шeргинa, рeдaктoр и кoммeрчeский писaтeль, спeциaльнo для блoгa Нeтoлoгии пoдeлилaсь свoим oпытoм o тoм, кaк зaвeрстaть стaтью в Тильдe и нa чтo oбрaтить внимaниe. Стaтья для кoнкурсa блoгa.
Дo курсa пo кoпирaйтингу в Нeтoлoгии я никoгдa нe рaбoтaлa с Тильдoй, пoэтoму свeрстaлa свoю пeрвую стaтью кaк смoглa. Отступы, шрифты, модули, выравнивание, заголовки — все было не то. Четыре раза все переделывала и наконец разобралась, что к чему. В этой статье расскажу про свои ошибки и про то, как сверстать статью на Тильде, чтобы не было стыдно. Информация для новичков в верстке и тех, кто только знакомится с Тильдой.
Тильда — это платформа для создания сайтов, интернет-магазинов и портфолио. Также она подходит для вёрстки статей и лендингов. Её главный плюс — простота использования. Тильда работает как конструктор: вы собираете страницу, используя блоки из библиотеки. Знать программирование не надо, работать с ней может каждый. Из минусов — вы ограничены стандартными блоками, а так называемый «Нулевой блок», который можно сделать самому, требует сноровки.
Сколько стоитБесплатно: 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 и Как сделать статью — обучающие видео по работе с Тильдой.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
]]>