Содержание

Рекомендации по вёрстке текста — Дизайн-студия «Ан2» Дизайн-студия «Ан2»

Как оформить текст, чтобы его дочитали до конца

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

Поэтому интересно написать текст — это полдела. Чтобы человек захотел текст прочитать, важно его грамотно оформить. Из статьи вы узнаете, как сверстать текст так, чтобы его дочитали.

Как я читаю текст

Каждое утро я захожу на сайт Meduza и читаю новости. Я понаблюдала за собой и поняла, какие тексты мне нравятся, и как я подсознательно выбираю, что прочитать. Из этих этапов складывается моё чтение:

Смотрю на картинки и заголовки

Первое, что при просмотре текста бросается мне в глаза — это картинки и заголовки. Я быстро пробегаюсь по ним и уже примерно представляю, о чём пойдет речь. Если они меня заинтересовали, я открываю новость в новой вкладке и читаю её.

Сканирую текст новости взглядом — удобно ли читать?

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

Читаю первые строки абзацев

Если текст прошел проверку на удобство чтения, я пробегаюсь по абзацам. Перескакивая с одного абзаца на другой, я понимаю, интересна ли мне эта информация, и хочу ли её прочитать. Интересна — читаю весь текст полностью.

Всё это происходит за считанные секунды, но от них зависит, прочитаю я текст или нет. Поэтому важно уже в эти первые секунды завладеть вниманием читателя.

Читать должно быть комфортно, иначе я трачу силы на попытки прочесть текст, а не на его смысл.

Что такое вёрстка?

Вёрстка — это расположение блоков текста, изображений, заголовков и других элементов на странице. Если сверстать текст грамотно, он становится удобочитаемым и привлекает внимание.

Думаю, все мы обращаем внимание на одни и те же моменты при чтении текста. Поэтому при вёрстке текста важно учесть многие нюансы.

Мы собрали 15 рекомендаций по вёрстке, которые помогут вам оформить текст так, чтобы его дочитали до конца.

15 рекомендаций по вёрстке

Оставляйте «воздух»

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

«Воздух» визуально структурирует текст, делает его «прозрачным» для читателя. Пространство даёт глазам отдохнуть между блоками текста.

Очень важны поля страницы. Они играют роль рамки и помогают воспринимать то, что внутри. К тому же поля — это технический элемент. Их ширина зависит от метода скрепления продукта (например, широкие поля нужны при скреплении спиралью).

Конкретных правил по расчёту «воздуха» нет, но он нужен обязательно в каждом тексте. В каких количествах, определяйте визуально — после того, как выберете поля и распределите объекты по листу.

Размещайте текст в колонки

Колонки — это узкие столбцы текста на всю высоту страницы, которые расположены на странице друг рядом с другом.

Широкие блоки текста читать неудобно — приходится поворачивать голову, чтобы дойти до конца строки, и следить, чтобы взгляд случайно не перескочил на другую. Если текст размещён в колонки, взгляд читателя охватывает текст за один раз.

При вёрстке колонок обратите внимание на следующее:

  • Ширину колонки выбирайте в зависимости от шрифта: чем шрифт крупнее, тем колонка шире.
  • Расстояние между колонками делайте больше межстрочного интервала, чтобы визуально разграничить колонки.
  • Сочетайте колонки разной ширины.

Используйте заголовки и подзаголовки

Заголовки и подзаголовки структурируют текст, визуально делят его на небольшие блоки, рассказывают о содержании блока.

При первом просмотре читатель «зацепится» за подзаголовки и получит краткую информацию о содержании текста. Заголовки интригуют и повышают желание прочесть текст.

При использовании заголовков и подзаголовков не забудьте:

  • Выделить их среди основного текста (например, другим начертанием или шрифтом).
  • Оформить заголовки в едином стиле.
  • Сделать отступы по вертикали до и после заголовков (отступ до заголовка делаем больше отступа после — так текст будет логическим продолжением заголовка).

Разбивайте текст на абзацы

Абзац — это часть текстового блока, который ограничен заголовком или подзаголовком. Абзац состоит из небольшого количества строк (зависит от ширины колонки — чем шире колонка, тем меньше строк должно быть в абзаце).

Читать «простыню» текста — не самое приятное и простое занятие. А короткие абзацы читатель охватит одним взглядом и прочитает с большей вероятностью.

При разделении блока текста на абзацы обращайте внимание на смысл. Деление не должно затруднять понимание текста. Расстояние между абзацами текста делайте равным двойному межстрочному расстоянию.

В рекламных материалах используйте асимметрию

Асимметрия в композиции — это несимметричность страницы относительно вертикали. То есть блоки текста, картинки, заголовки располагаются на странице несимметрично.

Симметрия делает композицию скучной и однообразной. Она не обращает на себя внимание читателя и быстро прочитать её точно не получится.

Асимметрия делает страницу «живой», читатель обращает на неё внимание — на ней есть, за что «зацепиться» взгляду.

Располагайте блоки текста на странице так, чтобы они вели читателя по смыслу шаг за шагом. Выравнивайте текст и заголовки по одному краю, а не по центру, иначе текст получится рваным, а читателю придется долго искать начало новой строки.

В официальных материалах используйте симметрию

Симметрию хорошо использовать в юридических отчётах, контрактах или научных статьях. С ней текст приобретает некую официальность и торжественность.

Располагайте блоки текста на странице симметрично относительно вертикали. Выравнивайте текст и заголовки по центру, чтобы придать документу официальность.

Подбирайте и располагайте картинки грамотно

Картинки — первое, на что падает глаз читателя. Картинки нужны, чтобы заинтриговать, рассказать кратко о смыслах текста при первом взгляде, помочь понять текст.

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

  • Подбирайте картинки к смыслу текста.
  • Располагайте картинки так, чтобы они вели читателя по логике текста.
  • Определяйте размер картинки её значением, а не вашим желанием заполнить свободное пространство.

Будьте осторожны с цветом

Если текст — это радуга из цветов и оттенков, нежелание читать текст возникнет уже при первом просмотре. Чтобы этого не произошло, пользуйтесь «правилом трёх» — при оформлении в общей сложности выбирайте не более 3-х оттенков цвета.

Используйте не более 3-х шрифтов

Большое разнообразие шрифтов мешает человеку читать текст. В этом случае ему сложно перестроиться с одного начертания на другое.

Используйте «правило трёх» — выбирайте не более 3-х шрифтов.

Используйте сочетаемые шрифты

Если использовать шрифты, которые не подходят друг другу, это напрягает глаз читателя и вызывает отторжение к тексту.

При выборе сочетаемых шрифтов руководствуйтесь следующими правилами:

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

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

Используйте комфортные кегль и интерлиньяж

Кеглем называется размер шрифта, а интерлиньяжем — межстрочный интервал.

Будет человек читать текст или нет, зависит в том числе и от них. Мелкий шрифт, скорее всего, останется без внимания: чтобы его прочесть, читателю нужно напрячь глаза.

Используйте шрифт не менее 9-го кегля. Для определения комфортного шрифта и межстрочного интервала используйте правило: чем шире колонка, тем крупнее шрифт и больше межстрочный интервал.

Выбирайте шрифты, подходящие к смыслу текста

Каждый шрифт имеет свой характер и придаёт тексту определенный окрас, настроение. Важно подобрать шрифт так, чтобы донести смысл текста и эмоции. Например, вряд ли мы передадим подходящие эмоции, если напишем фразу «Я тебя люблю» готическим шрифтом.

Переносите текст правильно

Неправильные переносы текста усложняют чтение.

Расставлять в тексте переносы слов на другую строку важно, следуя следующим правилам:

  • Используйте переносы слов не более чем в 3-х строках подряд.
  • Оставляйте знаки препинания на предыдущей строке.
  • Переносите целиком цифры, которые составляют одно число, и существительные, которые к этим цифрам относятся (1981 год, 25 лет).
  • Переносите на новую строку предлоги, частицы и междометия.

Если вы переносите заголовок:

  • Разбейте заголовок на строки там, где стоят логические паузы.
  • Сделайте вторую строку заголовка короче первой.
  • Переносите слова полностью.
  • Переносите предлоги, союзы и междометия на новую строку.

Избегайте «висячих» строк

«Висячая» строка появляется, если:

  • Весь абзац на одной странице, а одна неполная строка на другой.
  • Строка в конце абзаца состоит из неполного слова.

С «висячей» строкой читателю сложнее понять смысл текста. «Висячие» строки ухудшают внешний вид текста и делают текст неудобным для чтения. Поэтому при вёрстке избавляйтесь от «висячих» строк.

Используйте выноски

Выноска — это небольшой блок текста, который располагается вне основного текста. В него обычно располагают важный и привлекающий внимание текст.

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

Если вы делаете выноски, обязательно создайте яркий контраст выноски и основного текста — хорошо её выделите среди него. Вот несколько способов, как можно это сделать:

  • Создайте широкое белое пространство вокруг неё.
  • Выделите кавычками, которые гораздо крупнее самого текста.
  • Оформите фон выноски контрастным цветом.
  • Заключите выноску в рамку.
  • Выделите другим шрифтом.

Несоблюдение рекомендаций

Итак, приведенные рекомендации не являются абсолютными истинами. Каждая из них может быть нарушена, если того требует конкретный текст и его визуальная приятность. Но, нарушая правила, мы должны понимать, для чего мы это делаем. 😉

P.S. И помните. Не каждый текст читатель должен прочитать. Какую-то информацию нужно от него спрятать, но оставить при этом на виду. В этом тоже помогут перечисленные рекомендации по вёрстке.

Как красиво оформить публикацию на Хабре / Хабр

Публикация – основная единица связи автора с читателем. Практика показывает, что на Хабре можно разместить почти любой формат: небольшой анонс и лонгрид-обзор, интервью, фотоотчёт, трансляцию события, урок и многое-многое другое. Нередко успех публикации зависит и от её оформления – приятно оформленный материал читать одно удовольствие. В этой статье мы постараемся предоставить вам много полезных советов по хорошему оформлению материала.

И первый лайфхак – кликабельная картинка до ката, которая ведёт сразу внутрь публикации:



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

Поэтому будет здорово, если авторы будут применять этот лайфхак (который мы не делаем автоматически, так как до ката может располагаться несколько картинок): просто копируйте адрес статьи сразу после публикации и привязывайте его к картинке до ката.

Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре. Но несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage), писать материалы лучше где-то в другом месте, а после всех правок переносить на Хабр. Самый удобный (в том числе для коллективной работы) вариант – GoogleDocs. Хотя, в целом подойдёт любой текстовый редактор – в том же Pages на планшете очень часто рождаются тёплые ламповые тексты.

Эти варианты предпочтительней как минимум по трём причинам:

– Они не зависят от LocalStorage и текст случайно никуда не пропадёт, также он доступен с любого устройства;
– Текст публикации пишется не на одном дыхании, а значит – может получиться более вдумчивым, полным и целостным;
– Наличие всевозможных возможностей по оформлению позволяют видеть статью такой, какая она будет; для последующего переноса материала можно использовать конвертеры, например этот.

На «Хабре» (и на других контентных проектах ТМ) существуют одинаковые формы написания публикаций – обычный редактор с предпросмотром. Для написания используется обычный текст, который можно приукрасить HTML-тегами. Часто (особенно в Песочнице) доводится видеть текст, в который авторы всеми правдами и неправдами пытаются запихать CSS-стили, пишут абзацы с тегом параграфа, прописывают таргеты для ссылок и так далее – всё это лишнее, не следует загрязнять код публикации тем, что не интерпретируется сайтом. Просто попробуйте пару раз поиграться с формой создания публикации, не забывая пользоваться при этом кнопкой предпросмотра, чтобы оценить результаты. Ну а пока несколько советов.

Абзацы

Худшее, что может быть с текстом – это если он вставлен одной сплошной простынёй. Случайный скролл колесом (или неаккуратное касание до планшета) и всё, вы уже потеряли место, где читали. Разбивайте текст на небольшие абзацы, по несколько предложений в каждом.

Абзацы текста можно разделять картинками – это особенно хорошо, если они при этом ещё и уместны.

Заголовки

На сайте как и в HTML-разметке есть 6 уровней заголовков, h2-H6. На самом же деле большинство авторов используют всего несколько – самый крупный (h2), поменьше (h3) и средний (h4) – остальные не очень-то и заголовочные. Используйте их для структурирования текста – самым крупным выделяйте основные разделы, заголовками поменьше – подразделы и т. д. По заголовкам должно быть понятно, что вы начинаете читать – раздел статьи или часть раздела. Не делайте заголовки ради заголовков.

Кстати, заголовки (равно как и обычный текст) также можно красить тегом font color (тегом, а не css-стилем!) – эту фичу особенно полюбили корпоративные клиенты, раскрашивая заголовки в фирменный цвет (например, в этой статье заголовки имеют цвет с логотипа Хабра). Такой вариант хорош тем, что ещё больше выделяет заголовок на фоне чёрно-белой простыни текста.

Пример:
<h5><font color="#cc0000">Irony-заголовок</font></h5>

Результат:
Irony-заголовок

Ссылки

Не вставляйте длинные ссылки прямо в текст публикации – привязывайте их к какому-нибудь слову. Сравните:

Гуглите про НЛО – www.google.ru/?gfe_rd=cr&ei=V_GiVc6KOLCr8wf5zoDgBQ&gws_rd=ssl#newwindow=1&q=%D0%BD%D0%BB%D0%BE

Гуглите про НЛО

Не ленитесь вставлять ссылки на используемые в статье материалы – публикации на Хабре, статьи в Википедии и т. д. – хорошо же, когда статья несёт максимум пользы, и читателю не нужно потом лазить по поисковикам, так как вся необходимая информация заботливо собрана автором заранее. За такое и плюсик в карму не жалко поставить.

Спецтеги

Обязательно изучите теги, доступные на сайте – среди них есть много полезных. Например, если вы используете в статье какие-нибудь редкие аббревиатуры, то почему бы не расшифровать их значение с помощью тега abbr? Смотрите, как здорово:

<abbr title="Картинка Для Привлечения Внимания">КДПВ</abbr>

Результат:

КДПВ

Также немногие чувствуют разницу между тегами source и code. Source вставляет блочный элемент с подсветкой синтаксиса, в то время как code вставляет строчный элемент (по сути просто моноширинным шрифтом). Соответственно, нет смысла вставлять несколько строк кода в тег code – он будет некрасиво смотреться, сливаясь с основным текстом. А вот source – наоборот.

Не все знают, что есть поддержка таблиц, в том числе с возможностью объединения рядов и колонок. У таблиц нельзя задавать толщину рамки или цвет фона, но зато внутри них можно использовать изображения и текст со всё тем же форматированием – если подойти ответственно, то получится красиво. Да, кто-то скажет, что можно вставить таблицу и картинкой, но так она не проиндексируется и так в ней будет сложнее что-то поменять.

Полно других тегов: для упоминания других пользователей (чтобы они это заметили у себя в трекере), для вставки интерактивных twitter-карточек и т. д.

Спойлеры

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

Почему это круто?

Чаще всего это нужно для того, чтобы уместить в одной публикации больше информации, но чтобы сама публикация при этом не казалась раздутой. В спойлерах можно скрывать полезную информацию (например, технические характеристики в обзоре устройства или принцип работы какого-то алгоритма) – те, кому информация нужна, тот сможет посмотреть её, а всем остальным она не будет мозолить глаза. Также это позволяет избежать перекидывания пользователя на внешние сайты (на ту же Википедию), что особенно удобно при чтении публикации с мобильного устройства.


Касаемо изображений нужно знать две особенности:

  • Все изображения с Хабрахабра/Geektimes/Мегамозга хранятся на сервисе Habrastorage – специальном ресурсе для хранения картинок. Даже если вы вставляете картинки с внешнего сайта, они всё равно перезальются на Habrastorage – чтобы быть доступными даже спустя годы. Заливайте картинки сразу на сервис – он очень удобен.
  • Все большие изображения автоматически масштабируются средствами CSS – чтобы не разъезжалась вёрстка сайта. То есть вы можете вставить FullHD-скриншот, но на нём, скорее всего, ничего не будет видно – не поленитесь сделать картинку кликабельной, прописав ей ссылку на полную версию изображения.

Подбор КДПВ

Первое изображение, которое используется в публикации – КДПВ, она же Картинка Для Привлечения Внимания или картинка до ката. Как понятно из названия, на эту картинку возложена большая миссия – привлечь внимание потенциального читателя, когда он смотрит ленту публикаций. И именно поэтому эту картинку следует использовать – если её нет, то ваша публикация с большой долей вероятностью «потеряется» при скролле. Согласитесь, вы не раз заходили в публикацию только потому, что вас заинтриговала картинка до ката?

От выбора КДПВ часто зависит дальнейшая судьба публикации, настрой в её комментариях. Нет ничего скучнее логотипа бренда – используйте что-то более яркое и сочное, что будет именно привлекать внимание. Юмор и мемы приветствуются, но всё должно быть в меру – если от какого-то мема все устали и вы сами понимаете, что он не очень-то уместен – ищите другую картинку. Не раз встречались комментарии типа «Зашёл только ради картинки» или «Даже картинка не спасла этот пост».

Наглядные примеры: с сиськами, без сисек.

Если вы пишете цикл публикаций, есть смысл использовать одну и ту же картинку до ката – тогда те, кому понравилась предыдущая публикация из цикла, с большой вероятностью зайдут и в новую часть.

Скриншоты

У Mac-пользователей всё просто – сам Стив Джобс велел использовать сочетание «CMD + Shift + 4 + Space» для того, чтобы сделать красивый скриншот окна с тенью. Для Windows- и Linux-пользователей существует огромное количество всевозможных утилит и способов – на ваше усмотрение.


Скриншот из OS X после нажатия комбинации «CMD + Shift + 4 + Space». Подпись – italic + font color=«99999»

Нюансов же несколько:


Картинка без рамки, с align=«center»

Не вставляйте JPEG-скриншоты и PNG-фотографии – без внимания в комментариях это не оставят. Равно как и картинки ужасного качества (более 2 баллов по шкале шакалов) использовать не следует.

Обтекание изображения текстом

Если вы используете в статье небольшую картинку (менее 300-400 пикселей по ширине), то по бокам изображения будут пустые области. Чтобы избавиться от них, можно прописать картинке атрибут align со значением left, center или right – как вам удобней. Чтобы не делать потом несколько переносов строк, используйте атрибут clear.

А ещё изображениям можно задавать атрибуты width и height – специально для перфекционистов, которые хотят до пикселя выровнять в тексте публикации какую-нибудь иконочку.


  • Изучите теги, доступные на сайте. Одну и ту же статью можно оформить по-разному. Если статьи на Хабре для вас как часть портфолио, то не поленитесь потратить немного времени на красивый результат.
  • Обращайте внимание на то, как оформляют публикации другие пользователи. Почти каждый день для этого публикуется множество примеров.
  • Обращайте внимание на отступы. У разных объектов они разные – у заголовков один отступ, у картинки или тега с кодом – другой. Некрасиво, когда в публикации есть лишние переносы строк, а картинки «прилипают» к тексту.
  • Пользуйтесь орфографом/типографом. Дефисы, кавычки, многоточия и т.д. – это на ваше усмотрение. Но вот ошибки мало кому понравятся – исправляйте хотя бы то, что подчёркивает браузер.
  • И самое главное – пользуйтесь предпросмотром. Неоднократно на сайте размещали недописанные публикации, с системными пометками (СОГЛАСОВАТЬ С ИГОРЕМ) или без картинок. В лучшем случае успевали скрыть публикацию в черновики для исправления, в то время как в социальные сети могли уйти нерабочие ссылки; да и статья после публикации не оказывается в самом верху – она оказывается там, где была на момент первого размещения. В худшем случае это смещало фокус обсуждения в комментариях – оно вам надо? Именно поэтому мы рекомендуем готовить материал где-то вовне, но даже с таким подходом следует семь раз отмерять, прежде чем один раз отрезать.

Мы поделились с вами некоторыми советами (довольно очевидными), но важно помнить, что самое главное для публикации – чтобы она была интересной. Если она неинтересная, никакое оформление не спасёт. Но в то же время читать красиво оформленную публикацию всегда приятно. И в таком случае важно не переусердствовать – всё хорошо в меру.

Пишите свои рекомендации по оформлению публикаций – самые ценные советы добавим сюда.

Как сделать красивый текст на фото в Инстаграм. Идеи.

Как разместить текст на фото, не навредив при этом гармоничному виду ленты? С этой проблемой сталкивается каждый, кто начинает осмысленно продумывать визуал в Инстаграме. Как фотограф и свободный художник я очень люблю добавлять в свои фотографии текст, например, вот так и вот так:

Как контент-фотограф и помощник в создании визуала, я могу сказать, что добавить текст на фото в аккаунт не всегда просто, не всегда уместно и бывает еще и разрушительно для общей красоты профиля. В этой статье мы  попробуем разобраться с тем, зачем текст на фото вообще нужен, как его лучше добавить и какие альтернативные варианты могут быть.

Зачем нужен текст при оформлении Инстаграма

Начнем с того, зачем вам вообще может понадобиться текст в вашем визуале.

Обратить внимание 

Чтобы гость на вашей странице уж точно открыл пост со скидкой, акцией и важным объявлением. Такие посты помогут тому, кто на странице впервые, лучше понять, что здесь вообще происходит. А тому, кто уже с вами знаком помогут не пропустить важное.

Заинтриговать

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

Создать общую картину в аккаунте

Чтобы не оставалось сомнений в том, чем занимаются в аккаунте. Чаще всего этот подход нужен, если вы ведёте экспертный Инстаграм. Особенно, если вашу работу сложно отразить в визуале, но нужно как-то показать что это не просто личный, а экспертный профиль.

Просто для красоты

Так тоже бывает, да. Несмотря на то, что сделать красивую фотографию с текстом сложно, удавшейся фотографией с текстом очень легко сделать красиво в блоге.

Например, текст может навести загадочности, магии, очарования, да чего, собственно, вам угодно и что хочется вам через блог транслировать.

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

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

Как сделать фото с текстом для Инстаграма

Теперь, когда я, надеюсь, убедила вас, что текст в визуале вам точно нужен, самое время рассказать, как же создать качественные картинки с текстом. Пойдем от самых простых к самым сложным вариантам.

Просто текст на фоне

Может выглядеть вот так:

 и вот так:

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

Добавить текст на фото

С этим вариантом прошу вас быть очень осторожными. Кажется, что всё очень просто, но сделать гармонично достаточно сложно. Можно помещать текст на фото, а можно сделать рамочку с текстом.

Сделать так же можно в любом графическом редакторе и во множестве приложений на телефоне (например, Canva).

Шаблоны от простых до оригинальных

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

Написать от руки

Особенно если у вас есть стилус или графический планшет. Выглядеть будет персонально и цепляюще (если получится разборчиво).

Сделать коллаж 

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

Книги и журналы

Используем уже созданные кем-то другим тексты для общего настроения в ленте или ищем те фразы, которые актуальны для конкретного поста:

Надписи на одежде

По сути могут работать по такому же принципу, как и книги и журналы. Я, например, пишу посты про селфи и иллюстрирую их фотографией футболки с надписью:

Или можно писать более чувственные и содержательные тексты:

Надписи на теле 

Моя особая любовь. Вот, например, мы писали имя массажиста, который делает корректирующий фигуру массаж:

Надписи на кофейных стаканчиках (а также тортах, капучино и проч. )

Starbucks открыли миру новый способ коммуникации: надписи на стаканчиках! В Инстаграме их тоже можно использовать. И, конечно, создавать из букв что угодно, на что вам хватит фантазии.

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

Прежде чем публиковать визуал с текстом, убедитесь в том, что в тексте нет нелепых ошибок, надпись читается в миниатюре и не обрезается по краям.

Очень хотелось бы дать вам рекомендации по тому, какие шрифты лучше использовать, но выбор подходящего кириллического шрифта — это обычно такая больная тема, что я просто предложу вам довериться вашему глазу и вашему сердцу.

Надеюсь, мне удалось вдохновить вас на создание красивых фоторабот.

Буду рада, если поделитесь результатами. Отмечайте @meriva_stilllife  и  @naoblakax.

___________

Автор статьи:

Маша Иванова, фотограф

Настройте и стилизуйте свой контент – Справочный центр Notion

В этой статье

Вы можете сделать так, чтобы Notion выглядел и чувствовал себя так, как вы хотите — как ваш бренд, ваша команда, ваш стиль.

Мы встроили функции, чтобы вы могли настроить любую страницу или рабочее пространство. Несмотря ни на что, Notion сделает ваш дизайн великолепным 🎨

Перейти к часто задаваемым вопросам

Содержание

  • Стиль текста
  • Уценка
  • Шрифт и размер
  • Цвета
  • Пользовательские Ширина страницы Ширина страницы0010
  • Блоки выноски
  • Добавить выноску
  • Стиль выноски
  • Иконки
  • Обложка

Notion оснащен всеми функциями оформления текста, которые вы ожидаете от любого текстового процессора, и еще несколькими дополнительными функциями. in. Выделите любой текст, чтобы увидеть это меню:

Конечно, применяются все обычные сочетания клавиш, например  cmd/ctrl  +  B  для жирный  и  cmd/ctrl  +  9 S 0 shift037 для зачеркивания. Но мы добавили пару других:

  • cmd/ctrl  +  E  для отображения кода в строке.

  • cmd/ctrl  +  shift  +  M  чтобы добавить комментарий к любому тексту.

  • Да, и вы всегда можете использовать @ , чтобы упомянуть страницу или человека в своей рабочей области.

Notion поддерживает все стили Markdown для настольных компьютеров, веб-сайтов и мобильных устройств. Вот краткое изложение ярлыков:

При вводе:

  • Введите ** с обеих сторон текста, чтобы выделить полужирным шрифтом.

  • Введите  *  с обеих сторон текста, чтобы  выделить курсивом .

  • Введите ` с обеих сторон текста, чтобы создать встроенный код . (Это символ слева от клавиши 1.)

  • Введите ~ с обеих сторон текста, чтобы зачеркнуть его.

В начале любой строки текста:

  • Введите * , - или + , а затем пробел , чтобы создать маркированный список.

  • Введите [] , чтобы создать флажок списка дел. (Между ними нет пробела .)

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

  • Введите # , затем пробел , чтобы создать заголовок h2.

  • Введите ## , затем пробел , чтобы создать подзаголовок h3.

  • Введите ### , затем пробел , чтобы создать подзаголовок h4.

  • Введите > , затем пробел , чтобы создать список переключения.

  • Введите " , затем пробел , чтобы создать блок кавычек.

0005

  • Выберите один из трех различных стилей типографики для каждой страницы, которую вы создаете. Просто нажмите •••  в правом верхнем углу страницы и выберите Default , Serif или Mono . Соответственно изменится весь текст на вашей странице.

Оживите свой текст, превратив его в цвет или выделив цветом. Есть много цветов на выбор и несколько способов их нанесения:

Совет: Использовать один и тот же цвет снова и снова? Примените последний цвет, который вы использовали, с помощью сочетания клавиш cmd/ctrl  +  shift  +  H .

Вы можете уменьшить поля на любой странице и расширить область содержимого, перейдя к ••• в правом верхнем углу окна Notion и включив Полная ширина .

Верхняя часть любой страницы в Notion может содержать две вещи: обратные ссылки и комментарии.

Как и все в Notion, вы можете настроить внешний вид этих компонентов. Чтобы получить доступ к этим параметрам:

Блоки выноски полезны для выделения определенного текста или выделения его из остального документа. Возможно, вы хотите добавить предупреждение, подсказку и т.  д. Вот как это выглядит:

Значок эмодзи и цвет блока можно легко изменить на все, что захотите. По умолчанию используется то, что вы использовали последним.

Добавить выноску

Стиль выноски

  • Каждый блок выноски снабжен значком. Нажмите на него, чтобы изменить его на то, что вы хотите.

  • Вы также можете загрузить собственное изображение значка (идеальный размер 280 x 280 пикселей) или вставить ссылку на нужное изображение.

  • Нажмите  Random  , чтобы переключаться между случайно сгенерированными вариантами эмодзи, пока один из них вам не понравится!

  • Измените цвет самого блока выноски (или текста внутри блока), нажав значок  ⋮⋮ , который появляется слева при наведении курсора.

  • Выбрать Цвет  и выберите в меню цвета фона, чтобы изменить цвет всего блока. При выборе значения по умолчанию блок становится белым со светло-серым контуром.

У каждой страницы, будь то база данных или нет, может быть свой значок — либо эмодзи, либо изображение, которое вы загружаете сами (например, ваш логотип). Он появится в левом верхнем углу вашей страницы и на боковой панели рядом с ним. Это помогает сделать страницы запоминающимися и легкими для поиска.

Есть несколько способов добавить значки страниц:

  • Наведите указатель мыши на верхнюю часть любой страницы и нажмите  Значок "Добавить" .

  • Щелкните значок любой страницы на боковой панели.

  • В обоих случаях открывается меню, в котором можно найти или выбрать смайлик, загрузить собственный файл с компьютера (например, логотип) или вставить URL-адрес изображения из Интернета.

  • Вы также можете нажать Random , чтобы переключаться между случайно выбранными смайликами, пока они вам не понравятся!

  • Чтобы удалить значок, просто нажмите на него и выберите  Удалить .

  • Идеальные изображения значков имеют размер 280 x 280 пикселей.

Обложка появляется в виде баннера в верхней части любой страницы, привнося элегантность, цвет и стиль (даже в базы данных).

  • Наведите указатель мыши на верхнюю часть любой страницы и нажмите Добавить обложку .

  • Наведите курсор на появившуюся обложку и выберите Изменить обложку .

  • Появится меню с галереей вариантов, выбранных Notion.

  • Нажмите Загрузить , чтобы добавить собственное изображение со своего компьютера, или нажмите Ссылка , чтобы вставить URL-адрес изображения из Интернета.

  • Вы также можете найти и выбрать изображение в Unsplash, библиотеке из более чем 1 000 000 красивых, пригодных для использования стоковых фотографий.

Совет:  Вы можете сделать так, чтобы титульные страницы отображались в виде изображений на доске или в карточках галереи в базе данных. Нажмите Свойства  →  Предварительный просмотр карточки  →   Обложка страницы .


Часто задаваемые вопросы

Могу ли я сделать полную ширину по умолчанию? Есть ли способ установить стиль по умолчанию для всех страниц?

Еще нет, но об этом просили многие пользователи! Мы продолжаем помнить об этом для будущих проектов.

Можно ли выровнять текст по центру или по правому краю?

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

Почему я не могу изменить размер текста на мобильном телефоне?

Этот параметр стиля, наряду с шириной страницы, существует только на рабочем столе и в Интернете.

Каков идеальный размер и соотношение сторон изображения для обложки?

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

Как вставить эмодзи в строку с моим текстом 🤔?

В любом месте текста введите : , за которым следует название смайлика, который вы хотите использовать, например  :fire  для 🔥 или :clapping для 👏

или где-нибудь еще на вашем компьютере!

Mac:  ctrl  +  cmd  +  пробел

Windows 10:  ключ Windows  +  .  или  ключ windows  +  ;

Остались вопросы? Поддержка сообщений

Далее

Создание ссылок и обратных ссылок

Notion позволяет легко создавать и копировать ссылки как на целые страницы, так и на отдельные блоки содержимого внутри страниц, например, привязку к определенному заголовку, тексту или изображению. Это позволяет вам создавать и делиться ссылками, которые ведут людей прямо к тому, что им нужно 🔗

Добавить текст к фотографиям в App Store

Описание

ArtWord — лучшее приложение для дизайнеров и творческих личностей, позволяющее превращать свои изображения в цифровые произведения искусства!

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

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

Выберите цвета, отрегулируйте яркость, контрастность, насыщенность, размытие и используйте другие фотоэффекты и фильтры. Украсьте свой образ выбранными нашими дизайнерами штампами: лентами, баннерами, фотодекорациями и различными рамками.

Поделитесь своим творением с друзьями в Facebook, Twitter, Instagram или сохраните в галерее, чтобы отправить его по электронной почте, iMessage.

ArtWord позволяет вам использовать свое воображение и создавать удивительные произведения искусства.

Версия 1.4.9

- Новые шрифты.

Рейтинги и обзоры

12,6 тыс. оценок

АБСОЛЮТНО ЛУЧШИЙ!!!

OMG — Это 10!
Я только что скачал это приложение, и я в восторге!
Такой интуитивно понятный и простой в использовании — и шрифты КРАСИВЫЕ, и они созданы для взрослых, а не для детей, сверкающих единорогами — как освежает!
Я уже создал и разместил карточки, бюллетень и плакат, и я сдерживаю себя, иначе я бы продолжил, но в моем списке дел ЕСТЬ другие задачи, которые нужно выполнить сегодня, иначе Я бы продолжал творить!
Сделайте себе одолжение, особенно если вам нужен доступ к созданию красивых вещей для представления на работе, или вы художник, который просто живет, чтобы делать жизнь красивее! Отличная работа, разработчики!!😊🙏🏼💕

Отличное приложение!

Шаблоны самые лучшие! А потом вы доберетесь до стилей для обычного текста, и мне захочется поискать банку с чаевыми для этих парней. Спасибо за майское обновление, у меня есть только Wi-Fi, поэтому я ценю, что некоторые шаблоны доступны в автономном режиме. Я сравниваю это с WordSwag, и это хорошо! Единственная проблема, которая у меня есть, заметьте, совсем не мешает, это то, что вы не можете добавить дополнительный текст в шаблоны или наоборот. Теперь я просто использую загруженную версию для редактирования

Бесплатно это хорошо...

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

Уважаемый пользователь,
Пожалуйста, обновитесь до последней версии, теперь вы можете найти 40 типографских шаблонов, а также больше шрифтов и фонов. Вы также можете сохранить проект, чтобы отредактировать его позже.
Мы любим тебя!

События

Разработчик, Fitness Labs, указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см. политику конфиденциальности разработчика.

Данные, не связанные с вами

Могут быть собраны следующие данные, но они не связаны с вашей личностью:

  • Данные об использовании
  • Диагностика

Методы обеспечения конфиденциальности могут различаться, например, в зависимости от используемых вами функций или вашего возраста. Узнать больше

Информация

Продавец
Фитнес Лабс ООО

Размер
112,9 МБ

Категория
Графика и дизайн

Возрастной рейтинг
4+

Авторское право
© Fitness Labs

Цена
Бесплатно

  • Сайт разработчика
  • Тех. поддержка
  • Политика конфиденциальности

Еще от этого разработчика

Вам также может понравиться

Эксперты

говорят: почему не следует отправлять электронные письма, содержащие только изображения «Я вижу, что все остальные делают это», — могут сказать они.

Или ваша команда дизайнеров может возразить: «Изображения просто облегчают поддержание единообразия дизайна. Мы можем использовать шрифты наших брендов, размещать копии на изображениях и многое другое… и все это без программирования».

И, может быть, вы тоже верите в это.

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

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

Почему электронные письма с изображениями популярны

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

Табиш Бхимани, основатель и главный стратег Mastrat Digital, объясняет:

«Мы отправляем электронные письма брендам электронной коммерции и риелторам, которые работают над новостройками, где всегда важно быть первыми на рынке.

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

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

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

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

Ключевыми здесь являются гибкость, приспособляемость и чувствительность ко времени.

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

10 причин отказаться от писем, состоящих только из изображений

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

Итак, вы должны спросить себя: будут ли одни только изображения служить вашей всей аудитории? Просто отправляя электронные письма, содержащие только изображения, или содержащие большую часть вашего сообщения в изображении, вы можете оптимизировать свою электронную почту только для подмножества своей аудитории. И это еще не все.

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

1. Если у вашего подписчика отключены изображения, он не увидит вашу электронную почту

Вы слышали о блокировке изображений электронной почты?

Из-за настроек почтового клиента по умолчанию или личных предпочтений изображения не отображаются для многих подписчиков. Хотя многие почтовые клиенты теперь отображают изображения по умолчанию, отключение изображений по-прежнему очень распространено в регулируемых отраслях, где корпоративные фильтры блокируют изображения по умолчанию. Так что, если вы маркетолог B2B, это ключевая деталь, которую следует учитывать при создании ваших электронных писем.

Заблокированные изображения могут привести к тому, что сообщения электронной почты не сообщат ничего сразу и не окажут воздействия — или даже кажутся неработающими. Может быть хуже, если у вас не настроен текст ALT для ваших изображений, потому что тогда электронное письмо просто будет пустым.

.

 

Почти все содержимое электронного письма содержится в изображениях, и текст ALT не настроен. Таким образом, любые подписчики с заблокированными изображениями полностью пропустили содержание письма.

2. Отсутствие живого текста может повредить доступности вашей электронной почты

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

Даже если заблокированные изображения не являются проблемой для вас, учитывая долю рынка вашего конкретного почтового клиента, все еще остается проблема электронных писем, содержащих только изображения, которые не доступны для всех читателей.

«Вы просто не знаете, как ваши подписчики воспринимают ваши электронные письма, и вы хотите предоставить своим подписчикам лучший опыт, несмотря ни на что. А это невозможно с электронными письмами, состоящими только из изображений».

— Карин Слейтер, специалист по электронному маркетингу, Litmus

(Кэрин также хотела, чтобы я сказал вам: «Я оставляю за собой право изменить свое мнение в любое время». Ха! Если мы что-то и узнали об электронной почте, так это что в электронной почте нет константы.)

Рассмотрим слабовидящего абонента. Если они используют программу чтения с экрана для чтения вашей электронной почты, но ваше сообщение скрыто в изображении, они не смогут переварить все, что может предложить ваша электронная почта. Если они настроят свое устройство на 120 точек на дюйм, чтобы увеличить размер шрифта, они не смогут увидеть более крупный текст, поскольку он весь в изображениях.

То же самое касается тех, кто говорит на другом языке: они не могут перевести текст в вашем письме, если он является частью изображения.

Здесь стоит отметить увеличение числа подписчиков, которые используют голосовых помощников для чтения своих электронных писем. В отличие от программ чтения с экрана, голосовые помощники , похоже, не распознают ALT-текст и другие атрибуты HTML , поэтому даже если у вас есть ALT-текст для письма, состоящего только из изображений, это не будет иметь значения для этой части вашей аудитории. Электронная почта будет совершенно пуста для них. Еще одна причина использовать живой текст везде, где это возможно.

3. Отсутствие текста в прехедере

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

4. Из-за размера электронного письма оно может загружаться медленно или вообще не загружаться

Если у ваших подписчиков медленное подключение к Интернету или они подключаются к данным на ходу, изображения в ваших электронных письмах могут загружаться медленнее, чем обычно. Даже если у кого-то есть быстрое подключение к Интернету, существует риск того, что изображения могут загружаться недостаточно быстро.

«Если у вас медленный интернет или вы используете мобильное устройство, загрузка изображений использует сотовые данные и может занять раздражающе много времени. Изображение, которое не загружается, означает, что маркетолог может потерять возможность заставить подписчика нажать на его призыв к действию».

— Ноут Боктор-Смит, старший менеджер по маркетингу жизненного цикла, LaunchDarkly

На моем рабочем столе с высокоскоростным подключением к Интернету это электронное письмо, состоящее из изображений, загружалось достаточно медленно, чтобы я мог сделать снимок экрана. Вы можете видеть, что часть изображения заголовка все еще загружается. Что вы не видите? Гигантское изображение героя, которое должно быть над ним, а также еще один текстовый блок как изображение и анимированный GIF, где это большое пустое пространство. Потому что они еще не загружены.

Чем дольше изображения загружаются, тем больше вероятность того, что ваш подписчик отключится и удалит ваше письмо. И если изображения — это все, что может предложить ваша электронная почта, это может повлиять на будущее взаимодействие с вашим брендом.

5. Изображения могут плохо масштабироваться до размера экрана мобильного телефона

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

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

– Джоди Гиббонс, руководитель отдела маркетинга по электронной почте, Notcutts Ltd. Но есть не только два размера экрана. И зачем делать двойную работу по созданию изображений (и раздуванию HTML-кода электронной почты), если вы можете просто создать адаптивное электронное письмо с живым текстом?

6. Дизайн для темного режима намного сложнее

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

7. Ваши электронные письма попадут в папку со спамом

… Вроде того. Я в основном упоминаю об этом, чтобы разоблачить его.

Раньше спам-фильтры не любили электронные письма с большим количеством изображений, потому что они не могли прочитать текст в них, чтобы идентифицировать их как спам (и это был способ для спамеров скрыть свое сообщение).

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

Таким образом, не сами изображения могут повредить вашей доставляемости, а более низкая вовлеченность, которую вы можете увидеть из-за менее доступных электронных писем, с которыми люди не могут взаимодействовать.

8. Ваша электронная почта не будет доступна для поиска

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

Ваши подписчики не смогут найти контент, который они ищут, так же легко, как если бы вы использовали живой текст в своей электронной почте.

9. Редактирование копии занимает слишком много времени

Как часто ваше электронное письмо одобрялось с первого раза? Согласно нашему отчету о состоянии рабочих процессов электронной почты, количество людей, вовлеченных в процесс проверки, увеличилось, и 30% маркетологов считают этот процесс слишком обременительным.

Необходимость изменить текст на изображении делает это еще длиннее.

«Электронные письма с изображениями могут повлиять на время производства. Если в копии из рецензирования требуются исправления, и они есть на изображениях, теперь у вас есть несколько шагов, чтобы внести это изменение по сравнению с живым текстом».

— Кортни Фантинато, специалист по маркетингу и разработчик электронной почты

И не думайте, что изображения дают вам большую гибкость для замены ошибок на бэкэнде после отправки электронного письма. Как объясняет Кортни, «могут возникнуть сложности из-за кэширования изображений».

10. Электронные письма, содержащие только изображения, обходятся дорого

Время – деньги. Если кто-то тратит время на создание красивого электронного письма, состоящего только из изображений, включая все упомянутые выше переходы туда и обратно только для изменения текста в нем, это дорого обходится.

«Хорошие электронные письма, содержащие только изображения, могут дорого стоить. Особенно когда вы начинаете смотреть на адаптивный дизайн, доступность и интернационализацию. Стоит ли это дополнительных затрат, зависит от того, что вы с ним делаете и кто ваша аудитория. И у вас может не быть собственного таланта, чтобы заплатить эту цену».

— Стив Аткинс, основатель Word to the Wise

Подумайте обо всем, что вам нужно сделать, чтобы приспособиться к различным размерам экрана, редактированию текста, языкам и многому другому. Это время (и деньги) складывается.

Как использовать силу изображений, сохраняя при этом доступ к электронной почте

Повторим еще раз: Никогда не отправляйте электронное письмо, полностью состоящее из изображений .

Это не значит, что вы не можете использовать изображения в своих электронных письмах! Если все сделано правильно, вы можете создавать гибкие и красивые дизайны электронной почты, которые используют силу изображений, сохраняя при этом доступ к своим электронным письмам для всех в одно и то же время.

«Любое изображение, которое вы делаете , должно иметь цель. Мне нравится сочетание текста и светлых изображений в B2B, но я защищаю это изображение. Какую ценность это добавляет к сообщению? Это, например, делает контент более удобным для просмотра? Давать контекст? Демонстрация опыта?»

— Натали Джексон, директор по формированию спроса, CBIZ

Вот несколько советов, которые помогут вам получить лучшее из красивых изображений и доступности:

  • Многие компании по умолчанию встраивают текст в изображения, потому что хотят разместить копию перед изображение. Вместо этого используйте фоновые изображения и живой текст!
  • Включите описательный текст ALT изображения и внедрите текст ALT в стиле , где имеет смысл обозначать этот элемент даже без изображений.
  • Создавайте пуленепробиваемые кнопки, чтобы ваш призыв к действию был громким и четким.
  • Оптимизируйте изображения, чтобы размер файлов был небольшим, желательно менее 1 МБ.
  • Многие бренды также говорят о том, как электронные письма, содержащие только изображения, экономят время, но вы можете сэкономить еще больше времени, создав модульный шаблон электронной почты, чтобы быстро создавать гибкие, творческие, безошибочные электронные письма за считанные минуты (наша собственная Карин Слейтер делает это в 10!).

И если мысль о кодировании адаптивных электронных писем сдерживает вас, ознакомьтесь с этим простым в использовании руководством по адаптивным электронным письмам от Николь Мерлин, владельца и разработчика электронной почты Email Wizardry.

Получите наши бесплатные шаблоны электронной почты — готовы к работе

Ищете быстрое решение? Получите наш бесплатный набор адаптивных шаблонов электронной почты, протестированных в более чем 100 почтовых клиентах, включая темный режим, и начните использовать их уже сегодня.

Загрузить сейчас

 

Все еще не уверены?

Если объяснение недостатков электронных писем, содержащих только изображения, не убеждает вас или ваших заинтересованных лиц, вот несколько способов, которые могут помочь:

Покажите, как выглядят ваши электронные письма с отключенными изображениями.

Посмотрите, как ваши кампании будут выглядеть для подписчиков, если изображения не будут отображаться. Litmus Test предоставляет вам скриншот вашего электронного письма с отключенными изображениями, который вы можете легко увидеть сами или поделиться с заинтересованными сторонами.

Запустите A/B-тест.

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

Все дело в ваших подписчиках

Что работает для вашей аудитории? Каждый один из них? Если вы делаете все правильно (например, советы, которыми мы поделились ранее), чтобы хорошо делать электронные письма с большим количеством изображений, и они работают на ваших подписчиков, то это здорово!

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

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

У вас есть еще советы, как убедить вашу команду прекратить отправлять электронные письма, содержащие только изображения? Давайте послушаем их в комментариях ниже!

Проверяйте свои электронные письма, независимо от того, как они составлены

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

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *