Текстовая страница предназначена для линейного чтения. Я собрал для вас пример:
Можно представить, что это страница на сайте интернет‑магазина, где мне объясняют какие‑нибудь условия доставки и возврата.
Из чего она состоит? Во‑первых, у неё есть заголовок:
Мы с вами говорили, что у любой страницы есть заголовок. Заголовок помогает понять, куда я попал.
У текстовой страницы может быть лид — это такой блок текста, обычно крупнее, чем основной текст. В нём может быть дополнительно раскрыта суть, ценность страницы или находиться какая‑то завлекалочка, которая интригует и помогает решиться читать дальше.
Лид не должен быть очень большим, потому что иначе его будет сложно проглотить наскоком. А его задача — заинтриговать и вовлечь в чтение.
Дальше у нас идёт основной текст:
Базовая рекомендация: если вы делаете текстовую страницу, стремитесь сделать так, чтобы ширина текстовой колонки занимала где‑то
Как мы уже с вами говорили, текст, набранный абзацами, нужно отделять друг от друга. В данном случае я их отделяю с помощью пустой строки, можно с помощью красных строк. Решайте в зависимости от обстоятельств.
При желании в тексте могут быть ссылки. Но, напомню, ими лучше не злоупотреблять, потому что вы получите «Википедию».
В тексте могут быть списки. Подробнейшие рекомендации по тому, как оформлять и верстать списки, я советую смотреть в «Справочнике издателя и автора» Аркадия Мильчина. Там на все случаи жизни даны рекомендации. Я сейчас перечислю самые общие именно с точки зрения вёрстки.
Во‑первых, список должен явно отличаться от основного текста, чтобы было понятно, что я читаю список, перечень. Самый простой и эффектный способ это сделать — добавить отступ.
Мы рекомендуем делать отступ от обобщающего предложения перед списком до первого пункта списка примерно таким же, как обычный межстрочный просвет. Можно сделать самую малость побольше, но не надо делать его таким же большим, как отступ между пунктами списка. Если посмотреть, у меня этот отступ больше межстрочного просвета буквально на
Отступы между пунктами списка можно делать или равными обычному абзацному отступу, или чуть поменьше, тогда список выглядит более собранным. Здесь у меня отступ между пунктами раза в полтора или процентов на двадцать меньше, чем отступ между абзацами.
Список может быть нумерованным и ненумерованным. Нумерацию можно оформлять так, что цифры висят:
Можно теоретически сделать так:
Можно цифры вставить в кружочки, в зависимости от того эффекта, которого вы хотите добиться.
По поводу нумерации очень рекомендую почитать Мильчина. Там очень много разных примеров. Ещё можно скобки ставить или вместо цифр использовать буквы.
Также список может быть ненумерованным. Самый простой вариант ненумерованного списка выглядит примерно так:
У него нет ни буллитов, ни других способов обозначить пункты. Просто список. Сам отступ от левого края уже помогает понять, что перед нами список, а отступы между пунктами помогают отличать один пункт от другого.
Буллиты мне никакой ясности не прибавят, даже если я их добавлю в виде тире:
Может быть, кому‑то привычнее таким образом на этот список смотреть. Но радикальной разницы нет.
Важно: не пытайтесь засунуть в список огромные предложения. Если вдруг у вас в каком‑то пункте списка образовался абзац текста, скорее всего, вам нужно включить внутреннего редактора и пересмотреть список. Возможно, надо превратить его в полноценные предложения:
Сам формат списка подразумевает, что я его быстро прочитал, вник и пошёл дальше. А если у вас целое сочинение в каждом пункте, польза от этого сомнительная, при этом сам набор, полоса шумит, потому что здесь образовался этот отступ.
На странице могут быть заголовки второго уровня:
Важно следить за тем, чтобы заголовки второго уровня явно отличались от заголовков первого уровня. У меня заголовок страницы ни за что не спутаешь с заголовками второго уровня. Таким образом выстраивается иерархия страниц. Я вижу, что вся статья посвящена одной теме, а подзаголовок обозначает её подраздел. А ниже следующий подраздел. То есть видна вложенность.
В соответствии с правилом внутреннего и внешнего, с теорией близости нужно следить за тем, чтобы отступы вокруг заголовков второго уровня соответствовали их связям с другими элементами. У меня отступ над заголовком второго уровня больше, чем отступ под ним. Поэтому понятно, что заголовок относится к тексту ниже, а не как‑то ещё.
Иногда верстают что‑нибудь типа такого:
Здесь заголовок повис ровно между чужим и своим текстом. Конечно, сам порядок чтения нам поможет понять, что заголовок относится к тому, что ниже. Но придётся совершать какое‑то мысленное усилие. Поэтому лучше отступ над заголовком увеличивать.
Наконец, на странице может быть заголовок третьего уровня:
Здесь есть небольшая хитрость. Мы в бюро очень любим делать так, чтобы заголовок третьего уровня был максимально похож на основной текст в плане кеглей и интерлиньяжа и отличался от него только жирностью. При этом отступ от заголовка третьего уровня до своего текста мы как бы не делаем. Здесь этот отступ равен отступу между строками обычного текста.
Тут, наверное, возникает вопрос — а что, если у меня здесь будет два абзаца? Как же так, правило внутреннего и внешнего подсказывает мне, что отступ между абзацами — это внутреннее по отношению к отступу от первого абзаца до заголовка. По‑хорошему мне надо было бы сделать что‑нибудь такое:
Но здесь тот случай, когда этим можно пренебречь. Правило внутреннего и внешнего направлено на достижение двух целей. Первое — это помочь выстроить связи между элементами, чтобы мы понимали, что к чему относится и ничего ни с чем не перепутали. Второе — элементарная эстетика. Как правило, если с правилом внутреннего и внешнего всё хорошо, то, скорее всего, с эстетикой всё будет хорошо.
Если обе эти цели достигнуты, то правило внутреннего и внешнего не так важно. Здесь тот самый случай. Потому что с точки зрения эстетики никакой проблемы нет. Это всё выглядит прилично, компактно, удобно.
Если, например, сделать так, то всё будет гораздо хуже:
Заголовок начинает относиться к заголовку второго уровня, чуть ли не подзаголовок получается. Здесь придётся каким‑то радикальнейшим образом увеличивать все отступы. Эстетика только пострадает.
С точки зрения связей между элементами здесь тоже всё в порядке, потому что совершенно невозможно предположить, что абзац может относиться к чему‑то ещё. Просто в силу последовательности чтения. Есть заголовок, после него абзацы. Про что ещё эти абзацы могут быть? Конечно же, про то, что говорится в заголовке. Поэтому не бойтесь так делать. Зато макеты будут чище, аккуратнее и компактнее.
Конечно же, бывают ещё заголовки более низких уровней. Мы проговорили, что есть первый, второй, третий уровень. Бывают четвёртый, пятый и шестой. Но если вдруг в вашей статье или на странице такое возникает, проверьте, не верстаете ли вы Гражданский кодекс Российской Федерации. За всё время своей работы я только один раз сталкивался с тем, что в документе, с которым я работаю, было больше четырёх уровней заголовков. Это был как раз Гражданский кодекс Российской Федерации, в котором есть заголовок «Гражданский кодекс», том, разделы, подразделы, параграфы, подпараграфы, статьи, пункты и так далее. Там действительно заголовков куча. А на обычной человеческой странице или в статье это совершенно ни к чему. Это издевательство над читателем, потому что читатель всю эту иерархию в голове не держит. Хорошо, если он запомнит, что он сейчас находится в каком‑то разделе статьи, посвящённом деталям или возвратам.
На текстовой странице могут быть иллюстрации. Может быть всего лишь одна:
Иллюстрация линейно встраивается в повествование. Здесь важно следить за тем, чтобы принадлежность иллюстрации считывалась.
В данном случае отступ над иллюстрацией существенно меньше, чем отступ под иллюстрацией. Потому что по какому‑то моему замыслу, который здесь, возможно, не считывается, потому что я текст не проверял, эта иллюстрация имеет отношение к тому, о чём говорится в тексте выше. Поэтому иллюстрация ближе к верхнему абзацу.
Представим, что в первом абзаце история про это здание. Мне её рассказали, потом я посмотрел на картинку, прочитал подпись и пошёл читать дальше. Вот такое линейное чтение. Важно, что в текстовой странице иллюстрации встраиваются в ткань повествования. Их не обязательно встраивать в какие‑нибудь углы, потому что это линейное чтение.
У иллюстрации может быть подпись, может не быть. Мы помним о задаче подписи. Она должна помочь понять, на что это я смотрю, а не описывать очевидные вещи. Здесь подпись помогает понять, что это офис компании в Оксфордшире, в Великобритании. Из картинки этого понять совершенно невозможно. Но при этом в подписи не написано: «Смотрите, какой красивый закат и дом из кирпича». Потому что это видно из картинки.
Если вдруг вам зачем‑нибудь надо поставить несколько иллюстраций рядом, их можно ставить как‑нибудь так:
Это может быть какое‑нибудь сравнение «было‑стало». А если бы мы писали статью о том, как снимает камера на Айфоне, здесь могли бы быть фотографии днём и ночью.
Нет никаких проблем с тем, чтобы в тексте линейной страницы поставить иллюстрации в две или больше колонок и встроить в ткань повествования:
Следующий элемент, который может возникнуть на текстовой странице, — это таблица. Что важно знать? Во‑первых, про таблицы обязательно читайте в «Справочнике издателя и автора» у Мильчина. У него огромное количество примеров и способов улучшения тех или иных таблиц, и можно просто ходить и вдохновляться, и каждый раз, когда сталкиваетесь с таблицей, смотреть, что на эту тему есть у Мильчина, как можно таблицу улучшить, сделать компактнее, информативнее и правильнее с точки зрения языка.
У таблицы обязательно должен быть заголовок. Не может быть такого, что я смотрю на таблицу и не понимаю, что происходит. Здесь у нас таблица, посвящённая стоимости доставки, поэтому здесь про это заголовок:
У таблицы есть главка, то есть названия колонок. Уместно отбивать главку какой‑нибудь линейкой. Чтобы было явно видно, что это шапка. А вот остальные ячейки таблицы отбивать друг от друга линейками, плашками или ещё чем‑то — совершенно не обязательно. Если таблица свёрстана аккуратно и с данными у неё всё хорошо, то всё отлично будет читаться и без них.
Отличный разделитель — это расстояние. Мы здесь без всяких линеек видим, где колонка одна, где другая, третья. Видим какие‑то подразделы. Видите, как аккуратно разделены абзацы в одной строке и как при этом отступ между строками сильно больше этих абзацев, и без всяких линеек мы видим, что здесь происходит.
Если бы я между строками и между колонками напичкал линейки, эту таблицу стало бы воспринимать только сложнее:
Здесь появилось бы много лишнего шума. Понадобилось бы перепроверять внутренние и внешние отступы. В общем, жесть. Без линеек всё гораздо лучше.
Наконец, на странице могут быть всякие спецэлементы. Я приведу один пример — это ссылки на файл. Бывают просто ссылки, когда мы переходим, попадаем куда‑нибудь, а бывает, что при нажатии на ссылку нам предлагают что‑то скачать. Хороший тон подразумевает, что надо предупредить об этом пользователя:
Непрошибаемый и всем понятный способ — явно написать: «Смотри, скачается ПДФ, и весит он столько». Дальше я, перед тем как нажать на эту ссылку, трижды подумаю, хочу ли я это скачивать прямо сейчас. Точно так же здесь может быть написано не «ПДФ», а «док», «иксель».
В конце страницы должен быть подвал. Подвал помогает понять, что я дошёл до конца страницы. Если я его уберу, будет ощущение, что внезапно всё закончилось, наступила рекламная пауза:
Как только есть подвал, я вижу, что я дошёл до конца:
У меня всё загрузилось точно до конца, всё нормально работает, просто страница закончилась. Здесь автор сказал всё, что хотел.
Подвал может быть самым разнообразным: большим, сложным, с кучей ссылок. А может быть очень простым, как на моём примере: просто поставили копирайт, почту для обратной связи — и всё отлично.
Иногда довольно удобно что‑нибудь ставить в боковой колонке. Например, размещать в ней меню:
Если у вас на сайте есть целая серия вспомогательных страниц, их можно друг с другом перелинковать с помощью меню. Я зашёл, например, с главной страницы на статью про доставку и возвраты, прочитал и могу здесь же ещё почитать что‑то о компании, контакты, условия конфиденциальности. Всё здесь может быть, тоже удобно работает. Здесь плашка выделяет тот пункт, на котором я сейчас нахожусь, всё остальное синее, кликабельное.
Боковую колонку очень хорошо использовать для вспомогательных элементов. Мы что‑нибудь о какой‑то штуке говорим, а здесь сбоку может появиться какая‑нибудь вспомогательная информация, ещё текст:
Так как эта боковая колонка узенькая, здесь уместно сделать текст поменьше, интерлиньяж поменьше. Какая‑то вспомогательная информация. Теоретически здесь может появиться даже картинка или интересная статья на эту тему: «Если что, чувак, можешь пойти сюда, что‑нибудь почитать».