Антон Кошуба

A href его знает

Пишу статью про искусственный интеллект и наткнулся на сайт с ляпами в вёрстке. Ну с кем не бывает. Автор хотел поставить ссылку на National Geographic Россия, но что-то пошло не так. То ли автор забыл, как ставить ссылки в вебе, то ли верстальщик заболел.

Конкретно в этой ситуации решение выглядело бы так:

<a href="http://nat-geo.ru">National Geographic Россия</a>

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

Новый текст на сайте Artery.agency

В конце января 2024 года ко мне обратилась компания Artery с просьбой написать и структурировать новый текст для сайта.

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

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

За три года работы у Artery накопилось много материала, некоторые услуги изменились, а текст на сайте не отражает всей полноты компании. Чтобы это исправить, надо переписать текст.

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

Задача

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

Задача: обновить тексты на главной странице сайта Artery в соответствии с новой структурой и новыми услугами. Написать 4 новые страницы по услугам и продукту.

Всего предстояло написать текст для 5 страниц + 3 карточки с кейсами:

Главная

Аудит оргструктуры

Цифровой офис в ноушн

Поддержка начинающих руководителей

Курс «Голден митинг»

Часть материала уже была собрана в ТЗ, другую часть решили обсудить на звонке. Мы созвонились, обсудили мою задачу, и вот о чем договорились.

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

Успеть в срок

Еще одно ограничение проекта — сроки. Я получил всю информацию 31 января, сдать материал надо — 5 февраля.

Идеальная работа была бы такой. Я провожу интервью с экспертом по одной странице, пишу текст, получаю комментарии, если необходимо — дорабатываю материал. Перехожу к следующей странице и опять: интервью → текст → комменты.

В реальности надо было выдавать по странице в день с учетом комментов и погружения в материал.

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

Гугл док не подходит

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

Текст не существует в вакууме сам по себе, тем более текст для сайта. Он всегда привязан к интерфейсу, дизайну, типографике и вёрстке.

Когда пишешь в гугл доке, не видишь, как текст будет выглядеть на сайте.

Один и тот же абзац в текстовом редакторе и на сайте может считываться совершенно по-разному.

Поэтому я писал сразу в макете сайта — в фигме.

В фигме тоже можно оставлять комментарии, зеленые кружочки — это они

Результат

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

Главная

Аудит оргструктуры

Цифровой офис в ноушн

Поддержка начинающих руководителей

Курс «Голден митинг»

Сам сайт можно посмотреть по ссылке: artery.agency

Команда

Фаундер, бизнес-консультант: Евгения Дацко

Редактор, копирайтер: Антон Кошуба

Партнёр, бизнес-консультант: Анастасия Каткова

Методист, бизнес-аналитик: Алена Пашнина

Что дальше

Мы успели в срок. Компания выступила на форуме и сайт встретил новых пользователей.

Я занимаюсь редактурой для экспертов, малого бизнеса и образовательных проектов: помогаю с учебниками, статьями, гайдами, запускаю блоги, верстаю сайты. Моя цель — помочь клиентам в создании образовательных проектов.

Чтобы обсудить задачу, напишите: koshuba.pro@gmail.com

Нет фоток — значит, не было

Иногда бывает так:

— Привет, недавно из Египта вернулись. Так здорово было, такие закаты, очень красиво.

— А фотки есть?

— Зачем тебе фотки, ты только послушай, какие там были стриптизерши…

— Зачем ты мне все это рассказываешь? Покажи фотки.

— … а еще…

(проходит 15 минут)

— … я еще успел по горам полазить и на вулкан подняться.

— Ясно, нет фоток — значит, не было.

Или так:

— Была недавно в ЦУМе, сумку себе купила…

— Прикольно, скинь фотки, заценю.

— … из кожи страуса с перламутровыми пуговицами…

— С тобой все хорошо?

— … это именно то, о чем я мечтала

(проходит 30 минут)

— …вот теперь я тебе все про нее рассказала, и фотки не понадобились.

Что это

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

Если вы продаете онлайн-курс — покажите кусочек, сделайте нарезку интересных фрагментов.

Внедряете битрикс, ноушн, кайтен — покажите дашборты, графики, таблички.

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

Короче, покажите ваш продукт, словно он сумка Прада, а вы на встрече выпускников. Потому что иначе:

Нет фоток — значит, не было

Эгея. Оформляем шапку блога

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

Что за «Эгея» такая?

«Эгея» это движок блога. Его придумал Илья Бирман.
Вот официальный сайт https://blogengine.ru/

Прелесть этого движка в том, что он:

  1. Бесплатный. Но есть платные фичи.
  2. Легко устанавливается.
  3. Не требует глубоких знаний в вебе.

Подробнее про «Эгею» можно посмотреть на ютубе «Что делает движок блога „Эгея“ · Доклад, 2023»

Зачем в блоге меню?

Если коротко — для навигации.

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

Вот несколько примеров:

В таком виде шапка превращается в навигационное меню.

Как сделать?

Вот что нужно будет сделать:

  1. Выбрать нужные теги.
  2. Оформить ХТМЛ-код.
  3. Добавить код в настройки блога.

У вас всё получится. А если не получится, напишите мне, и я сделаю так, чтобы всё получилось.

Выбираем теги

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

https://ваш_домен/blog/tags/

У меня адрес выглядит так:

Откройте страницы с нужными тегами. Нам понадобится их адрес.
Пример:

https://antonkoshuba.ru/blog/tags/redaktura/

Оформляем ХТМЛ-код

Чтобы меню было кликабельным, используем тег

<a href=""></a>

Пример:

<a href="адрес ссылки на тег">текст ссылки</a>

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

Вот мой пример:

<nav style= "height: 23.5px; font-size: 16px; line-height: 25.5px;"> &nbsp; <a href="https://antonkoshuba.ru/blog/tags/redaktura/">Редактура</a> &nbsp; <a href="https://antonkoshuba.ru/blog/tags/mir/">Мир</a> &nbsp; <a href="https://antonkoshuba.ru/blog/tags/portfolio/">Портфолио</a></nav>

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

Добавляем ХТМЛ-код в настройки

Нажмите на шестеренку:

Вставьте код из предыдущего шага в поле «Подзаголовок»:

Нажмите «Сохранить изменения».
Enjoy

Спасибо за вопрос Ольге Паньшиной

Верстаем письмо в ХТМЛ

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

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

Как решить

  1. Подготовить шаблон письма в ХТМЛ
  2. Создать новое письмо в gmail
  3. Открыть инспектор кода
  4. Удалить тег < br > и вставить на его место код письма

Готовим шаблон письма в ХТМЛ

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

<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%">
<tbody>
<tr>
<td style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica; line-height: 150%;text-align: left;" valign="top">

<h2 style="display: block; margin: 0; padding: 0; font-family: Helvetica;font-size: 22px;font-style: normal;font-weight: bold; line-height: 125%; letter-spacing: normal;text-align: left;">Поздравляю с успешной регистрацией на вебинар «Вебмастер 2024»</h2>

<p style="margin: 10px 0; font-size: 16px; line-height: 150%;">Вебинар пройдет в воскресенье <a href="https://calendar.google.com/calendar/event%E2%80%A6">28 января в 11:00 по Мск</a> в зуме.<br>
Я планирую уложиться в 1 час, но на всякий случай запланируйте 1,5 часа на вебинар.</p>

<p style="margin: 10px 0; font-size: 16px; line-height: 150%;">За 30 минут до начала мы отправим ссылку на вход.</p>
				</td>
			</tr>
		</tbody>
	</table>

Создаем новое письмо в gmail

Открываем инспектор кода

Кликаем правой кнопкой мыши и выбираем «Посмотреть код». В Mozilla Firefox этот пункт называется «Исследовать».

Редактируем код и вставляем туда наш шаблон

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

Удаляем тег < br > и вставляем вместо него ХТМЛ-код письма.

После этого останется только добавить получателей и тему письма.

Хороший гайд

Гайд — это информационный продукт. По-простому — инструкция. Вот несколько пунктов, которые помогут сделать хороший гайд.

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

Задайте себе вопрос: почему человек будет читать мой гайд? Какую проблему он решает?

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

Соберите первый модуль и все остальные сделайте похожими. 

Информативные заголовки
В справочниках заголовки помогают навигироваться и обозначают тему раздела. Хороший заголовок дает понять, что человека ждет дальше, строит его ожидания. Например: «Кого пригласить на день рождения». Не «Люди», а «Кого пригласить на день рождения». То есть о чем там.

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

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

Ваш Кэп

Вместо итогов года. 5 заметок редактору

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

1. Бери предоплату.
Или подписывай договор до начала работы. Это сохранит нервы. Иногда компании пользуются ДСА — договор-счет-акт, как правило, его оформляют уже после того, как услуги были оказаны. Береги нервы — бери предоплату.

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

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

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

5. Используй технологии.
Серьезно, используй чатГПТ, нейросеть Давинчи, ноушн, обсидиан и другие программы. Это здорово расширяет границы, экономит время, и, в конце концов, это просто весело.

На этом всё.
Берегите себя.

К вам тут рилс не залетал?

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

— надо срочно снять рилс: 2 вирусных и 1 продающий.
— да, да, уже протёр объектив своего айфона.

Проблема в том, что в инсте нет тумблера вирусный — не вирусный.

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

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

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

Что же делать?
А всё просто. Думайте о подписчиках. Делайте контент для них, про них. И будет вам и небо в алмазах и синяя галочка.

Полезные сервисы для редактора

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

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

Конвертер регистров — то же самое, только от студии Лебедева.

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

Портфолио: Гайд для туристов и иммигрантов в Грузии

Ситуация и проблема

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

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

Чем больше приезжало людей, тем больше и однообразнее становились вопросы. Тратить несколько часов в день на ответы на одни и те же вопросы совсем не хотелось. Когда в чате было 300-500 человек — ответы на вопросы не проблема. На тот момент в чате было около 1000 человек и каждый со своим вопросом. Это была проблема.

Решение и реализация

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

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

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

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

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

Результат

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

Гайд состоит из трех разделов:

  1. Знакомство и главные ссылки. В знакомстве сделан акцент на главной теме гайда — помощь иммигрантам и туристам.
  1. Меню с категориями: магазины, кафе, банки и пр.
  1. Полезные статьи. Часть из них я написал сам, что-то репостил из других ресурсов.

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

Заключение

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

На момент написания статьи гайдом пользуется порядка 9 тыс человек. Гайд не идеален, мне многое хочется в нем исправить и дополнить. Но помня критерии «делать — сделать» я могу сказать, что гайд сделан.

Ссылка на гайд → https://meadow-argon-b1b.notion.site/ae04cc15422f4b1883437b14e820087f

Ранее Ctrl + ↓