FAQ, ссылки и чеклист по вёрстке
Собрал ссылки, ответы на частые вопросы и чек-лист для самопроверки домашек. Все разделы постоянно пополняются.
Ссылки
Читайте про типографику и вёрстку и текст, в первую очередь. Остальное — по желанию.
Гигиена на уровне структуры. В продолжении по ссылке куча хороших материалов, которые стоит изучить.
Ещё больше и лучше про структуру.
Основное правило вёрстки из «Ководства».
Советы по вёрстке от Игоря Штанга (мастрид)
Сразу несколько ссылок о разных видах выключки: по левому краю, по центру, по формату.

Памятка верстальщика — типичные ошибки вёрстки.
Что значит «сделать»
Как работать так, чтобы всё получалось — в четырёх частях:
1. Получить результат.
2. Получить результат в мире клиента.
3. Сдать.
4. Сделать.
Рабочие принципы
Дизайн текста от Максима Ильяхова
«Будьте счастливы и здоровы»
Про картинки и лицензии
По сути конспект части лекции про лицензии в блоге Нетологии.
Ещё одна статья про бесплатные картинки.
Картинки, иконки, инфографика и прочее.

Всё на одном сайте.
Внутреннее и внешнее
Коротко — https://dangry.ru/oko/inout/
Развёрнуто — http://artgorbunov.ru/bb/soviet/20140818/
Вертикальные отступы заголовков — http://ilyabirman.ru/meanwhile/all/headers-spacing...
Бесплатные шрифты
Бесплатные шрифты в VK: https://vk.com/shrift
Гуглошрифты — https://fonts.google.com
Дополнительное чтение
Женя Арутюнов рассказывает о других способах объединения и разделения объектов — кроме близости.
Почему линейки не нужны
Линейки не работают сами по себе. Кирилл Беляев

Рамочки. Илья Бирман
Термины
Верхнее меню
Это меню, которое появляется, когда вы входите в режим редактирования текста, сверху экрана. Или если вы редактируете через меню «контент», то сверху редактируемого блока. B I U S — и так далее.
FAQ
Почему вы оцениваете не только дизайн, но и текст?
Вёрстка текста — это придание формы содержанию. И эта форма от содержания очень сильно зависит. Все заголовки и выделения выходят из логики построения текста. Иллюстрации соотносятся с фрагментами текста рядом. Фактоиды создаются из фактов, которые не получилось уместить в текст.

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

Грамотный копирайтер умеет согласовать понимание задачи.
Вы заметили ошибку только один раз в тексте — как это понимать?
Я отмечаю однотипные ошибки один раз за всю страницу. Если я отметил проблемы с внутренним и внешним между заголовком и первым абзацем — проверьте остальной текст.
А вот эту картинку/иконку/фильм/что-угодно можно использовать?
Есть простой механизм проверки. Во-первых, не воровать. А во-вторых, представить, что автор произведения подаёт на вас в суд, и вам надо доказать, что вы всё сделали правильно и по закону. Сможете — берите. Сомневаетесь — не берите.
Каковы критерии оценки?
Я отправляю домашку на доработку, пока не получу нормальный результат, который можно публиковать.

Как только такой результат получен — это зачёт.

Зачёт с отличием — это безупречно выполненная работа, превосходство на голову над остальными студентами или что-то, что меня удивило и восхитило в работе.
Как сделать…
…фактоид
Зависит от фактоида. Текстовый фактоид проще всего сделать с помощью колонок — CL05 или даже CL01. Фактоид с изображением — IM10 или 11. Фактоид с именем и фотографией — QT01.
…якорную ссылку
Скопировать id блока в ЛНУ в меню «Настройки» (выглядит как-то так: #rec17958179) и вставить вместо URL, когда создаёте ссылку.
…ссылку на автора иллюстрации
Упоминать автора имеет смысл, если вы берёте картинку в рамках лицензии CC-BY (и подобных) или свободного использования. Нет смысла ссылаться на фотостоки CC-0 или на фотосток, с которого вы купили фотографию (но можно сослаться на автора в качестве благодарности).

Оформить ссылку можно либо сразу после картинки, либо в конце поста. В некоторых блоках с изображением в Тильде предусмотрена подпись (она иногда называется «заголовок» — не удивляйтесь), для некоторых придётся добавлять текстовый блок и создавать новый стиль.

Формат ссылки
Фотография Иван Пупкин / CC-BY 2.0
Иллюстрация Иван Пупкин / CC-0
…ссылку на эл.почту
Вместо ссылки напишите mailto:adres_e-mail@gmail.com. Тогда при клике человека будет перекидывать на новое письмо на ваш e-mail.
…сброс форматирования
Это нужно, если вы наворотили форматирования через верхнее меню — и надо это отменить. Для этого есть клавиша с ластиком. Выделяете весь текст в блоке и нажимаете её. Вуаля — блок девственно чист.
…что угодно
ответ на все «у меня не получается…»
Если что-то не получается сделать в Тильде — отступы, стили, проблемы с блоками — сразу присылайте доступ к аккаунту (логин/пароль). Чаще всего проблема в лишнем энтере, настройках занятых блоком колонок, неснятых галочках и т.п.
Но видно это только изнутри.
Чеклист
Принципы
Каждой сущности — свой стиль
Читайте об этом мою статью в блоге «Нетологии».
Каждому стилю — свой блок
Страница на Тильде состоит из логических блоков, почти идентичных сущностям. Если вы попытаетесь заменить структуру статьи перекрашиванием текста и изменением размеров, получится отстой.
Поисковики неправильно считают вашу страницу и поместят в низ выдачи. Тильда не сможет её адаптировать для разных устройств. А значит читатель или не увидит её, или не сможет прочитать.

Поэтому обычный текст делайте текстовым блоком, заголовки — блоками заголовков, а цитату — блоком цитаты.
Внутреннее и внешнее (ВВ)
Если у вас отмечена ошибка «Внутреннее и внешнее», значит у вас неочевидны связи между элементами. Связи формируются расстояниями между объектами. Внутренние расстояния должны быть меньше внешних.

У вас внешние либо больше, либо равны внутренним. Или расстояния в принципе разбалансированы.
Самопроверка
Вертикальное выравнивание
Непоследовательное выравнивание блоков по вертикали. Получается «лестница», которая разбивает текст на несвязные куски и ломает логику страницы.

Задайте всем блокам одинаковый отступ слева — тогда они выровняются.
Почти, но не совсем
Про эту болезнь есть замечательный пост Ильи Бирмана. Стили должны достаточно сильно отличаться друг от друга по одному из параметров. Достаточно сильно — не 2 pt кегля, а хотя бы 4 или 6. Пара 12–14 pt — плохая. 12–16 pt — уместная. 12–18 pt — хорошая.

Сильнее разведите сущности по нужному параметру.
«Выглядит как X, а на самом деле не X» (Заголовок не заголовок)
Это значит, что какой-то элемент на странице выглядит как, например, кнопка, но как кнопка себя не ведёт — при нажатии на него не происходит никаких действий. Или текст выглядит как заголовок, но на самом деле это обычный текст, ужирнённый и увеличенный.

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

Стоит либо уменьшить длину строки (уменьшив ширину блока) или объединить абзацы.
Узкое правое поле
Из-за такого кажется, что всё съехало и страница заваливается вправо. Правое поле не может быть меньше левого. Лечение: сделать правое поле больше.

Чаще всего такая ошибка сочетается со слишком широкой основной колонкой.

Надо или уменьшить отступ слева, или ширину блоков, или и то, и другое.
Шаблоны
Не используйте шаблоны — пока что я видел только пару человек, которые нормально их адаптировали. Чаще всего получается жесть и бред:
— неадаптированные шаблонные блоки, которые остаются висеть вместе с настоящими;
— непонятная вёрстка из-за того, что часть блоков удалили, а на них держалась вся типографическая конструкция;
— лишние ссылки и кнопки;
— и прочая лабуда.
Список вместо абзацев
Список — это особое оформление однородных членов. Делать список из любых других синтаксических конструкций — грешно.

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

Использовать его вместо обычного заголовка с текстом недопустимо — тогда у вас вся статья будет скрыта. А если вы её скрываете, то зачем писали?

Используйте вместо этого блок заголовка и блок текста.
«По умолчанию»
Все решения по дизайну и вёрстке должны приниматься осмысленно. Если ваши галочки ярко-синего цвета, для этого должна быть причина — более весомая, чем «ну там оно такое было».
Неправильный формат ссылки
Вот такую ссылку ↑ я открыть не смогу. Опубликуйте страницу и присылайте ссылку на опубликованную страницу мне. Не забывайте публиковать все изменения.
Лишние пояснения
Пояснения, вроде «(см. рис. 1)» — излишни. Расположите рисунок рядом с текстом, который к нему относится, или сделайте якорную ссылку.
Оформление ссылок
Ссылки оформляются внутри слов. Например, на раздел FAQ этой страницы. Никогда не вставляйте ссылки целиком, вроде http://sitename.oj/zachem-ya-postavil-etu-ssylku?U...

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

Исключение — карточки.
Висячие предлоги и строки
Восклицательные знаки в кнопках (и не только)
Процитирую Рому Воронежского: «Теперь правильный ответ. Главное улучшение нынешнего ya.ru — это убрать восклицательный знак с кнопки «Найти». Нервные выкрики приличную компанию не красят. (А обилие восклицательных знаков в письме, как правило, говорит о том, что автор тупой.)»
Отступ до футера
Это частный случай правила внутреннего и внешнего, на который студенты обычно забивают. Расстояние от текста до футера — это нижнее поле страницы. Оно не может быть меньше расстояния между разделами текста.

Неправильное расстояние выглядит так:
Социокнопки и ссылки вникуда
Если ставите социокнопки, лайки и шеры или меню со ссылками — они должны работать. Зачем они нужны иначе?
Предлоги в ссылке
Напоминаю, что предлог включается в ссылку.
Десяток картинок в галерее
Люди не будут щёлкать больше трёх картинок в галерее — нет никакого смысла ставить туда много картинок. Распределите их по статье или отберите лучшие. Или, в идеале — оставьте одну.
Большой центрированный текст
Текст длиннее двух строк или короткий текст с длинными строками центрировать нельзя.
Бессмысленный перенос строки
Иногда вижу, как внезапно обрывается строка. Не знаю, как и зачем это бывает сделано — но делать так не стоит.

Чтобы перенести предлог вместе со словом существует неразрывный пробел.
Бирка вместо заголовка
Раздел «Надзаголовок» в блоге заголовка — не замена полноценному заголовку. Используйте заголовок меньшего уровня.
Непонятный поддомен
По умолчанию ваш сайт называется project289669689696787.tilda.ws. При завершающей полировке статьи стоит заменить «project289669689696787» на нормальное имя. Иначе вашему сайту будет меньше доверия. Кто захочет переходить на какой-то непонятный проект?
Орфография и пунктуация
Не думал, что придётся вносить это в чеклист. Самые частые проблемы — написание не/ни; запятая между подлежащим и сказуемым (откуда это вообще взялось-то?!); запятая вместо тире, двоеточия или других знаков; повелительное наклонение вместо изъявительного; просто орфографические ошибки.
«Сладость» — подлежащее, «достигается» — сказуемое. Они не разделяются запятой.
«Подпиши́тесь» — повелительное наклонение. «Подпи́шетесь» — изъявительное.
Мини-чеклист по гигиене
Правильные кавычки
Длинное тире, где нужно тире; и дефис, где нужен дефис
Правильные знаки: м², Макдоналдс™, © Все права защищены и т.п.
Оформление телефонов, электронной почты и других контактных данных
Бейджик и описание (прислать скриншот)
Как сделать лучше
Список, пункты которого состоят из нескольких предложений, будет лучше выглядеть в форме дополнительного вложенного уровня «заголовок+текст». Сложно звучит — посмотрите, что я имею в виду на картинке.
Кавычки
Как правильно верстать таблицы
Дополняется.
Made on
Tilda