Елена Петрова (liseykina) wrote,
Елена Петрова
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ильде:

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

  • очень просто. статья собирается как башенка из кубиков.

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

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

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


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


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

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



подписаться чтобы не пропустить ничего интересного
Я в других социальных сетях:  [Google+ ][ Facebook ] [500px] [Instagram]
Купить мои фотографии: [Lori] [Shutterstock] [Dreamstime] [Istockphoto]
Tags: умности, фотография
Subscribe
promo liseykina july 30, 2020 19:45 497
Buy for 100 tokens
Добро пожаловать, проходите, располагайтесь. Вот тапочки, руки мойте с мылом, вам чай с сахаром? Это журнал про путешествия и фотографии, а точнее про фотографии из путешествий. Итак, если вы не знаете зачем и почему вы здесь и что теперь делать, то можно почитать мои записи про разные города и…
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 42 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →