Как сделать лонгрид

[liseykina]

Лонгрид - это такой стиль подачи информации, при котором читатель видит длинную-длинную страницу, на которой текст много раз перебивается различными вставками: фото, видео, инфографика, звук и т.д. Очень часто эти вставки подгружаются динамически, по мере пролистывания страницы, иногда двигаются с разной скоростью или с эффектом параллакса. Короче, получается красота неописуемая, которая вызывает у зрителя Wow-эффект (некоторым, правда, не нравится такое мельтешение, но так и все фломастеры на вкус разные).
После того как я опубликовала свой первый лонгрид (давно хотела попровать такой формат) - Иордания - затерянный мир было очень много вопросов про то как можно сделать тоже самое.
Я не жадная, поэтому делюсь информацией.


Сначала немного теории и советов про то какой материал лучше всего подходит под оформление в виде лонгрида.

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

Главное правило создания мультимедийного лонгрида - он должен рассказывать интересную историю. И эта история должна быть красиво оформлена.
Есть два типа потребления контента современным читателем: leanback (читают, откинувшись назад) и leanforward (наклонившись вперед). Если новости, короткие видео и небольшие заметки относятся к последнему типу, то лонгриды идут в одну категорию с кинофильмами, сериалами, журналами и книгами - их читают, удобно расположившись в кресле или на диване. Читатель предвкушает эстетическое удовольствие которое надо оправдать.

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

вот, тот самый лонгрид про Иорданию на который я давала ссылку в виде огромного скриншота


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

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

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

• shorthand.com
• creatavist.com
• medium.com - один из первых сервисов, в которых стало доступным любому пользователю сверстать историю в виде несложного лонгрида. По сути работает, как блог-платформа. Очень прост в использовании.
• readymag.com
• tilda.cc
• stampsy.com

Я честно зарегистрировалась и потыкала кнопки в каждом из них. Кроме простоты использования и красивого результата мне еще была нужна возможность поместить получившийся материал на свой домен - зачем мне нагонять трафик на чужую платформу, когда он мне самой нужен. А в идеале экспортнуть его таким образом чтобы сделать независимым от сервиса с помощью которого все сделано.
Кстати, для вордпресса, на котором у меня сделан сайт http://liseykina.ru я тоже нашла несколько плагинов которые якобы позволяют прямо на сайте делать лонгрид, но у меня ни один из них не захотел работать. Есть еще специальные полноэкранные темы, но вот перекраивать заботливо сверстанную и переверстанную собственными ручками тему для вордпресса в мои планы вообще не входило.

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

Я решила, что вполне могу позволить себе хоть год делать десяток материалов на базовом аккаунте, а потом заплатить 1000р за месяц и отвязать их от тильды и поместить к себе на сайт.
Для чистоты эксперимента я попробовала сделать один и тот же материал в нескольких сервисах, сейчас уже не вспомню где конкретно, но точно попробовала shortland и medium.com, но почему-то именно на Tильде он начал получаться легко и сразу.


Итак, что мне понравилось в Tильде:

• красиво. даже если использовать все блоки из коробки, то получается красивый материал. Отступы, шрифты, размер элементов - все идеально подобрано
• очень просто. статья собирается как башенка из кубиков.
• очень много блоков. Есть блоки на любой вкус. Можно вставлять видео, картинки, галереи, комбинацию видео и изображений. При этом куча разных визуальных настроек.
• очень простой экспорт и привязка к своему сайту. при этом если надо внести какие-то правки уже после публикации, то это легко делается на тильде и моментально появляется у вас сайте.
• отзывчивая поддержка. Я тупила и не могла понять как вставить в документ полноэкранное видео которое начнет проигрываться само, в поддержке подсказали, что оказывается надо добавить ссылки на два формата одного и того же видео. Довольно странно и необычно, ну да ладно. Поддержка молодцы :)

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

Click to view

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

Я допускаю, что есть какие-то сервисы с более низкой ценой за использование, но мне очень понравился дизайн и предустановленный стиль в Tильде и уже в процессе сборки статьи я узнала, что настраивать можно практически все.
А еще там реально простая и понятная админка - чтобы привязать получившийся материал к своему домену надо в одном месте на тильде прописать адрес сайта, и настроить dns на своем сайте. Все. Два простых действия.
Так что ждите следующий лонгрид с воздушными шариками из Каппадокии.

подписаться чтобы не пропустить ничего интересного
Я в других социальных сетях:  [Google+ ][ Facebook ] [500px] [Instagram]
Купить мои фотографии: [Lori] [Shutterstock] [Dreamstime] [Istockphoto]