- Украшаем списки
- Начнём со спецсимволов
- Выводим изображения через псевдо-элементы
- Метод Николаса Галлохера
- Новый метод с использованием url() / clip
- Новый способ: как оно всё работает?
- Преимущества данного метода перед другими
- Украшаем ссылки псевдо-элементами
- Пара слов об удобстве использования
- Списки в тексте: разбор частых ошибок копирайтеров и правила оформления
- Роль буллитов в тексте
- Маркированные списки
- Нумерованные списки
- Как правильно оформлять списки
- Уровни списка
- Особенности перечней в продающих текстах
- Частые ошибки копирайтеров
Украшаем списки
В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» («Taming Lists»), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.
Начнём со спецсимволов
Существует множество символов, которые бы мы могли использовать в качестве изображений для создания различных маркеров. Что может получиться: 
Пример
Эти маркеры (, , , ) в списке выше созданы следующим образом:
HTML:
Как это работает
- Значение свойства content должно указывать на Unicode-символ в шестнадцатеричном формате (для IE мы используем HTML-сущности).
- Internet Explorer 6 и 7 версии не поддерживает ни ::before, ни :before, поэтому символы мы подключаем через CSS-выражения.
- Internet Explorer 8 не поддерживает ::before, но поддерживает запись с одним двоеточием.
- Обратите внимание, что игнорируя совместимость с различными браузерами «нет никакой разницы как между :before и ::before, так и между :after и ::after. Синтаксис с одним двоеточием (т.е. :before или :after-child) используется для описания как псевдо-классов, так и псевдо-селекторов во всех версиях CSS до CSS3. С введением CSS3, чтобы отличать псевдо-классы от псевдо-элементов, первые записываются, используя одинарное двоеточие, последние же, используя двойное двоеточие».
- В Internet Explorer символы заворачиваются в элементах , следовательно у нас есть возможность как-то указать на них и стилизовать (вам скорее всего захочется использовать классы для этих целей).
Заметьте, что CSS-выражения, которые мы здесь используем не хуже тех, которые мы используем для имитации min-width и подобных. Она вычисляются один раз, что впоследствии должно привести к небольшому увеличению производительности.
Выводим изображения через псевдо-элементы
Основное преимущество использования псевдо-элемента с целью отображения картинок заключается в том, что позволяет использовать спрайты. Вообще-то в этом нет ничего нового, и многие сайты уже используют дополнительную (так называемую «мусорную») разметку для достижения этой цели. Например, Yahoo! Search использует пустой тег , а Facebook — . Следуя этим путем, можно создавать компактные CSS-спрайты, без каких-либо пустых областей.
Следующие два примера не используют дополнительной разметки, основываясь на одном и том же спрайте:
Оба изображения ниже — вторая иконка в спрайте — созданы, используя двумя методами, соответственно.
Метод Николаса Галлохера
Стилизация псевдо-элемента, используя фоновое изображение:
Новый метод с использованием url() / clip
Используем свойство content для вставки спрайта, который потом режется в clip:
Если вам вдруг интересно, почему я выше использую position: absolute, объясняю: потому что свойство clip применимо только к элементам, который позиционируется абсолютно.
Новый способ: как оно всё работает?
- Вместо того, чтобы украшать псевдо-элемент каким-либо фоном, мы используем его, чтобы вставить изображение (через свойство content)
- Используя свойство clip мы «вырезаем» из изображения только ту часть, которую хотим отобразить. Это означает, что нет необходимости добавлять в картинку пустое пространство с целью избежать отображение других её частей (обычно использовалось как фоновое изображения для больших элементов).
- Мы компенсируем значения clip, используя свойства left и/или top
В случае, если не требуется обрезать изображения, изображения в спрайте должны выравниваться по правому или левому краю для размещения, удовлетворяя RTL/LTR-контексту (background-position: [left][right][vertical value]). Еще одним ограничением будет создание спрайтов с изображениями, следующими друг за другом (другие части изображения могут также отображаться). В процессе «разрезания» спрайта эти нюансы не играют никакой роли, следовательно, картинки можно стыковать друг с другом.
Пример смотрите ниже:
Преимущества данного метода перед другими
Стиль, который используется при печати
В отличие от фоновых изображений эти изображения печатаются вместе с документом (они отправляются на принтер).
Стиль, который является доступным
В отличие от фоновых изображений эти изображения не исчезнут в режиме высокой контрастности в Windows или в высоко контрастных таблицах стилей.
Стиль, который работает в Internet Explorer 8
Этот метод также работает и в Internet Explorer версии 6 и 7.
Обратите внимание, чтобы лишнего HTTP-запроса может быть использована схема data: URI. Internet Explorer не поддерживает схемы data: URI, но мы можем использовать MHTML для Internet Explorer 6/7, что позволит старым браузерам их понять.
Украшаем ссылки псевдо-элементами
Николас Галлахер показывает много интересных фишек, которые можно сделать, используя псевдо-элементы. Единственное, что я здесь добавил, это использование ::after в стилях ссылок, как на примере ниже:
CSS:
Пара слов об удобстве использования
Вам придется смириться с тем, что все содержимое отображается на экране, а так как отсутствует механизм присвоения альтернативного текста к изображениям, которые добавлены через свойство content, следует убедиться, что эти изображения используются чисто в декоративных целях. Иначе пользователи просто не будут иметь доступа к этой информации.
Источник
Списки в тексте: разбор частых ошибок копирайтеров и правила оформления
Списки в тексте важны, но необходимо использовать их с умом. Часто читатели, не обращая внимания на вступление и прочие текстовые блоки, сразу переходят к спискам, так как именно в них заключается самая важная информация. Важно знать, когда уместен маркированный список, когда — нумерованный. Можно ли делать многоуровневые списки, а в каких случаях стоит обойтись без них — давайте разбираться.
Роль буллитов в тексте
Буллиты — графические символы для выделения пунктов списка в статье: точки, кружочки, цифры, картинки. Буллиты разграничивают текст, делают статью удобной для восприятия и беглого ознакомления с ней. Списки могут использоваться для перечисления негативных последствий или вариантов решения проблемы. Благодаря им в коротком списке можно резюмировать все сказанное выше в тексте.
Также они полезны для продвижения сайта. Поисковые роботы положительно относятся к статьям с нумерацией и маркированием.
Конечно, вся статья не должна состоять только из перечислений — в противном случае читатель не сможет быстро понять, какая часть текста для него наиболее актуальна. Списки хороши вместе с подзаголовками, выделениями, иллюстрациями, цитатами.
Перечни уместны не всегда. Например, в аналитических новостных статьях они почти не используются, однако для информационных, продающих текстов буллиты полезны, так как благодаря им статья становится цепляющей и читабельной.
Маркированные списки
Это неупорядоченные перечисления: в них используются буллиты в виде точек, квадратиков, иконок, изображений. Они нужны, когда последовательность элементов не имеет значения.
В маркированных списках должны присутствовать пункты, связанные друг с другом по смыслу и имеющие примерно одинаковую важность. Рекомендуется, чтобы все пункты были примерно равны по объему, в противном случае перечень будет казаться перегруженным.
Вот пример того, как делать не стоит:
Хорошая структура статьи содержит:
- подзаголовки;
- абзацы;
- выделения жирным и курсивом: они позволяют обозначить в статье важные мысли и привлечь внимание читателя.
Пояснение в конце перечня стоит вынести в отдельное предложение.
Минимальное количество элементов в маркированном списке — три. Если перечень слишком короткий, лучше трансформировать его в небольшое предложение.
Нумерованные списки
Это упорядоченные перечисления, представленные в конкретной последовательности. В качестве буллитов используются числа, реже — буквы (обычно встречаются в тестах).
Часто нумерованные перечисления используются в пошаговых инструкциях и руководствах, в рецептах. Без них не обойтись в топах и рейтингах. Но есть ситуации, когда подходят только маркированные списки.
Пример того, как делать не стоит:
Для связи с нами вы можете:
- Позвонить по телефону.
- Написать в мессенджере или в сообщения группы в соцсети.
- Прийти в офис компании лично.
Пример правильного использования нумерованного перечисления:
Если в пунктах есть 2 и более предложения, то первое рекомендуется выделять жирным или курсивом. Тогда вторые и последующие предложения будут поясняющими. Так читателю легче воспринимать материал. В то же время слишком длинные пункты тоже использовать нельзя — в большинстве случаев двух предложений более чем достаточно.
В указанном выше примере последовательность действий имеет значение, поэтому используется нумерованный перечень.
Минимальное количество пунктов — два.
Как правильно оформлять списки
1. Если каждый пункт — отдельное предложение, то он начинается с заглавной буквы, а в его конце должна стоять точка.
2. Если каждый пункт — продолжение незавершенного предложения, то необходимо начинать его со строчной буквы, а в его конце должна стоять точка с запятой (или запятая, если пункты состоят из 1–2 слов).
3. Если в начале пункта использована цифра/строчная буква со скобкой, то текст начинается со строчной буквы.
4. Если в начале пункта использована цифра/прописная буква с точкой, то текст начинается с прописной буквы.
Пункты должны быть согласованными. Например:
Пакет документов для поступления в вуз состоит:
- из аттестата о среднем образовании;
- вкладыша к аттестату;
- паспорта абитуриента.
Внимание! Повтора слов в начале словосочетаний или предложений стоит избегать. В примере выше предлог «из» встречается только в первом пункте — повторно его использовать уже нет необходимости.
Уровни списка
Перечисления могут быть одноуровневыми или многоуровневыми (с вложениями). Количество уровней вложений — до 3. Пункты первого уровня могут начинаться с «1.», второго — с «1.1», третьего — с «•».
Многоуровневые перечни хороши для серьезных длинных гайдов, подробных инструкций. В обычных статьях злоупотреблять ими не стоит, так как они перегружают тексты. Лучше разбить один крупный перечень на несколько маленьких.
Особенности перечней в продающих текстах
Многоуровневые или длинные, подробные нумерованные перечисления для продающих текстов подходят редко. Обычно используются маркированные перечисления.
Пункты в таких перечнях должны:
- быть краткими и емкими;
- иметь одинаковую длину (до 3–4 слов);
- описывать выгоду для клиента.
Желательно выстроить все элементы в порядке убывания важности. Однако самый сильный и убедительный аргумент должен стоять в конце списка. Не рекомендуется перечислять технические характеристики товара, которые малопонятны среднему пользователю.
Также есть примеры успешного использования и подробных, развернутых пунктов. Такой подход уместен при описании «болей» клиента.
На лендингах эффектно выглядят буллиты со специальными графическими значками или картинками. Они позволяют пользователям быстро найти актуальную для себя информацию.
Красиво выглядят интерактивно оформленные перечисления. Например, когда при нажатии на элемент появляются преимущества, описание, пояснение, которые скрываются при нажатии на другой элемент. Это привлекает внимание читателей и визуально разгружает страницу.
Главное — упорядоченность элементов: если блоки перечислений «разбросаны» по экрану в случайном порядке, то многие пользователи даже не будут с ними знакомиться.
Частые ошибки копирайтеров
Основные ошибки при составлении списков:
- строчная буква после точки;
- заглавная буква после точки с запятой;
- несогласование элементов списка по падежам;
- разнородные члены предложения в перечислениях;
- «вода», малосодержательные пункты.
Другая ошибка — отсутствие предложения/словосочетания с двоеточием перед самим списком. Так, если перечисления начинаются без такого введения сразу после подзаголовка или предыдущего абзаца текста — это неправильно.
Не стоит заканчивать текст перечислением, иначе это создает у читателя ощущение недосказанности. Исключение — перечень в конце статьи, кратко подытоживающий все вышесказанное.
Что касается размещения перечислений рядом с подзаголовками или близко друг к другу, то в этом случае мнения разнятся. Такое расположение буллитов допустимо, но нежелательно.
Итак, списки — эффективный способ структурировать данные, выделить главное, убедить читателя, показать преимущества. Благодаря им раскрывается взаимосвязь элементов, а информация оформляется в лаконичной форме. Есть много разных способов их оформления, но для продающих текстов оптимальный вариант — простые маркированные перечни с красивым визуальным оформлением (например, с графическими значками перед каждым пунктом).
Также стоит помнить о стандартных правилах составления списков, которые касаются выбора нумерации или маркировки, строчной/заглавной буквы, знаков препинания.
Регистрируйтесь на Бирже eTXT, выполняйте заказы, пишите статьи на продажу. Следуйте советам, приведенным в статье, составляйте списки грамотно. Заказчики обязательно оценят ваш труд и профессионализм.
Источник